How to Create Your First Joomla Template
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
1
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>[email protected]</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.
21.
<positions>
22.
<position>breadcrumb</position>
23.
<position>left</position>
24.
<position>right</position>
25.
<position>top</position>
26.
<position>user1</position>
27.
<position>user2</position>
28.
<position>user3</position>
29.
<position>user4</position>
30.
<position>footer</position>
31.
</positions>
32. </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.
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.
2
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?
1. <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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" />
3
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.
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/xhtml1transitional.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
Now enter your login details
4
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
5
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.
6
Hit preview and check out your glorious new template. Well maybe not so glorious but your first joomla
template. YAY!
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.
view plaincopy to clipboardprint?
7
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/xhtml1transitional.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/xhtml1transitional.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" />
8
10. <jdoc:include type="modules" name="left" />
11. <jdoc:include type="modules" name="footer" />
12. </body>
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
9
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.
10
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/xhtml1transitional.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">
11
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. * {
2.
padding: 0;
3.
margin:0;
4.
}
5. ul {
6.
list-style:none;
7.
}
8. .float {
9.
float: left;
10. }
11. .clear {
12. clear: both;
13. }
14. #container {
15. width:960px;
16. margin: auto;
17. }
18. #header {
19. background-color:#999999;
20. height: 150px;
21. }
22. #content {
23. width: 660px;
24. text-align: center;
25.
26. }
27. #sidebar_left {
28. text-align: center;
29. background-color:#CCCCCC;
30. width: 150px;
31. }
32. #sidebar_right {
33. background-color:#CCCCCC;
34. width: 90px;
35. }
36. #footer {
37. background-color:#999999;
38. text-align:center;
39. }
12
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.
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.
13
Create beautiful Joomla websites with a flexible layout from iJoomla.com
I wasn't always the Joomla module and template guru that I consider myself to be now. There was a time
when I was completely lost, looking everywhere for information on how to create a unique Joomla template,
even going so far as to download the Dreamweaver extension that has the quick tags to make a .php file a
template.
In retrospect, it would have been much easier if I had an instruction manual outlining the simple steps
required when making Joomla Templates. The ebook in the link I just posted seems to be fairly
comprehensive, and from the reviews it appears that it will fully equip you to make a new codedtemplate,
even if you know little or nothing about coding.
I think it's pretty cool that they already include a number of free – but decent looking – templates when you
register and pay for the ebook.
The sales copy indicates that the instructions and illustrations will enable you to be able to create new
templates in only five steps. That's pretty awesome! And when you think about it, this book could pay for
itself with the firsttemplate you make, if you auction it off for sponsorship and release it free!
14