Joomla Template Tutorial (Part 3)

This is Part 3 of the Joomla Template Tutorial series. Part 1 is here, and Part 2 is here.

By now, you should have entered all the necessary code for your Main Body & Module Positions.

8. Enter the code for the “header” tags

We’re still not done yet with index.php. Make sure that this file is still open in your text editor.

Now, delete the code from the beginning of the file until the <head> tags.

Replace it with the code below:


<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $GLOBALS[mosConfig_live_site]; ?>/templates/<?php echo $GLOBALS[cur_template]; ?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

9. Change paths of all images

Now we need to change the paths of your images. If you notice, your image tags have the following format: <img src="images/filename.gif" />

This will create problems when your template is installed, because when you upload your template, the paths to your images will change, depending on where Joomla installed your template.

Thankfully, there is an easy way go around this. You need to use the Find & Replace function of your text editor.

Find all instances of this code snippet:

<img src="images/

And replace it with this:


<img src="<?php echo $GLOBALS[mosConfig_live_site];?>/templates/<?php echo $GLOBALS[cur_template];?>/images/

Your code should now look something like this:

Save your modifiedindex.php file.

10. Create the XML file.

You will need to create an XML filewhich will contain information about your template. This is also required by Joomla, because Joomla looks for this XML file when you install a template from the Administrator.

Open your favorite text editor, and create a new document. Paste the following code:


<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0.0">
<name>template_name</name>
<creationDate>date</creationDate>
<author>author_name</author>
<copyright>copyright_info</copyright>
<authorEmail>author_email</authorEmail>
<authorUrl>author_url</authorUrl>
<version>template_version</version>
<description> template_description</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/image_filename</filename>
<filename>images/image_filename</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>

We’re not done yet. You need to replace the highlighted words with the following:

What Replace with
template_name Name of your template
date Date that you created your template
author_name Your name
copyright_info Copyright information of your template. Example: GNU/GPL, etc.
author_email Your email address where people can contact you.
author_url Your website’s URL.
template_version Version of your template. If this is the first time you modified your template, you can just put 1.0
template_description Brief description about your template.
image_filename Filenames of all the images you used in your template. Double check with your /template_name/images folder to make sure that you got all the filenames correctly.

If you have more than 2 images, simply add another line of <filename>images/image_filename</filename>

Your XML file should now look something like this:

Save the file as templateDetails.xml and place it in the root of your template directory.

11. Create template thumbnail

Template thumbnails allows you to preview your template from the Joomla Administrator. If you plan to distribute your template to other users, it is highly recommended that you create one.

To create a thumbnail, take a screenshot of the mockup you made previously.

Resize this screenshot to approximately 200px by 200px. Then save this as template_thumbnail.png in your template directory.

Alternatively, you can use a blank thumbnail in the meantime. I usually just use a blank thumbnail while I’m developing a template, & just make the screenshot afterwards. You can click here to download the blank template thumbnail that I use.

Note: If you don’t want to use the .PNG extension (for example, you want to save it as template_thmubnail.GIF), make sure that you also change the filename in your templateDetails.xml.

12. Review your directory structure

It’s time to review the directory structure. Please make sure that all the files are in their proper folders. You might want to double check your XML file, too.

13. Zip it

We’re almost done. Now zip your entire template directory. You can use your favorite compression utility such as WinRAR, WinZIP, IZArc.

You can also use Windows’ built-in compression: Right click on your template folder, select Send To > Compressed (zipped) Folder.

You should now have a file called template_name.zip (or in my case, chette_v5.zip)

14. Install

Finally, it’s time to put your template on a test drive.

  1. Login to your Joomla Administrator.
  2. From the menu, navigate to Site > Template Manager > Templates.
  3. Click New.
  4. You will now be asked to install your template. Look under Upload Package File.
  5. Click Browse, & locate your zipped template in your computer.
  6. Click Upload File & Install.
  7. If all goes well, a success message will be displayed. Click Continue.
  8. You will be brought back to the Template Manager.
  9. Select your new template from the list (click on the radio button), & select Assign.

Now preview your template by going to your website’s public URL. You can also preview it by going to Site > Preview > In New Window

15. Finishing touches

Now that you have finally installed your template, you probably would need to make some minor changes to your index.php or template_css.css files. Joomla provides a convenient way to do this. Simply go to the Template Manager, select your template, and click either Edit HTML or Edit CSS.

Some of you may have created unique names for your module positions that are not set by default in Joomla. For example, if you have a module position called my_module:


<?php mosLoadModules ( 'my_module' ); ?>

If this is the case, you need to define my_module in Joomla:

  1. Login to your Administrator, and from the menu, navigate to Site > Template Manager > Module Positions.
  2. Select an empty textbox under Position, & type my_module.
  3. Click Save.

And finally, you can now play with your modules, most especially your menu items. This is the most enjoyable part of template development – there’s nothing like seeing your template take shape in real time.

You might also want to check out this article: Module Basics: Putting custom HTML content on the sideblocks. It’s a pretty old article, & was written for Mambo, but most of the concepts still apply with Joomla 1.0.12.

16. The end

It’s been a long ride writing this Joomla Template Tutorial, but I sincerely hope you enjoyed this.

Please feel free to give the link to this article to those who you think will benefit from it. Should you have any corrections or suggestions, just contact me or post in the comments below.

If you were able to develop your template thru this tutorial, just send the URL over. I’d love to take a peep.

I also would like to recommend that you join us in the Joomla Forums. There’s a sub-forum over there dedicated solely on template development. You’ll love the community, & I personally have gotten a lot of invaluable advice from it.

Thank you for taking the time reading this series.

82 thoughts on “Joomla Template Tutorial (Part 3)”

  1. Thanks oooooddddddddllllllleeeeeessssss ;D
    You are angel this is not a extravaganza. you are one of fundless good person who want share his knowledge. ;)

  2. Nice tutorial. It would even be nicer if it’s updated to Joomla 1.5.x, utilizing jdocs, with an explanation of jdoc parameters to facilitate display of modules. Just the same, the tutorials have been very helpful indeed.

    Keep up the good work!

  3. Wow! What a great job! Have you thought of doing a video of this tutorial for youtube? I’m sure you would get a huge amount of hits. Thank you and I wish a brand new car for you because you deserve it after give us a gift like this tutorial. Thanks you.

  4. WoW! this is excellent tutorial! very clean and straight to the point! so easy to learn… Every detail are mentioned here… 5 stars for you!

  5. Thank you very much for this tutorial,simple and written well.It allowed me to see more clearly about joomla template

    God Bless you and guides you on his way

  6. Hi chette, thanks for the tutorial, I followed your tutorial but I encountered an error:

    [b]Upload template – Upload Error
    Failed to move uploaded file to /media directory.[/b]

    please help.. thanks!

  7. Thank you so much for this amazing tutorial.

    I have been tearing my hair out trying to learn this, thinking that Joomla! was much more difficult than I anticipated, but I was just in need of a good teacher!

    I can’t believe how easy you made everything seem.

    [b]Thank you![/b]

    Ol~

  8. Hats off to you..
    from nearly 6 month i was searching the tutorial of joomla template(where to start)But i cant understand its basic logic.This is a brilliant tutorial :)

  9. Oh man! How flawlessly and easily you’ve explained each and everything. Where were you a year ago when I was paying to buy templates… :P

  10. Wow. Even though this was written a while ago, it is still useful to me.

    Thank you thank you thank you!

    Greeting from Argentina :)

  11. You will need to create an XML filewhich will contain information about your template. This is also required by Joomla, because Joomla looks for this XML file when you install a template from the Administrator.

  12. Awesome tutorial. I stumbled across it and just wanted to say thanks! You should definitely write The Definitive Guide to Joomla!

    ;D

Leave a Reply to kimani Cancel reply

Your email address will not be published. Required fields are marked *