Joomla 2.5 Template (theme) development

I need to develop a Joomla template for version 2.5.  I created a site a few years back using Joomla 1.0.15 and cheated a bit as I was short on time, I took a template that had been developed by someone else and tweaked it to make it work with my design.

This time I’m doing it from scratch as I really like to know how these things work.  I have read various blogs and posts to get some ideas and hints and looked at the structure of an existing template, the very basic structure of the template looks like this:

  • [templateName] (top level)
    • css (sub directory for css files)
      • template.css (file containing the theme style)
    • js (sub directory for javascript)
      • template.js (file contain the theme javascript)
    • html (sub directory html)
    • images (sub directory for images)
    • language (sub directory with language files)
    • index.php (main PHP file for the template)
    • index.html (not sure about this yet?)
    • favicon.ico (icon file that displays in the browser)
    • templateDetails.xml (xml file defining details about the theme)
    • template_preview.png (preview image)
    • template-tumbnail.png (template thumbnail image)
    • error.php (PHP error page)

First I added in the details of the XML file:

<extension
        version="2.5"
        type="template"
        client="site">
        <name>crafc2</name>
        <creationDate>28/04/12</creationDate>
        <author>mARK aNDREWS</author>
        <authorEmail>mraandrews@gmail.com</authorEmail>
        <authorUrl>http://www.mraandrews.co.uk</authorUrl>
        <copyright>no copyright</copyright>
        <license>None</license>
        <version>2.5.0</version>
        <description>template for client X<description>
        <files>
                <folder>html</folder>
                <folder>css</folder>
                <folder>images</folder>
                <folder>language</folder>
                <folder>js</folder>
                <filename>index.php</filename>
                <filename>index.html</filename>
                <filename>favicon.ico</filename>
                <filename>templateDetails.xml</filename>
                <filename>template_preview.png</filename>
                <filename>template_thumbnail.png</filename>
                <filename>error.php</filename>
        </files>
        <positions>
                <position>tpl-HeadingMenu</position>
                <position>tpl-crafc-subHeading</position>
                <position>tpl-crafc-LeftColumn</position>
                <position>tpl-craf-RightColumn</position>
                <position>tpl-crafc-Footer</position>
</positions>
        <!--    For core templates, we also install/uninstall the language files in the core language folders.
        -->
        <languages folder="language">
                <language tag="en-GB"></language>
        </languages>

</extension>

Then I added the html to the index.php file.  This is where all the html code for the template goes.  to include content and other bits from joomla I am using information that I have found here there are all sorts of useful bits you can get from the joomla system.

A very basic page could be as simple as this:

1. defined('_JEXEC') or die;

<html>
   <head>
2.    <jdoc:include type="head" />
3.    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
4.    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>

   </head>
   <body>
      <div>
5.        <jdoc:include type="component" />

      </div>
   </body>
</html>

Line 1 is required by all templates.  It makes sure that a joomla session exists this stops direct access to the file.
Line 2 is will pull in a load of header information meta-tags etc…
Line 3 & 4 are pulling in the template css and javascript
Line 5 pulls in the content

Ta dah.

One more thing, all the files can be put into a standard zip file and then installed using the joomla extension manager in the admin console.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>