# How to create a Joomla template

Joomla provides frontend templates that you can use to change the **appearance of your website**. For maximum individuality, you can create Joomla templates yourself.

## What do you need to create a Joomla template?

It is not difficult to give your Joomla website its own individual look. You only need three things to make your own Joomla template for your website:

- **Joomla installation, minimum version 3.9:** You need a current version of the CMS. All versions from the 2018 Joomla 3.9.x onwards are suitable for creating your own templates.
- **Basic HTML and PHP knowledge:** You need basic knowledge of HTML and PHP to follow the tutorial.
- **CSS knowledge:** CSS (Cascading Style Sheets) is required for website design. Our [CSS tutorial](https://www.ionos.co.uk/digitalguide/websites/web-design/css-coding-made-easy/) provides a good introduction to the style sheet language. You should also be familiar with the most important [CSS tricks](https://www.ionos.co.uk/digitalguide/websites/web-design/css-tricks-everyone-should-know/) if you want to create a Joomla template.

## How to create a Joomla template step by step

Once the above requirements are met, you can start creating your own template. To do this, log in to your Joomla website and then follow our step-by-step instructions below.

### Step 1: Create folder structure

The first step is to create the folder structure required for your template. This can be done in just a few clicks. To do this, navigate to the **templates** folder, which can be found in the file structure of your Joomla installation. All your templates will be listed in this folder. **Create a new folder and name it**. We will create a folder named ‘test’, where the template will be placed later on.

[![Image: Joomla folder structure in the IONOS panel](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/d/7/csm_ionos-folder-structure-template_37f944bf7f.webp "Joomla folder structure in the IONOS panel")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/ionos-folder-structure-template.png) You need to create a new folder for your Joomla template in the file directory. All files required for the template must be created to complete the folder structure. The code is based on a [sample template](https://github.com/coolcat-creations/hello "Gitrepo for the sample template"):

#### *templateDetails.xml*

First, you should create the file that makes it possible for you to install a template in Joomla in the first place. This is the **manifest file *templateDetails.xml***. All basic information about your template is defined in this file. This includes the name or the author of your template, for example.

You don’t need to be an Extended Markup Language professional to understand the lines of code in the file. The **most important XML file tags** are:

- `<name>`: Name of the template
- `<creationDate>`: When the template was created
- `<author>`: Author of the template (i.e., you)
- `<authorEmail>`: Author’s email address (i.e., yours)
- `<authorUrl>`: URL of your website
- `<copyright>`: Copyright owner of the template
- `<license>`: Information about the license
- `<version>`: Current version of the template
- `<description>`: Description of the template
- `<files>`: All files to be installed with the template
- `<positions>`: Positions of the modules in the template

```xml
<?xml version="1.0" encoding="utf-8"?>

<extension version="3.1" type="template" client="site">
<name>test</name>
<version>1.0</version>
<creationDate>19.10.2022</creationDate>
<author>Example user</author>
<description>IONOS Joomla Test Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<folder>css</folder>
</files>
<positions>
<position>menu</position>
<position>aside</position>
<position>footer</position>
</positions>
</extension>
```

#### *index.php*

The *index.php* file is the place where the **main layout of your entire website** is specified. At the beginning, a **simple HTML basic structure** is enough:

```html

<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!—Header details-->
</head>
<body>
<div id="navbar">
          <nav>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
</ul>
          </nav>
      </div>
      <div id="content">
<h1 id="heading">Test template</h1>
<img class="iamge" src="https://picsum.photos/900/500" alt="Image"/>
<p>You can create a Joomla template in just a few steps. Just follow the step-by-step instructions from IONOS.
</p>
      </div>
     
      
    <footer id="copyright">
      <div id="footercontent">
<p>Copyright by IONOS</p>
      </div>
</footer>
<div class="hash d-none" hidden>hash_c73dfd271a0c211d9ef2b1011ce591d107fe0a82</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

#### *css folder and template.css*

Next, create a folder called ‘css’. This folder will contain **all the files that influence your template’s design**. In this folder, you will create the file *template.css*, where you can use code to specify the layout you want.

```css
body {
font-family: "Arial", serif;
color: black;
line-height: 150%;
}
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #003399;
}
#navbar li {
    float: left;
}
#navbar li a {
    display: block;
    font-size: 26px;
    color: white;
    text-align: center;
    padding: 16px 18px;
    text-decoration: none;
}
#navbar li a:hover {
    background-color: white;
    color: #003399;
}
#heading {
    font-size: 48px;
    color:    #003399;
    text-shadow: 0 0 5px #000099;
}
#footercontent {
    float: right;
    padding-right: 10%;
}
```

[![Image: The new folder structure created for the Joomla template](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/0/a/csm_joomla-template-folder-structure_0e42d041e9.webp "The new folder structure created for the Joomla template")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-template-folder-structure.png) In the folder you created for your template, you can now create various configuration files. ### Step 2: Install template

The second step is to install the template you just created. To do this, navigate to **System** &gt; **Install** &gt; **Discover** in the Joomla backend. You should now find your template there under the name you chose. Click on the box to the left of your template’s name to [install the Joomla template](https://www.ionos.co.uk/digitalguide/hosting/cms/install-a-joomla-template/).

[![Image: View of the Joomla backend](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/2/6/csm_joomla-install-discover-template_761606a63d.webp "View of the Joomla backend")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-install-discover-template.png) In the Joomla backend, you can install the template you created with just a few clicks. [![Image: Extensions &gt; Check menu in the Joomla backend](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/6/3/csm_joomla-install-custom-template_9636556712.webp "Extensions &gt; Check menu in the Joomla backend") You can start the installation by ticking the box next to the name of the template. ](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-install-custom-template.png)### Step 3: Activate template

After your template has been installed, you need to **activate** it. This can also be done with just a few clicks in the Joomla backend. Navigate to **System** &gt; **Templates** &gt; **Templates: Styles (Site)**. You can set your template as the default by clicking on the star button to the right of your template name.

[![Image: Templates &gt; Templates: Styles (Site) menu in the Joomla backend](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/8/0/csm_joomla-template-default_2d51966179.webp "Templates &gt; Templates: Styles (Site) menu in the Joomla backend") Click the star icon to the right of your template to set it as the default template for your Joomla website. ](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-template-default.png)### Step 4: Connect template with Joomla

It is important that you connect your template to Joomla so that your website can be displayed with its new look. For this you need to **edit the *index.php* file**. To include your **CSS stylesheet**, use the following line of code and add it at the very top of your *index.php* file:

```php
<?php defined('_JEXEC') or die;
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
?>
```

### Step 5: Load header details

In the next step you have to include the **header details in your index.php file**. You can use PHP for this as well. In the *index.php* file, simply replace the &lt;!—header details--&gt; comment with the following line of code:

```html
<jdoc:include type="head" />
```

This way you request the CMS to load the relevant header information into your *index.php* file.

Afterwards you can preview your Joomla website:

[![Image: The finished IONOS Joomla test template](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/e/4/csm_joomla-test-template-frontend_d2b8152f80.webp "The finished IONOS Joomla test template")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-test-template-frontend.png) IONOS Joomla test template ### Step 6: Connect module

The last step is outputting your **Joomla content in your template**. To see this in practice, you first need to create several new menu items in the backend of your website. You can do this by clicking on **Menu** &gt; **New**.

[![Image: In the Joomla backend, you can create menu items in just a few clicks.](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/9/0/csm_joomla-create-menus_a3934d2e7c.webp "In the Joomla backend, you can create menu items in just a few clicks.")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-create-menus.png) Newly created menu items Now navigate to **System** &gt; **Extensions** &gt; **Side Modules** and select the menu you just created. In the advanced settings, you can set the module tag. Select the **nav** option.

[![Image: Select the “nav” tag to display your menu.](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/3/0/csm_joomla-set-module-tag-nav_5a380b5906.webp "Select the “nav” tag to display your menu.")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2023/joomla-set-module-tag-nav.png) Module tag in the advanced module settings Now replace the “nav” tag in your *index.php* with the following line of code to customise your template accordingly:

```html
<jdoc:include type="modules" name="menu" style="xhtml" />
```

Tip Don’t have your own website yet? With [Joomla hosting](https://www.ionos.co.uk/hosting/joomla-hosting "Joomla hosting from IONOS") from IONOS, it’s easy to [create your own Joomla website](https://www.ionos.co.uk/digitalguide/websites/website-creation/creating-a-joomla-website/). In addition, you can [register the domain you want](https://www.ionos.co.uk/domains/domain-names "Register a domain with IONOS") with IONOS at an affordable price.


This is a markdown version of: [https://www.ionos.co.uk/digitalguide/hosting/cms/create-a-joomla-template/](https://www.ionos.co.uk/digitalguide/hosting/cms/create-a-joomla-template/) for AI/LLM consumption.