How to Create Your First Joomla Template

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.

1. Preparation

Before we get started on our template, there are a few things you need to prepare.
Just like most CMSs, Joomla requires a server with PHP and MySQL installed. Installing the above manually can be quite annoying and, to be honest, a waste of time (unless you want to get into how it’s done exactly).
What we will be doing is downloading a single installer for all the above that will stick a local server on your system and give you a really nifty control panel too.

So head on over to WAMP and download the latest version.( MAMP for Mac)

Once the installer is downloaded, execute it and install WAMP in a place easy to remember. If all goes to plan you should be looking at a folder named : wamp

You should now also have an icon in your notification bar (where the clock is) that gives you access to WAMP’s control panel. You can use this for a number of things, including restarting the server.

2. Downloading and installing Joomla

Now that we have a server installed, we can get Joomla and set it up. Go to Joomla and download the latest release.

Before we continue, let’s take a look at our wamp folder again. Inside you will find a bunch of folders, but the one we are interested in is the www folder.
This is the root of your server setup and this is where we will be installing Joomla. (note: you can install as many copies of Joomla in here as you want, or anything else for that matter)

So, unpack your Joomla download into the www folder. I usually rename it at this point to the name of my site or just shorten it to joomla.

Joomla is now on our server. However there is one last thing we need to do before installing, and that’s to create a database. Open up your browser and go to http://localhost .
Here you will find the your server admin area, this is where we create our database.

To create the database, click on phpmyadmin under the Your Aliases section.

For this tutorial’s sake we will be calling our database joomla. You will not be creating a user with password here, instead using the root user details. It is strongly recommended that you create a user with a strong password in live situations.

Now that we have a database, we can start installing Joomla. Fire up your browser and go to http://localhost/joomla (or whatever you called your site when unpacking it.)

The first screen pretty much speaks for itself. Choose a language and press next.

The next screen you see is the Pre-Install checklist. This is a list of the required items and settings Joomla needs to successfully install. Make sure you have the necessary configuration and click next.

On the next page, read the license carefully, and, when ready click next and enter the required details(Host Name: localhost , Username: root , no password and joomla as Database name), and press next.

Skip the FTP Configuration screen by clicking next and on the next page, enter your site name, an email address and choose a password. This will be the password you will use to log into the admin area of joomla along with the username: admin.
We will not install any sample data right now, as we want to add the modules one by one to see how our template is coming along later on in the tut. Click next.

Congrats! Joomla is up and running, but before we can go in and mess around we have to delete the installation folder. So go to your www folder inside wamp, and then into the joomla folder and delete the installation folder

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

4. 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>your@email.com</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>

The above is an example of a templateDetails.xml file. As you can see, this is a specific list that tells Joomla about the template, like the name, the author, date created etc…
Notice the positions section in the code above. These are the positions we spoke of earlier, the includes.
Some are self explanatory, like footer.
If you put the joomla footer include in the footer area of your design, you will be able to control some aspects of the footer using the Joomla back end. Lets try and throw together a simple template.

5. Beginning the template

Lets do some preparation so we have something to work with. Go to your templates folder , and create a new folder. Lets call it template_tut.

Inside your new folder, create a file called index.php, and another called templateDetails.xml (copy/paste the code in the example above inside it).

Open up your index.php file in notepad or anything else you use to edit code, and copy/paste the following in:

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

We have a DOCTYPE, a PHP code for the language, and in the head section our first Joomla include. This is not in the xml list because it is not a position.

		<jdoc:include type="head" />
	

What this does is include the joomla header code (which includes the page title), and a bunch of other stuff that can probably fill half a tutorial on its own.

Finish up the markup on the page by adding the body tags and closing the html tag.

6. Using the template

Now that we have the basic files in place, let’s add another include, this time to display the main content of any given page being viewed.

		<jdoc:include type="component" />

You should now have this in your index.php

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

Before we test our template, let’s add an article so we have some content. Make sure WAMP is running and go to your admin area in Joomla with http://localhost/joomla/administrator

Now enter your login details

Go to Content on the menu and then to Article Manager in the drop down

Click on New to add an article

Give your article a title, fill in an alias, make sure its published to front page and hit save

Let’s see what our article looks like on the front page. Click on preview in the upper right corner after saving. You should see the front page of your site with your text.

Now that we have published content, let’s see if the template we made actually works. Go back to your admin area and click on Extensions and then Template Manager

You should see template_tut in the list, so go ahead and choose it, and set it as default.

Hit preview and check out your glorious new template. Well maybe not so glorious but your first joomla template. YAY!

7. Adding some meat to our template

We got our template working, it’s retrieving the header info including the title and displaying content we created in the joomla back end .Before we add more includes, let’s take a closer look at the module position includes; the ones we named in our xml file.

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

They are included in the following way:

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

So in order to add , for example, the left position, our index.php will look like this:

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

While we are at it, let’s add the footer position

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

If you go back to your admin area, and go to the Module Manager you will notice a module already there, the Main Menu module. This module gets installed even if we choose to install the simple version of Joomla.

The menu is already hooked on to the left position (which we just included in our template), so let’s see what it looks like. Hit preview

As you can see, we now have a menu with a link to Home. You can add more menu items and link to different content through the Menu Manager.

Lets get a footer working. Go to the Module Manager, click new and select Footer. Then press next.

On the following page, give the new module the title: Footer, and in the Position dropdown, select Footer.

Click save and then preview the page.
You should now also see footer information on your template.

8. Adding more positions and modules

Lets style our page a bit so we can see what we are doing. In your template_tut folder create a new folder and call it “CSS” , and create a file inside it called ‘template.css”

Stick the includes in index.php in some divs and wrap it all in a container div and then link your style sheet like the example. Feel free to copy my messy layout if you are not already using one of your own. I did mine real quick for this tutorial.

<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/template_tut/css/template.css" type="text/css" />
</head>

<body>
<div id="container">
	<div id="header"> Header and stuff</div>
	<div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
	<div id="content" class="float">
    	<jdoc:include type="component" />
    </div>
    <div id="sidebar_right"class="float">Right sidebar</div>
	<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>

and the CSS

* {
	padding: 0;
	margin:0;
	}
ul {
	list-style:none;
	}
.float {
	float: left;
	}
.clear {
	clear: both;
	}
#container {
	width:960px;
	margin: auto;
	}
#header {
	background-color:#999999;
	height: 150px;
	}
#content {
	width: 660px;
	text-align: center;
	
	}
#sidebar_left {
	text-align: center;
	background-color:#CCCCCC;
	width: 150px;
	}
#sidebar_right {
	background-color:#CCCCCC;
	width: 90px;
	}
#footer {
	background-color:#999999;
	text-align:center;
	}

Lets hook our right sidebar and header up with positions. Add the top position to the header and right position to the right side bar.

<div id="header"><jdoc:include type="modules" name="top" /> </div>

and

<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div>

Now let’s create the modules for those two positions. Go to the admin area of Joomla, login if necessary, and go to the Module Manager under the Extensions drop down menu. You should see Main Menu and the Footer we created earlier. Follow the same steps to create two more modules. A Search module that you will place in the top position, and a Login module that you will place in the right position.

Preview your page, you should now have a search bar in your header and a login form in your right sidebar. These are pretty much the basics of a Joomla template. You create positions in your design, like little hooks for Joomla to send info to, which in most cases you create in the back end. You can apply this to almost any design using the many positions that Joomla offers. I hope this has been useful to you guys, keep in mind that these are the very basics, Joomla templates can be made as complex and powerful as you want.

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.