Page 1 of 19

Advertise Here

How to Create Your First Joomla

Template
Tarek Farage on Feb 17th 2009 with 333 comments

Tutorial Details
• Difficulty: Beginner
• Completion Time: 1-2 hours

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)

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 2 of 19
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)

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 3 of 19

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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 4 of 19

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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 5 of 19

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

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 6 of 19

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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 7 of 19

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

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>

2. <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
3. "http://dev.joomla.org/xml/1.5/template-install.dtd">
4. <install version="1.5" type="template">
5. <name>template _tut</name>
6. <creationDate>31-01-2009</creationDate>
7. <author>Nettut Fan</author>
8. <authorEmail>your@email.com</authorEmail>
9. <authorUrl>http://www.siteurl.com</authorUrl>
10. <copyright>You 2009</copyright>
11. <license>GNU/GPL</license>
12. <version>1.0.0</version>
13. <description>Template Tut</description>
14. <files>
15. <filename>index.php</filename>
16. <filename>templateDetails.xml</filename>
17. <filename>css/template.css</filename>
18. </files>
19.
20. <positions>
21. <position>breadcrumb</position>
22. <position>left</position>
23. <position>right</position>
24. <position>top</position>
25. <position>user1</position>
26. <position>user2</position>
27. <position>user3</position>

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 8 of 19
28. <position>user4</position>
29. <position>footer</position>
30. </positions>
31. </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:

view plaincopy to clipboardprint?

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 9 of 19
1. <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?
php echo $this->language; ?>" >
3. <head>
4. <jdoc:include type="head" />
5. </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.

view plaincopy to clipboardprint?

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

view plaincopy to clipboardprint?

1. <jdoc:include type="component" />

You should now have this in your index.php

view plaincopy to clipboardprint?

1. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?
php echo $this->language; ?>" >
3. <head>
4. <jdoc:include type="head" />
5. </head>
6.
7. <body>
8.
9. <jdoc:include type="component" />
10.
11. </body>
12. </html>
13.

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

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 10 of 19
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

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 11 of 19

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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 12 of 19

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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 13 of 19
view plaincopy to clipboardprint?

1. <positions>
2. <position>breadcrumb</position>
3. <position>left</position>
4. <position>right</position>
5. <position>top</position>
6. <position>user1</position>
7. <position>user2</position>
8. <position>user3</position>
9. <position>user4</position>
10. <position>footer</position>
11. </positions>

They are included in the following way:

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

1. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?
php echo $this->language; ?>" >
3. <head>
4. <jdoc:include type="head" />
5. </head>
6.
7. <body>
8.
9. <jdoc:include type="component" />
10. <jdoc:include type="modules" name="left" />
11. </body>
12. </html>

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

view plaincopy to clipboardprint?

1. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?
php echo $this->language; ?>" >
3. <head>
4. <jdoc:include type="head" />
5. </head>
6.
7. <body>
8.
9. <jdoc:include type="component" />
10. <jdoc:include type="modules" name="left" />
11. <jdoc:include type="modules" name="footer" />
12. </body>

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 14 of 19
13. </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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 15 of 19
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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 16 of 19

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.

view plaincopy to clipboardprint?

1. <!DOCTYPE html PUBLIC "-

//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?
php echo $this->language; ?>" >
3. <head>
4. <jdoc:include type="head" />
5. <link rel="stylesheet" href="<?php echo $this->baseurl ?
>/templates/template_tut/css/template.css" type="text/css" />
6. </head>
7.
8. <body>
9. <div id="container">
10. <div id="header"> Header and stuff</div>
11. <div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
12. <div id="content" class="float">
13. <jdoc:include type="component" />
14. </div>
15. <div id="sidebar_right"class="float">Right sidebar</div>
16. <div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
17. </div>
18. </body>
19. </html>

and the CSS

view plaincopy to clipboardprint?

1.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 17 of 19
2. *{
3. padding: 0;
4. margin:0;
5. }
6. ul {
7. list-style:none;
8. }
9. .float {
10. float: left;
11. }
12. .clear {
13. clear: both;
14. }
15. #container {
16. width:960px;
17. margin: auto;
18. }
19. #header {
20. background-color:#999999;
21. height: 150px;
22. }
23. #content {
24. width: 660px;
25. text-align: center;
26.
27. }
28. #sidebar_left {
29. text-align: center;
30. background-color:#CCCCCC;
31. width: 150px;
32. }
33. #sidebar_right {
34. background-color:#CCCCCC;
35. width: 90px;
36. }
37. #footer {
38. background-color:#999999;
39. text-align:center;
40. }

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.

view plaincopy to clipboardprint?

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

2.
3. and
4.
5. <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.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 18 of 19

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

Like 129 likes. Sign Up to see what your friends like.

Find more web development tutorials on Tutsmarketplace

•
http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011
 Page 19 of 19

Tags: joomla

By Tarek Farage
This author has yet to write their bio.

http://net.tutsplus.com/tutorials/other/creating-your-first-joomla-template/ 10/04/2011