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.
Thanks oooooddddddddllllllleeeeeessssss ;D
You are angel this is not a extravaganza. you are one of fundless good person who want share his knowledge. ;)
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!
you’re the best! sana meron ka pang ibang tutorials. i’d luv to read them all! :)
Ones more! astig!!!!
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.
thanks! help alot
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!
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
Wow..thank 4 useful tutorial.. :D
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!
I just cant the see the picture that i used. Tignan mo ng website ko para malamam mo po.
http://uzosaminaruto.net23.net
its me again.. Chette paano mag arrange ng menu? ung pa vertical?
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~
just amasing for beginers :) great work!!
Great tutorial, wish I can have my joomla site soon.
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 :)
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
Wow. Even though this was written a while ago, it is still useful to me.
Thank you thank you thank you!
Greeting from Argentina :)
thank 4 useful tutorial
Thanks a lot for this tutorial!
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.
Error! Could not find a Joomla! XML setup file in the package.
Awesome tutorial. I stumbled across it and just wanted to say thanks! You should definitely write The Definitive Guide to Joomla!
;D
Thanx a lot.Very useful tut. and very easy to way learn something new.
Great post. thanx
Great tutorial. Thanx
Thanks very much, always have energy to help the helpless.
thanks for the explanation, it is of great help
I suggest to use Codelobster PHP Edition with special Joomla Themplate Editor.
Thank you very much. It seems like you master the art of oratory. ;)
Thank you very much. This is a very cool tutorial!
Best wishes!
Thank you for your explanation . your tuto permit me to create my template et using whith joomla.
God bless you