Digital Communication


Digital Communication

How to create a Joomla template?


For change the appearance of your website, you can use templates in the frontend. With the Joomla CMS, it is possible to create your own templates to be able to personalize them according to your wishes. Find out how to do this later in this article.

Create a Joomla template: prerequisites

Customizing your website with Joomla is not very complicated. In fact, you only need three elements to create your own Joomla template:

  • Joomla installation, minimum version 3.9: you need a current version of the CMS. All versions from version 2018 of Joomla 3.9.x are suitable for creating your own templates.
  • Basic knowledge of HTML and PHP: To be able to follow the instructions you need basic knowledge of HTML and PHP.
  • CSS knowledge: For web design, CSS is necessary. Our CSS tutorial gives you a good introduction to cascading style sheets. You must also master the main CSS commands if you want to create a Joomla template.

Create a Joomla template step by step

If you meet the conditions above, you can start creating your own template! To do this, log in to your Joomla site and then follow our step-by-step instructions.

Step 1: Create a Folder Structure

Firstly, you need to create the folder structure required for your template. This is done in just a few clicks. To do this, first navigate to the “templates” folder that you will find in the Joomla installation folder. All your templates are listed there. Create a new folder and name it. In this example, we create a folder named “test”, where the template will then be placed.

Joomla folder structure in your IONOS dashboard
For your Joomla template, you must create a new folder.

To complete the folder structure, you must create all the files necessary for the template. The code is based on a example template :


You must first create the file that allows you to install a template in Joomla: the manifest file templateDetails.xml. In this file, you define all the basic information about your template. This is for example the name of your template or its author.

You don’t need to be an Extensible Markup Language (XML) professional to understand the lines of code in the file. THE tags The most important ones of the XML file are the following:

  • <name>: template name
  • <creationDate>: date of creation of the template
  • <author>: author of the template, i.e. your name
  • <authorEmail>: email address of the author, therefore yours
  • <authorUrl>: URL of your website
  • <copyright>: copyright holder of the template
  • <license>: license information
  • <version>: current version of the template
  • <description>: template description
  • <files>: all files to install with the template
  • <positions>: positions of the modules used in the template
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "">
<extension version="3.1" type="template" client="site">
<description>IONOS Joomla Test Template</description>



The file index.php is where the basic mockup of your entire website. Firstly, simply use a simple HTML skeleton :

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!—Données de l’en-tête-->
<div id="navbar">
<li><a href="#">Catégorie 1</a></li>
<li><a href="#">Catégorie 2</a></li>
<li><a href="#">Catégorie 3</a></li>
<li><a href="#">Catégorie 4</a></li>
          <div id="content">
<h1 id="heading">Test-Template</h1>
<img class="image" src="" alt="Image"/>
<p>Vous pouvez créer un template Joomla en quelques étapes seulement. Suivez simplement les instructions étape par étape de IONOS.
        <footer id="copyright">
          <div id="footercontent">
<p>Copyright by IONOS</p>


css folder and template.css

Then create a folder called “css” which will contain all the files that will be important for the design of your template. In this folder, you directly create the file template.csswhere you can specify by code 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%;


The new folder structure created for the Joomla template
In the folder you created for your template, you can now create different configuration files.

Step 2: install the template

The second step is to install the template you just created. To do this, go to the Joomla backend under “ System > Install > Verify “. In the preview there, you should find your template under the name you chose. By clicking on the box to the left of your template name, you can install the Joomla template.

Joomla backend overview
In the Joomla backend, you can install the template you created in just a few clicks.
Menu Extension >  Check Joomla backend
By checking the box next to your template name, you begin the installation.

Step 3: activate the template

Once the installation of your template is complete, all you have to do isenable. This is also done in just a few clicks in the Joomla backend. Meeting on ” System > Templates > Site template styles “. By clicking on the star button to the right of your template name, you set it as the default template for your site.

Menu Templates >  Joomla backend site template styles
Click on the star icon to the right of your template to configure it as the default template for your Joomla site.

Step 4: connect the template to Joomla

It is important to connect your template to Joomla so that the display of your website in its new template works correctly. To do this, you must edit the file index.php. To integrate yourCSS style sheetembed the following line of code at the very top of your fileindex.php :

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


Step 5: Insert Header Data

In the next step, you need to integrate the header information in your index.php file. For this you can also use PHP. In the file index.phpsimply replace the comment in your header with the following line of code:

<jdoc:include type="head" />


This way you ask the CMS to enter the relevant header information into your file index.php.

You can then display your template in the test version of your Joomla site:

The IONOS Joomla test template finalized
This is how the finalized IONOS Joomla test template looks.

Step 6: Connect the Modules

The last step concerns editing your content Joomla in your template. You can create multiple new menu items by clicking “Menu > New” in the backend of your site.

Joomla backend: create a menu
You can create a menu in just a few clicks.

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

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

Now in your index.phpreplace the “nav” tag with the following line of code to modify your template accordingly:

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


Télécharger notre livre blanc

Comment construire une stratégie de marketing digital ?

Le guide indispensable pour promouvoir votre marque en ligne

En savoir plus

Souhaitez vous Booster votre Business?

écrivez-nous et restez en contact