Creating a Simple Joomla Template

To understand the contents of a template, let's start by looking at a blank Joomla template. Template File Components This section reviews the manual process of setting up template files. Normally, you would install the template using the Joomla installer, which takes care of all these steps. When constructing your own templates, you need to set up several files and folders in a coordinated manner. A template needs to contain various files and folders. These files must be placed in the /templates/ directory of a Joomla installation, each in a folder designated for that template. If you had two templates installed called Element and Voodoo, your directory would look something like this:

• /templates/element
• /templates/voodoo

Note that the directory name for a template must be the same as the name of the template—in this case, element and voodoo. These names are case-sensitive and shouldn't contain spaces. Within the directory of a template, there are two key files

• /element/templateDetails.xml
• /element/index.php

These filenames and locations must match exactly because this is how they are called by the Joomla core script. The first of these is the template XML file: templateDetails.xml. This is an XML-format metadata file that tells Joomla what other files are needed when it loads a web page that uses this template. (Note the uppercase D.) It also details the author, copyright, and what files make up the template (including any images used). The last use of this file is for unpacking and installing a template when using the extension installer in the administrative backend. The second key file is the primary template file that generates pages, index.php. This file is the most important in a Joomla template. It lays out the site and tells the Joomla CMS where to put the different components and modules. It is a combination of PHP and HTML/XHTML. Almost all templates use additional files. It is conventional (although not required by the Joomla core) to name and locate them as shown here:

• /element/template_thumbnail.png
• /element/css/template.css
• /element/images/logo.png

These are just examples. Table 9.1 lists the files commonly found in a template.Table 9.1 Core Files Needed for a CSS-Based Template