A New “Hello World!”
This is the second part of a tutorial on how to create a template for Joomla 2.5. In the first part we learned what a template is and what Joomla expects finding in a template.
Since a template structure can be very tricky and confuse, in this second part we’re going to do a simple Hello World Joomla template. This is a very simple structure but will help us to understand better how to work with templates inside Joomla. In the end of this article, I’m going to show how to install and apply a new template in Joomla. Before starting, let’s make some things clear:
- You can use any editor you want to; and
- Make sure your PHP server is on and your Joomla is working.
Create our template folder
To begin, let’s create our template folder. Create a folder where you’re going to store your template’s files. I’m going to call mine “helloworld”. Feel free to choose any name you want to, just make sure of naming your template with the same name. In this folder, create a file called index.php. Open this file in your preference editor. Copy the following lines in your index.php.
<jdoc:include type=”head” />
<jdoc:include type=”message” />
<div class=”center” align=”center”>Hello World!</div>
<jdoc:include type=”modules” name=”debug” />
This index.php file has a very basic structure. It doesn’t even compile the HTML rules, such as DOCTYPE parameter. However let’s keep it as simpler as we can so we’re going to understand better this whole process.
Analyzing this code, the first Joomla statement that we find is the <jdoc:include type=”head” />. This statement inserts your template information into the header. When Joomla finds this kind of statement what basically happens is it changes this statement for a bunch of HTML statements defined within other files, such as:
<meta name=”generator” content=”Joomla! 2.5″ />
<meta name=”description” content=”Simplest template in the Joomla world. />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”helloworld” content=”index, follow” />
<meta name=”keywords” content=”hello world, joomla” />
rel=”shortcut icon” type=”image/x-icon”/>
The second Joomla statement is <jdoc:include type=”message” />, which simply includes any server messages in the post. Usually it doesn’t have any message, so no extra content will be added.
The final Joomla statement is <jdoc:include type=”modules” name=”debug” />. This statement refers to the debug module. Normally this module doesn’t display anything. But if your debugging mode is on and you got an error while your website is running you will be able to see the error message on it. This information will be extremely helpful, since it will describe the execution of the template page.
To complete the template, let’s create its xml file. To meet the standards, it must be called templateDetails.xml and be inside your template folder. As said before, this file contains the template technical information, and list of used files. So open this file in your preference editor. Copy the following lines into it.
<?xml version=”1.0″ encoding=”utf-8″?>
<install version=”1.5″ type=”template”>
Simplest template in the Joomla world.
Installing a new template in Joomla
As any other extension in Joomla, a template can be installed through the Joomla Extension Manager. There you will find three ways to install a new extension: Uploading a Package file, installing from a directory (by default: Joomla/tmp directory) or from a URL. Let’s use the first option: Uploading a package file. To install your template:
- First you must to compact the whole template folder in a Zip file;
- Second, go to your Joomla administrator area, and then the Extension Manager; and
- Third, go to the “Install” tab, push the “Choose File”, localize your template zip file, and click on the “Upload & Install” button.
Figure 1: Extension Manager – Installing a new extension
Applying a new template as default
Considering that you did everything well and your template was successfully installed, go to Extensions>Template Manager. There you’re going to see your template amongst the available ones. Click on the checkbox beside of the desired template and then on “Make Default” button.
Figure 2: Template Manager – applying a template
Doing this, your template will be used by your website. Check it out!
Figure 3: Hello World template.