In this article, I am going to show you how to create a template for Joomla! This is article is just an introduction to Joomla templates flexibilities and I am not going to explain all stuff about Joomla templates.

For creating Joomla template we follow 5 steps

1. Design the HTML template
2. Add Joomla tags to your template
3. Create templateDetails.xml file
4. Create your icon
5. Ready to release

Design the HTML template

You can easily design your template in graphical softwares such as Photoshop or Fireworks.

Then slice it to parts and code the HTML. It's better to have a basic knowledge about XHTML, CSS and JavaScript when your are creating the HTML template.

Add Joomla tags to your template

After creating HTML template convert the name from yourFileName.htm(l) to index.php.

• Change all included .js and .css files
  Here is example to illustrate what you should do:
  

  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/code/css/main.css" type="text/css" /> 
     

  %3Clink%20rel%3D%22stylesheet%22%20href%3D%22%3C%3Fphp%20echo%20%24this-%3Ebaseurl%20%3F%3E%2Ftemplates%2Fcode%2Fcss%2Fmain.css%22%20type%3D%22text%2Fcss%22%20%2F%3E
  
  Let me describe each part of this path "<?php echo $this->baseurl ?>/templates/x-temp/css/main.css"
  "<?php echo $this->baseurl ?>" will return the address of your website.
  "/template" is place where joomla install your template.
  "/x-temp" is my project name (Joomla use this name to create the folder to store all your uploaded files and we will discuss it later).
  "css\main.css" is where I store my CSS file.
• Now add place holders for your modules
  '<jdoc:include type="modules" name="x-pos" />' you can have several place holders for your modules with different names
  change x-pos to what you want
• Also you can test if module exist then include it by using
  

  <?php if($this->countModules('x-pos')) : ?>
              <jdoc:include type="modules" name="x-pos" />
          <?php endif; ?> 
     

  %3C%3Fphp%20if%28%24this-%3EcountModules%28%27x-pos%27%29%29%20%3A%20%3F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cjdoc%3Ainclude%20type%3D%22modules%22%20name%3D%22x-pos%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%3Fphp%20endif%3B%20%3F%3E
  
  This way you can add some extra HTML codes which will appear only if any module is assigned to this position (x-pos)
• There are some other elements that can be included such as
  

  <jdoc:include type="message" />
          <jdoc:include type="component" />    
          <jdoc:include type="modules" name="debug" /> 
     

  %3Cjdoc%3Ainclude%20type%3D%22message%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cjdoc%3Ainclude%20type%3D%22component%22%20%2F%3E%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cjdoc%3Ainclude%20type%3D%22modules%22%20name%3D%22debug%22%20%2F%3E
• Now its time to create templateDetails.xml

Create templateDetails.xml file

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
    <name>x-temp</name>
    <creationDate>Dec. 20 2008</creationDate>
    <author>Arash Karimzdeh</author>
    <authorEmail>a.karimzadeh@ gmail.com</authorEmail>
    <authorUrl>http://www.arashkarimzadeh.com</authorUrl>
    <copyright></copyright>
    <license>GNU/GPL</license>
    <version>1.0.0</version>
    <description></description>
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <filename>template_thumbnail.png</filename>
        <filename>images/enter.jpg</filename>
        <filename>images/gradient.jpg</filename>
        <filename>images/menu.jpg</filename>
        <filename>images/separator.jpg</filename>
        <filename>css/main.css</filename>
    </files>
    <positions>
        <position>x-pos</position>
        <position>left</position>
        <position>leftTop</position>
        <position>debug</position>
        <position>syndicate</position>
    </positions>
    <params>
    </params>
</install> 
   

• "<name>x-temp</name>" is the name which Joomla will recognize your template with. so change the x-temp to your desired name(it must be the same name that we used in index.php when we wanted to include .css and .js files)
• Here you must list all files that you are going to upload by this template package in "<filename>file.php</filename>"
• "<position>x-pos</position>" is the name of your place holders such as x-pos which you added to your index.php file.

Create your icon

Now create your icon as .ico extension and rename it to favicon.ico and put it your root folder where your index.php is placed.

Also its better to capture a snapshot of your template as template_thumbnail.png which must be 206px*150px.

Ready to release

Lets check your files and folders hierarchy

• x-temp
  • css
    • here you probably place all your css codes
  • images
    • here you probably place all your images
  • index.php
  • favicon.ico
  • templateDetails.xml
  • template_thumbnail.png

Now you must make a zip file and name it whatever you want. You can upload this zip file as a template and use it.

Tags: CMS | Joomla