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

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?

<?xmlversion="1.0"encoding="utf-8"?>
<!DOCTYPEinstallPUBLIC"-//Joomla!1.5//DTDtemplate1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd"
installversion="1.5"type="template"
nametemplate_tut</name
creationDate31-01-2009</creationDate
authorNettutFan</author
</authorEmail
authorUrlhttp://www.siteurl.com</authorUrl
copyrightYou2009</copyright
licenseGNU/GPL</license
version1.0.0</version
descriptionTemplateTut</description
files
filenameindex.php</filename
filenametemplateDetails.xml</filename
filenamecss/template.css</filename
</files
positions
positionbreadcrumb</position
positionleft</position
positionright</position
positiontop</position
positionuser1</position
positionuser2</position
positionuser3</position
positionuser4</position
positionfooter</position
</positions
</install

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

<name>template _tut</name>

<author>Nettut Fan</author>

<authorUrl>http://www.siteurl.com</authorUrl>

<description>Template Tut</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>css/template.css</filename>

</files>

<position>breadcrumb</position>

<position>right</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.

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?

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"
<head>
<jdoc:includetype="head"/>
</head>

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

view plaincopy to clipboardprint?

jdoc:includetype="head"/>

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

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?

jdoc:includetype="component"/>

<jdoc:include type="component" />

You should now have this in your index.php

view plaincopy to clipboardprint?

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"
<head>
<jdoc:includetype="head"/>
</head>
<body>
<jdoc:includetype="component"/>
</body>
</html>

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

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?

positions
positionbreadcrumb</position
positionleft</position
positionright</position
positiontop</position
positionuser1</position
positionuser2</position
positionuser3</position
positionuser4</position
positionfooter</position
</positions

<position>breadcrumb</position>

<position>right</position>

<position>footer</position>

</positions>

They are included in the following way:

view plaincopy to clipboardprint?

jdoc:includetype="modules"name="position_name"/>

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"
<head>
<jdoc:includetype="head"/>
</head>
<body>
<jdoc:includetype="component"/>
<jdoc:includetype="modules"name="left"/>
</body>
</html>

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

view plaincopy to clipboardprint?

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"
<head>
<jdoc:includetype="head"/>
</head>
<body>
<jdoc:includetype="component"/>
<jdoc:includetype="modules"name="left"/>
<jdoc:includetype="modules"name="footer"/>
</body>
</html>

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

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?

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="<?phpecho$this->language;?>"lang="<?phpecho$this->language;?>"
<head>
<jdoc:includetype="head"/>
<linkrel="stylesheet"href="<?phpecho$this->baseurl?>/templates/template_tut/css/template.css"type="text/css"/>
</head>
<body>
<divid="container"
<divid="header"Headerandstuff</div>
<divid="sidebar_left"class="float"<jdoc:includetype="modules"name="left"/</div>
<divid="content"class="float"
<jdoc:includetype="component"/>
</div>
<divid="sidebar_right"class="float">Rightsidebar</div>
<divid="footer"class="clear"<jdoc:includetype="modules"name="footer"/</div>
</div>
</body>
</html>

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

<div id="header"> Header and stuff</div>

<jdoc:include type="component" />

</div>

<div id="sidebar_right"class="float">Right sidebar</div>

</div>

</body>

</html>

and the CSS

view plaincopy to clipboardprint?

*{
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;
}

* {

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.

view plaincopy to clipboardprint?

<divid="header"<jdoc:includetype="modules"name="top"/</div>
and
<divid="sidebar_right"class="float"<jdoc:includetype="modules"name="right"/</div>

and

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.

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!