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.
- Login to your Joomla Administrator.
- From the menu, navigate to Site > Template Manager > Templates.
- Click New.
- You will now be asked to install your template. Look under Upload Package File.
- Click Browse, & locate your zipped template in your computer.
- Click Upload File & Install.
- If all goes well, a success message will be displayed. Click Continue.
- You will be brought back to the Template Manager.
- 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:
- Login to your Administrator, and from the menu, navigate to Site > Template Manager > Module Positions.
- Select an empty textbox under Position, & type my_module.
- 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.
Leave a Reply