A Quick Introduction to Joomla Template Design

Joomla is one of the most versatile and popular free and open source content management systems (CMS). Part of its flexibility comes from the ease with which users can add extensions and templates to completely customize their web presence.

The idea of designing a custom template for a CMS may seem formidable, but it is actually quite simple, assuming you already know how to design a normal website. Joomla’s code is written in PHP, but designing a template for it only requires knowledge of HTML and CSS.

Template Structure

The first thing you need to understand is how Joomla’s template files are arranged and what each function is. For the purposes of this guide, we will rely on the “beez” template that comes with Joomla, mainly because it will allow you to create XHTML-compliant templates. Your new template directory should be in the same directory as the other templates:

/templates/My_Template

Inside your template directory, you will have at least four sub-directories:

/templates/My_Template/admin

/templates/My_Template/css

/templates/My_Template/html

/templates/My_Template/images

It will also contain at least 6 files:

component.php

favicon.ico

index.html

index.php

params.ini

template_thumbnail.png

templateDetails.xml

templates.php

If you are still reading, you are probably already feeling overwhelmed, but there is no reason to worry. For basic template design, you will only touch three files:

index.php

templateDetails.xml

css/template.css

Getting Started

The basic structure of the Joomla index.php is like any normal HTML site and will be applied to all dynamically-created pages.

The easiest way to get started with the index.php file is to copy the header from one of the default templates. For the most part, you will not need to customize the header because even the links will have dynamic references. For example, the stylesheet link will be:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

To begin, create the body of the document as you normally would for any HTML file. Unlike a static HTML document, however, you will not add any text, only Joomla placeholders called “jdoc” statements. Each jdoc statement will enclose a particular component or module. For example, to add the left modules to your left-floated div, you would enter it as follows:

<div id=”leftmodules”>

<jdoc:include type=”modules” name=”left” />

</div>

For any module, anywhere in your document, just insert the name in place of “left”.

You can then use the template.css file to position the content according to your design plan. For more complete information about jdoc statements, visit the Joomla documentation site.

Module and Component Formatting

In addition to your own element styles, each component and module will have its own styles. There are general styles that apply to all modules and components and also classes that you can create for specific ones, allowing you to have potentially limitless variety.

Any class suffix you add to a Joomla component will automatically be available for use in your CSS file, giving you maximum flexibility. For a full explanation of class suffixes, see the Joomla documentation on the subject.

Putting the Pieces Together

A successful Joomla template must have all of the jdoc statements, your index.php file, the necessary HTML code enclosing the jdoc statements, and all of the CSS styles in the templates.css file corresponding to the classes and IDs in index.php. After you have all of these in place, you can design your Joomla template as you would design any other site. The one exception will be that, in order to test it, you will need to have it installed within Joomla.

Before testing, you should edit the default templateDetails.xml file to insert the correct information for your template (i.e. the name, the creation date, the creator, the license, and so on).

To test a Joomla template, you can simply upload the folder you created into your Joomla installation inside the templates directory on your server. In your browser, go to your Joomla administrator backend, and you should see your template listed in the template choices.

When you are ready to distribute your template, simply compress the folder you created into a zip file. Users should be able to use the Joomla admin backend to upload the zip file directly and install automatically.

This article only touches the surface and gives you a brief overview of Joomla templates. For more information, consult the Joomla documentation . Because Joomla is free and open source, many web hosting providers like Manchester dedicated server web host 34SP.com will install Joomla for free, making it easy to get started.

This is a Guest post by Tavis J. Hampton. He is a librarian and writer with a decade of experience in information technology, web hosting, and Linux system administration. His freelance services include writing, editing, tech training, and information architecture.