Joomla is a powerful yet easy to use content management system that is free to download and open source (allowing free customization). It is has become a very popular choice for web designers because, like many modern content management systems, it allows the designer to fully turn over control of the site to the client, after the template design is finished.
The reason clients love Joomla is that they can configure it from within a user-friendly web-based control panel and easily add extensions to it. Users add extensions simply by uploading the zip file provided by the extension developer, and Joomlas website includes a catalog of over 5,000 extensions.
While using Joomla is very simple, modifying or creating templates for it takes a little more training. In this introduction, we will cover the template structure, how the template interacts with the backend, and the setup of a basic XHTML+CSS Joomla template.
1. Template Structure
In the Joomla filesystem, templates are housed in a directory called a template. Each template will have its own directory and will be named accordingly.
/SITE
/templates
/MyTemplate (name this whatever you like)
/admin
/css
template.css
/html
/images
component.php
favicon.ico
index.html
index.php
params.ini
template_thumbnail.png
templateDetails.xml
templates.php
Not all templates will have the “html†folder, but if you want your Joomla template to be pure XHTML with divs and no tables for structure, simply copy the html folder found in the “beez†template directory to your own template directory.
The two main files that you will edit are “index.phpâ€, which is in the /SITE/templates/MyTemplate directory, and template.css, which is located in the /SITE/templates/MyTemplate/css directory. The index.php file will contain your XHTML code and the php includes that will call up Joomla components and modules. The template.css file will contain your CSS styles for the entire site.
2. Template/Backend Interaction
Joomla is written in PHP, and all interaction between the template and backend uses this language. Fortunately, you do not really need to know any PHP code to create or modify a template, only that a few PHP tags should be present and never need to be altered.
For example, certain PHP tags can be used to automatically link to files, even if the directory structure changes. For example, the <?php echo $this->template ?> will automatically insert the URL into your template directory, even if you copy the template to a new site. Therefore, when linking to the CSS file, you would use:
| 1 | <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> |
The easiest way to get started is to copy the header from one of the default Joomla templates, since all of the variable content in the header tags will be controlled in the Joomla backend.
The other portions of Joomla are placed on the page using statements. Each statement is used to include a specific component or module in Joomla. For example, <jdoc:include type=”component” /> will insert the appropriate component for a given page. All of the content contained in that component will appear wherever you place that jdoc statement, This allows for tremendous flexibility because you can insert that include into a div, specify the size, color attributes, alignment, and any other html or css you wish.
The <jdoc:include type=”head” /> element is the only jdoc statement that appears between the <head></head> tags. All metadata specified in the Joomla backend will appear in its place.
Modules are identified by the jdoc:include type=modules statement, and each module name is declared within the statement: <jdoc:include type=”modules” name=”modulename” />. For any module, just replace modulename with the actual name (i.e. breadcrumbs, footer, right, left, user1, user2).
The <jdoc:include type=”message” /> statement will include any system or error messages on your page.
3. Basic Joomla Template
A basic Joomla template will have the necessary jdoc statements in the index.php file, the XHTML structure around the statements, and CSS styles in templates.css that correspond with the IDs and classes in your index.php file. Assuming you are familiar with normal web design, the rest of the process will be familiar.
This is what your basic Joomla template structure for index.php will look like (Joomla code is included in bold).
Your index.php file can certainly be more complex than this, but you should now have a basic idea about the general structure of a Joomla template and how differs from a regular html/css website.
In the next part of this article series, we will explore Joomla templates in a little more depth, learning how to set up one from start to finish, as well as some important CSS tags that are embedded in the Joomla system. In the meantime, it might help you to take a look at the Joomla documentation for the topics we covered.