How to Develop Your First Ever Joomla Template?

Joomla comes with a nice long list of templates that are exceptionally good, and responsive. But, if you want to give your website an interesting outfit, and there’s nothing on board like the one you are looking for, you will need to create a single template. Let’s understand how you can create a Joomla template from the scratch. It is a step-by-step process, where each step marks an importance.

Pre-requisites
There are some pre-requisites that you will need to take care of before you start developing the template for your website. you will need a server and a database to get started. PHP and MySQL will come to your rescue in this case. You will need a single installer which will take care of all these installations and load it to the local server. Map your system with WAMP. You will first need to install the installer, and execute it and look out for a file named .wamp. An icon would be loaded to your PC which will help you gain access to wamp’s control panel that will assist you in installing and enabling your pre-requisites.

Joomla Installation
Once you have set up the pre-requisites, you will need to get Joomla installed to your server. Check out the www folder in the wamp folders, and you will need to install Joomla to this particular folder. Extract the contents of Joomla zip file to this folder, and rename it. You will now need to create a database for the same. Go to http://localhost in the browser, go to the server admin and create your database. In the aliases section, click on phpmyadmin, and create your database here. You will need to password protect this file.Before installing Joomla, check the pre-install checklist, and mark all the items you have on board to get started. You can easily skip the FTP configuration screen while installing Joomla. You need to add the modules, so you should ideally skip adding data at this point. With all the steps done, you are ready to kickstart your Joomla website. You can now delete the installation folder present in the wamp folder.

Before you start your journey with creating the template, you will need to gain an in-depth understanding of Joomla. Develop a clear understanding on how the backend of the CMS platform works.

Template Structure
You need to understand the template structure to get started with creating the template. Study the existing templates for their structure in the wamp folder. Within the templates folder, there is a folder for every template that you have installed. Whenever you create a new template, this is where the template will go. When you want to create a template, you basically need index.php and templateDetails.xml files to get started.

Index.php The markup for all Joomla includes are added to this file. These are the hooks where all the information is added

TemplateDetails.xml This gives out a list of instructions required to setup a template on Joomla. Name of the template, files used for the template etc. are all available in this file

Here’s a quick example of how templateDetails.xml file looks like.

<?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 _sttl</name>
<creationDate>31-01-2009</creationDate>
<author>Netsttl Fan</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>You 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Template Sttl</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>

This code includes a detail regarding name, author, date of creation etc. for the template. It also offers an insight on the position structure. You can control some aspects of position along the backend, if included in the position.

Now that you are aware of the structure, let’s get started with creating a simple template.

Creating the Template
You will first need to prepare to start the template creation process.

Go to Template folder<create new folder

Call it template_sttl

Now create two files in this template folder: index.php and templateDetail.xml, and paste the code given above to these files

Open index.php file in notepad and add the following code to it

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
</head>

For this purpose, you will use DOCTYPE the PHP code in the header section. You can add the following code, which is not included in the position element

<jdoc:include type=”head” />.

With this code, the Joomla header code is added which includes the page title. You can complete the markup for the page by adding body and closing html tags.

Getting Started with the Template
You have created the template file; it is time to add include to display the main content that is being viewed in general

<jdoc:include type=”component” />

Now, you have the following code as part of your index.php file

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
</head>
<body>
<jdoc:include type=”component” />
</body>
</html>

You will need data to test your template. Add an article before you begin testing. WAMP should be running whilst you are testing the template.

Navigate to http://localhost/joomla/administrator to enter the admin panel

Go to content>articlemanager> and add your article. Now, view your article along the frontend, and once you are satisfied you can publish the content. Once the content is published, you should start testing the template you have created.

Go to template manager in the backend and click on extensions. Here you can access the template_sttl, and set it as your default template. Preview how the article looks on the template you have just created.

Beautifying the Template
When you tested the template, you noticed that it is perfectly capturing the content details, and displaying it to the perfection. Now, you need to develop the template aesthetically, and for that you need to program your template further.

When you tested the template, you noticed that it is perfectly capturing the content details, and displaying it to the perfection. Now, you need to develop the template aesthetically, and for that you need to program your template further.

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

Here’s the code to include

<jdoc:include type=”modules” name=”position_name” />

IF you want to add left position to your index.php file, here’s the code you will need to add

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
</head>

<body>

<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”left” />
</body>
</html>

To add footer

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
</head>

<body>

<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”left” />
<jdoc:include type=”modules” name=”footer” />
</body>
</html>

Now, you have a clear idea of how to add the positions.

You will need to go to module manager, and click on footer to get the code working. Now click save, and perform the actions for the other tasks too.

Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding joomla tips & tricks. If you are looking for hire joomla programmers then just get in touch with her.

About deeparanganathan