How to Create Joomla Template

To make a basic template, create a new folder in the templates folder. Name this folder after your template i.e. mynewtemplate.

This folder contains two files:

index.php
templateDetails.xml

Additionally, to keep things organised, make two new folders - images and css. Inside the css folder, create a file called template.css.

The templateDetails.xml file holds metadata information about the template.

The index.php File

The index.php file becomes the core of every page that Joomla delivers. The template works by adding Joomla code into module positions and the component section in your template.

Step 1

A Joomla template begins with the following lines:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">

The first line protects the code. The second line is the Document Type Declaration (DOCTYPE), which tells the browser and web crawlers which version of HTML the page is using. The third line begins the HTML document and describes what language the website is in.

Step 2

A html document is divided into two parts - head and body. The head contains the information about the document and the body contains the website code which controls the layout.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

The first line gets Joomla to put the correct header information in. This includes the page title, meta information as well as system JavaScript. The remaining lines creates links to two system style sheets and to templates's own style sheet (named template.css and located in the css folder).

Step 3

<body>
<jdoc:include type="modules" name="top" /> 
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

These lines, called jdoc statements, tell Joomla to include output from certain parts of the Joomla system.

The line which says name="top" adds a module position called top and allows Joomla to place modules into this section of the template.

The type="component" line contains all articles and main content (joomla component). It goes in the centre of the template.

Step 4

Finally, close the html tag:

</html>

Counting Modules in a Position

The countModules method can be used within a template to determine the number of modules enabled in a given module position. This is used to include HTML around modules in a certain position only if at least one module is enabled for that position. This prevents empty regions from being defined in the template output. This technique is called as collapsing columns.

For example, the following code includes modules in the 'user1' position only if at least one module is enabled for that position.

<?php if ($this->countModules('user1')) : ?>
 <div class="user1">
 <jdoc:include type="modules" name="user1" style="rounded" />
 </div>
<?php endif; ?>

The <jdoc:include /> tag and its surrounding <div> are only included if the countModules call returns a non-zero value.

Error Pages

By default Joomla uses special template when it needs to raise an error response. This is located in templates/system/error.php file. It handles several HTTP status errors, including "403 Forbidden", "404 Not Found", and "500 Internal Server" errors.

To override the system error results, copy the templates/system/error.php file into your templates/<template-name> directory.

The error.php is an independent file from the Joomla CMS but dependent on the Joomla! Platform. Plugins do not run on this file. You cannot include modules or use <jdoc:include> statements.

Error Messages based on Conditions

You can add conditional logic to vary the message returned, dependent upon the specific error code. For example, for a 404 error,

<?php if ($this->error->getCode() == '404') { ?>
 <div id="errorboxheader">Page not found</div>
 <div id="errorboxbody"><p>Sorry! That page cannot be found.</p>
 </div>
 </div>
<?php } ?>

Thumbnail Preview Image

A thumbnail preview image should be 206 pixels in width and 150 pixels high. Recommended file format is png.

Module Chrome

Module chrome controls the way the output from a module is displayed in the template. It consists of a small amount of predefined HTML which is inserted before, after, or around the output from each module, and which can then be styled using CSS. Module chrome is commonly used to provide borders around modules, especially with rounded corners, but it can be used for much more than that.

Module chrome is determined by using the 'style' attribute in the statement calling the module. For example,

<jdoc:include type="modules" name="user1" style="custom" />

The same Module chrome is applied to every module in that position.

The file controlling these is located at: /templates/system/html/modules.php

Standard module chromes are: none, html5, table, horz, xhtml, rounded, outline

To define custom module chrome in your template, create a file called modules.php in your template html directory. In this file, define a function called modChrome_STYLE where 'STYLE' is the name of your custom Module chrome. This function will take three arguments, $module, &$params, and &$attribs, as:

<?php 
 function modChrome_STYLE( $module, &$params, &$attribs ) 
 {
 /* chromed Module output goes here */
 }
?>

Within this function, you can use of any of the available module properties (fields in the #__modules table in the Joomla database). The main properties are: $module->content, $module->showtitle and $module->title.

The $module->showtitle is a Boolean variable, so is either true (when the module title should be shown) or false (when it shouldn't be shown). The $module->content and the $module->title will return the main Module content and the Module title respectively.

The module parameters are accessed using the $params object. For example, it is possible to assign a module class suffix to a Module in the backend of Joomla site. This is stored in the parameters for that module as moduleclass_sfx. To create a <div> with a class determined by the Module class suffix, you would use:

<div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>">
 <!-- div contents -->
</div>