Creating a Template for Joomla 2.5 – PART 1

Understanding Joomla’s requirements

For many people, dealing with templates in Joomla is a very hard task. They prefer to work with the standard templates or get one available on the internet. However if you are a web designer, you want create your own template and apply it to your website.

In this tutorial I am going to show how you can create your own template and use it inside Joomla.

This tutorial was divided in three parts. In this first part I’m going to show some basic concepts and what you need to know to start creating your template. Are you ready?! So let’s start!

First things first: Do you know what a template is?

Basically a template is the one that controls the look of your web site.  It organizes and manages how your website’s content is rendered by a web browser.

If you already have your template’s structure done go ahead and continue reading. If you don’t have it, this is a good time for you to stop, think in what you want to do and create your website look. If you need some instructions or inspiration, check my past article: Designing for the Web: First Steps.

Template Files and Directory Structure

If you’re going to use a template within Joomla you must meet some requirements, such as: templates must have some specific files and some specific directory structure. Let’s start with the directory structure.

Talking about the directory structure, all templates must be inside the Joomla/templates folder. Each template has its own directory and this directory must be called exactly as the name of the template. For example: If my template’s name is “myTemplate”, I must create a folder called “myTemplate” and all my template’s files are stored inside it.

Watch out: Joomla is Case-sensitive, so if the template is named “myTemplate” its directory name must be exactly the same.

In Joomla a template depends on at least two main files: templateDetails.xml and index.php. These files must be called exactly as mentioned because Joomla will be looking for them when start uploading the template.

Watch out: The “D” (in templateDetails.xml) must be in capital letter. Otherwise Joomla will not recognize the file.

So far, we have this:


Figure 1: myTemplate Directory Structure.

Most of templates have other files or folders, such as: css/template.css, images/logo.png, template_thumbnail.png, js/script.js. However those you can place and name as you want to.

The template_thumbnail.png is a small image (usually with 140 pixels wide x 90 pixels high) that shows the look of your template. It will be available in Joomla’s administrator area so the user can see how the template seems before apply it.

The css/template.css is a/one of the cascading style sheet (CSS) used by the template. Its name and location is optional, so you can name and place it wherever you want to. A template can have more than one CSS file and this is totally fine in Joomla. Feel free to create and organize the styles used by your template as you want to.

As well as the templateDetails.xml file, the directory /images is a Joomla standard. It will store all images that you’re going to use in your template.

The file templateDetails.xml is an xml file that informs to Joomla which are the files that your template is using. All files used by your template must be listed in this file. It also keeps the technical information about your template, such as:  author, version, name, date of creation, copyright, and so on. This file is required when installing a template in Joomla environment.  See in Figure 2 an example:

 Joomla-Website-Template - Part1

Figure 2:  templateDetails.xml file

The index.php file contains the presentation code that displays text, components, and modules from Joomla. It will be the in charge of loading your website modules, parsing Joomla template data, and handling the primary display. It is a combination of PHP and (X) HTML code and usually looks like this:

 Joomla-Website-Template - Part1

Figure 3: index.php file

That’s pretty much what we need to know to start creating our template. In the next article we’re going to better understand how a template is set up. Keep it up!

  1. isuru says:

    nice work thanks for the tutorial. I will comment you later after reeding PART2…

Leave a Comment

Your email address will not be published.

GET INTO A HEALTHY LIFESTYLE HABIT – Move More, Eat Real Food, and Get Outside.