Joomla Template Tutorial (Part 2)

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

By now, you should already know what Joomla elements are, particularly Main Body and Modules/Module Positions. Let’s move on:

3. Identify where you want to place your Joomla elements

Now take a look at your mockup and decide where you want to put your Main Body & Module Positions.

Here is mine:

As you probably notice, I didn’t use any of the optional elements. I usually just use Main Body & Module Positions, and worry about the minor ones later on.

And, my template is actually very simple. My motto is: If it can be placed on a module, don’t hardcode it in the template.

A common mistake is trying to put everything in the template. I know some people who put in their menus & banners, when these can easily be placed in modules. Try to avoid these mistakes. Remember that modules are easier to edit than templates.

A template should only be a skeletal framework of your website. As a rule of thumb, only put the graphics and text that you will not be updating for at least 6 to 12 months. For me, these are my logo, my background image, & the tables which provide the division between my content & elements.

4. Create the directory structure

In your computer, create the directory structure below:

  • Create a directory called template_name (or any name you want). Don’t put spaces.
  • Under template_name, create 2 folders: css and images.

This is where you will be saving your template files, which is explained in the next section.

5. Code the HTML version of your mockup.

It’s now time to write some HTML. You need to take your time on this. Don’t worry if it takes you hours, or even days.

Look at your mockup, and start creating its HTML version — yes, with all the title, head, body, table tags. For purposes of this tutorial, save it as template.html.

Include also your logo & other graphics you have decided should be part of your template.

For those who are “HTML-challenged,” if you are using Fireworks or ImageReady, you can use the export to HTML function. Most will probably design their first template using WYSIWYG editors such as Dreamweaver & Frontpage. There are, however, some people who are proficient enough with HTML that they can use a text editor. Again, use the tools you’re most comfortable with.

Where to save your files. By the way, your files should be placed in the proper folder / subdirectory. Remember the directory structure you created in the previous step? Here is a brief explanation of what should be saved where:

Folder Save what files
template_name template.html (which will be renamed later on to index.php)
template_name/images All images
template_name/css CSS file (template_css.css)

 

You can start coding your Cascading Style Sheets, too. If you’re not sure how to go about this, just create a blank text file with the filename template_css.css. Or, you can also use my Blank CSS Template for Joomla which includes all the styles that is used by Joomla.

Remember to save your template_css.css file in the proper folder: /template_name/css

6. Rename your HTML mockup to index.php

Backup your template.html file, and save it in a different folder. Now go back to your template.html file (the one that is located under template_name), and rename this to index.php.

7. Enter the code for the Joomla elements

It is now time to put the Joomla Element Codes in your template. You see, there is a special code assigned to each Joomla Element. You simply have to enter these codes where you want your Joomla Element should appear.

Open index.php (formerly template.html) in your text editor. You can also use Dreamweaver, but make sure that you are in Code View. Now locate where your Joomla elements are located, and paste its corresponding code.

Joomla Element Code
Main Body <?php mosMainBody(); ?>
Module <?php mosLoadModules ( ‘module_name’ ); ?>

Note: Change module_name to what you want to call your module. For example, if your module name is right, your code should be <?php mosLoadModules ( ‘right’ ); ?>

Date <?php echo mosCurrentDate(); ?>
Footer <?php include_once( $GLOBALS[‘mosConfig_absolute_path’] . ‘/includes/footer.php’ ); ?>
Pathway <?php mosPathWay(); ?>
Site Name <?php echo $mosConfig_sitename; ?>

For example, if you want to put the Main Body in the center table, then you have to put the code <?php mosMainBody(); ?> inside that table.

This ends Part 2 of the Joomla Template Tutorial. Click here for Part 3

40 thoughts on “Joomla Template Tutorial (Part 2)”

  1. Chette – you are [b]very[/b] talented and generous! This is needed and very much appreciated! Thanks for sharing! :)

  2. Ever thought of publishing a book? You should seriously think about it.

    Thanks for this tutorial. Very well written, excellent approach, superb content flow.

    Subscribed to your feeds. Don’t want to miss Part 3.

  3. You guys are sweet :) One more part to go. Hopefully I can squeeze it within 800 words. There’s just so many things I wanna say!

  4. Well done and easy to understand! This will definitely help my learning joomla. Thank you for your time and generosity!

  5. I have been scrounging for helpful tutorials for Joomla for months now. Thank you so much for this. It is so straight forward and easy to follow. You’ve got another regular reader.

  6. hi chette,

    I am new to Content Management and your guide was very helpfull for me to understand the directory structure and how to install the templates, I am new to PHP, can u suggest me any tutorial for me to create a template.

  7. hi Chette Soriano

    in the index.php i have this line:

    so I see only the date –
    i wish to see time too…

    how can i do this

    (and why i can not put for example things in the right module – I will not be able to see it)

    kind regards from switzerland
    gabriel

  8. [b]@T.C.:[/b] Part 3 has been up for ages :) Here’s the link: [url=http://www.chette.com/main/content/view/122/1/]Part 3 of the Joomla Template Tutorial[/url]

  9. I have been looking for tutorial on creating a template for a long time. BTW you are a great writer. You make this technically topic sounds fun and easy to learn. Great job!

  10. Thanks for the tutorial. It really helped me a lot… I’m maintaining a website for our Local Government and i like to change the look of the site… You’re so generous… Hope to hear from you soon… Thanks again…

  11. p.S.
    I created design (mocup, as you call) and it is quite complicated; therefore I have problems how to define all Joomla codes

    Some times ago I had tutorial for Dreamweawer with its php extensions and it was easy to create template

  12. dear,..chette!

    i hope you don’t mind to send me via e-mail about tutorial joomla from begining till the end.

    thanks,

    yours fun.

  13. [b]Hi Ms. Chette this is really helpful sa lahat ng tutorials na binasa ko no offense sa iba.. Dito ko lang talaga naintindihan Thank YOU [/b]

  14. wow dood. This page cleared up all my problems with wrapping my head around templates. I have bene through so many sites and this summed it up.

  15. Maybe you will have thought-about including additional video clips about this subject to your blog posts to carry the guests additional entertained? I imply I just learn by means of the entire article of yours and it had been completely good quality but since I’m more of a visible learner,I found that to be extra helpful well let me know how it seems! I get pleasure from what you guys are always up too. Such knowledgeable job and reporting! Sustain the great works guys I’ve added you guys to my blogroll. It is a good article thanks for sharing this informative information.. I will go to your weblog repeatedly for some newest post.

Leave a Reply

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