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.

Contents

What do you need to create a Joomla template?
How to create a Joomla template step by step

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 provides a good introduction to the style sheet language. You should also be familiar with the most important CSS tricks 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.

Joomla folder structure in the IONOS panel — 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:

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 version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<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>

xml

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:

<!DOCTYPE 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>
</body>
</html>

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.

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%;
}

css

The new folder structure created for the Joomla template — 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 > Install > 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.

View of the Joomla backend — In the Joomla backend, you can install the template you created with just a few clicks.

Extensions > Check menu in the Joomla backend — You can start the installation by checking the box next to the name of the template.

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 > Templates > Templates: Styles (Site). You can set your template as the default by clicking on the star button to the right of your template name.

Templates > 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.

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 defined('_JEXEC') or die;
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
?>

php

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 <!—header details–> comment with the following line of code:

<jdoc:include type="head" />

html

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

Afterwards you can preview your Joomla website:

The finished IONOS Joomla test template — 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 > New.

In the Joomla backend, you can create menu items in just a few clicks. — Newly created menu items

Now navigate to System > Extensions > Side Modules and select the menu you just created. In the advanced settings, you can set the module tag. Select the nav option.

Select the “nav” tag to display your menu. — Module tag in the advanced module settings

Now replace the “nav” tag in your index.php with the following line of code to customize your template accordingly:

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

html

Don’t have your own website yet? With Joomla hosting from IONOS, it’s easy to create your own Joomla website. In addition, you can register the domain you want with IONOS at an affordable price.