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

  6. Hey there!
    Thanks for the great tutorial. Extremely helpful and very well written

    Good job.
    Northern.

    Reply

  9. Thank you so much Chette – I’ve been trying to get to grips with templates and you just tell me what I need to know! You are so logical with how you explain the modules that I now think I can “Joomlify” my existing site by just tweaking my CSS and PHP code. Best of luck!

    Reply

  11. heey ikm wil met leuken jongens van tussen 18 en 25 jaar oud kom met me plaaten als je wilt groetjes desiree ik ben een leuke meid

    Reply

  12. I would like to thank the webmaster of this site for such a wonderful tutorial!!!

    What I wanted to learn for months, I learned literally in an hour!

    Thanks much again!

    Regards,

    Samir

    Reply

  19. Thank you so much for this tutorial! I was so confused about how to publish and position modules in the correct places in the index.php file. When you said that multiple modules could be placed in the same module position, how it worked just clicked into place! :-*

    Reply

  20. Great tutorial, many thanks for this work and for sharing your knowledge with us! Just one question: Is it possible to use ‘divs’ instead of ‘tables’ and the template to work?

    Reply

  22. I have been looking for a long time for a tut like this, have found mambo ones with Dreamweaver plugins. I am more of a designer then programer and its tough. This really helps. Just curious how you would go about making drop down menus with your tut? I have been through joomla forums alot and making a custom menu has bugged me. Thanks!!

    Reply

  23. Chette,

    This note is my thanks for you public spirited effort in making this tutorial availabl. I have been in IT for over 40 years & today an an Enterprise Architect. It is very hard these days to learn every aspect of the multitude of fantastic software available to us (Apache, Tomcat, RubyOnRails, Ajax technology, WikiMedia, Bloggs, Bulletin Boards, Joomla (let alone all the prior web tools).

    You really have allowed me to come up to speed in hours rather than days of tedious reverse engineering.

    The concise clear and to-the-point handling of this topic are an excellent testimony to the way you think and explain things.

    My heartfelt thanks – Doug M – Sydney Australia

    Reply

  25. thanks a mill! searched and read many tuts but nothing made sense. i was even able to make a tableless template for joomla! well it had to be written by a woman ;D
    now i will have to find something as good as that for the modules. yours does not match my current joomla.
    thanks again!

    Reply

  26. I created template for Joomla 1.5, by reading your and compassdesigns tutorials, but I can’t install it. Joomla write that can find xml installiation

    What it can be? Who could me answer?

    Reply

  32. The really really best joomla! template tutorial ever!!
    Many other tuts are either too complex or too vague. This one’s clear straightforward and can be easyly understood when you need a start.
    The only objection would be: why do you choose tables instead of css layout?
    Olivier.
    When i have my template set i’ll let you know.
    Many many thanx for this tutorial!!

    Reply

  36. hello i am balaji i did this in my local server

    but the out put is “Direct Access to this location is not allowed.”

    i don’t Why this happen can any one help me!

    Reply

  39. Nice tutorial “ganda talaga pag pinay” hehe thanks, for the tutorial you really made a newbie to be a little prof.

    Reply

  42. HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

    Reply

  43. Thanks for the course. Can you please send me the pdf version with the animated version to my email?? thanks before.

    Reply

  44. Hi, Thanks so much for this… i thought i would have to go to several sites to figure this out, this one visit to your site is enough for me. It was very easy to understand and follow.

    God Bless you for your generosity.
    ;D

    Reply

  45. Wow… that’s really awesome dude…
    it’s really easy to understand……just a visit it’s cure my sickness….great

    Reply

  48. Thanks very much for these tutorials. These are the only ones that actually helped me with creating a custom template. I have a working one, but if you want the URL, email me for it.

    Thanks again.

    Cade

    Reply

  49. Thanks man this is just what I was looking for!
    Best tutorial that I have come across.
    Would have been nice if you could explain the Blank CSS file and where what gets effected.

    Keep up the good work man.
    :)

    Reply

  50. Thank you very much for this tut. Like someone else said “write a book”. You are a very skilled communicator.

    After reading this tut, i now feel ready to start getting creative with Joomla.

    Japan

    Reply

Leave a Reply

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