Creating Joomla Templates
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 Joomlaâ€™s 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.
In the Joomla filesystem, templates are housed in a directory called â€œtemplatesâ€.Â Each template will have its own directory and will be named accordingly.
/MyTemplate (name this whatever you like)
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.
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:
<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 â€œjdocâ€ 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.
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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <div id="container"> <div id=â€top-modulesâ€> <jdoc:include type=â€modulesâ€ name=â€topâ€ /> </div> <div id=â€left-modulesâ€> <jdoc:include type=â€modulesâ€ name=â€leftâ€ /> </div> <div id=â€contentâ€> <jdoc:include type=â€modulesâ€ name=â€messageâ€ /> <?php if($this->params->get('showComponent')) : ?> <jdoc:include type=â€modulesâ€ name=â€componentâ€ /> <?php endif; ?> </div> <div id=â€right-modulesâ€> <jdoc:include type=â€modulesâ€ name=â€rightâ€ /> </div> </div> </body> </html>
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.
[subscribeus name="Get Updated"]