Developing your first Joomla Template

Joomla-Web-Development
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”&gt;
<install version=”1.5″ type=”template”>
<name>template _sttl</name>
<creationDate>31-01-2009</creationDate>
<author>Netsttl Fan</author>
<authorEmail>your@email.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl&gt;
<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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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.

Before adding positions, you need to take a look at the positions that exist in index.php

<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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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.

3 thoughts on “Developing your first Joomla Template

  1. Its like you read my mind!You appear to know a lot about this, like you wrote the book in it
    or something. I think that you can do with a few pics to drive
    the message home a bit, but other than that, this is wonderful blog.
    A great read. I’ll certainly be back.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s