Create Your First Joomla Template

Written by Administrator | 01 November 2009

In this tutorial , you will learn about the basics of a Joomla template, and create one from scratch. We will quickly go through installing a local server and Joomla itself, and then create a basic functioning template.

A closer look at Joomla

It’s pretty hard these days to get into any Open Source CMS discussion without the name of Joomla dropping. Its installation along with intuitive admin panel makes it very popular with users who are after an easy CMS while, at the same time, being packed with features that keep thousands of developers busy rolling applications and modules. If necessary, get familiar with the back end ( I recommend this quick Joomla 101 article on the Themeforest blog to get a quick feel.)

To visit your site , click on preview in the upper right corner of the admin area. What you will get is the default template with no content and the most basic of modules loaded.

The template

In order to begin understanding the template structure, let's take a look at the default one. Go to your www folder, then inside the joomla folder you should see a templates folder. (wamp/www/joomla/templates). This is where all the different templates go. You can switch between templates in the admin panel.

Inside the templates folder, you will see a folder for every template installed. Joomla comes with three templates: beez, rhuk_milkyway and ja_purity. Remember this location as this is where you will be installing your new templates in the future.

Although most templates are made up of quite a few files, only two are needed to make a working template. These are:

* index.php
* templateDetails.xml

The first one - index.php - is where all the markup goes in which you stick the Joomla includes. These can be seen as little hooks where joomla hangs up information on, like modules for example

The second file is templateDetails.xml. You can see this as a list of instructions to Joomla. This list must include the name of the template, the names of the files used in the template(images etc..) and the positions you want to use (the includes mentioned above.)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
 "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
       <name>template _tut</name>
       <creationDate>31-01-2009</creationDate>
        <author>Nettut Fan</author>
        <authorEmail>
  This e-mail address is being protected from spambots. You need JavaScript enabled to view it
 </authorEmail>
        <authorUrl>http://www.siteurl.com</authorUrl>
        <copyright>You 2009</copyright>
        <license>GNU/GPL</license>
        <version>1.0.0</version>
        <description>Template Tut</description>
        <files>
                <filename>index.php</filename>
                <filename>templateDetails.xml</filename>
                <filename>css/template.css</filename>
         </files>       
                
        
        <positions>
                <position>breadcrumb</position>
                <position>left</position>
                <position>right</position>
                <position>top</position>
               <position>user1</position>
                <position>user2</position>
                <position>user3</position>
                <position>user4</position>
                <position>footer</position>
        </positions>
</install>

Create Your First Joomla Template

Login