Creating a Template for Joomla 2.5 – PART 2

A New “Hello World!”

This is the second part of a tutorial on how to create a template for Joomla 2.5. In the first part we learned what a template is and what Joomla expects finding in a template.

Since a template structure can be very tricky and confuse, in this second part we’re going to do a simple Hello World Joomla template. This is a very simple structure but will help us to understand better how to work with templates inside Joomla. In the end of this article, I’m going to show how to install and apply a new template in Joomla. Before starting, let’s make some things clear:

  • You can use any editor you want to; and
  • Make sure your PHP server is on and your Joomla is working.

Create our template folder

To begin, let’s create our template folder. Create a folder where you’re going to store your template’s files. I’m going to call mine “helloworld”. Feel free to choose any name you want to, just make sure of naming your template with the same name. In this folder, create a file called index.php. Open this file in your preference editor. Copy the following lines in your index.php.

<html>

    <head>

                <jdoc:include type=”head” />

    </head>

    <body>

                <jdoc:include type=”message” />

                <div class=”center” align=”center”>Hello World!</div>

                <jdoc:include type=”modules” name=”debug” />

    </body>

</html>

This index.php file has a very basic structure. It doesn’t even compile the HTML rules, such as DOCTYPE parameter. However let’s keep it as simpler as we can so we’re going to understand better this whole process.

Analyzing this code, the first Joomla statement that we find is the <jdoc:include type=”head” />. This statement inserts your template information into the header. When Joomla finds this kind of statement what basically happens is it changes this statement for a bunch of HTML statements defined within other files, such as:

<title>helloworld</title>

<meta name=”generator” content=”Joomla! 2.5″ />

<meta name=”description” content=”Simplest template in the Joomla world. />

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<meta name=”helloworld” content=”index, follow” />

<meta name=”keywords” content=”hello world, joomla” />

<link href=”http://localhost/favicon.ico”

rel=”shortcut icon” type=”image/x-icon”/>

The second Joomla statement is <jdoc:include type=”message” />, which simply includes any server messages in the post. Usually it doesn’t have any message, so no extra content will be added.

The final Joomla statement is <jdoc:include type=”modules” name=”debug” />. This statement refers to the debug module. Normally this module doesn’t display anything. But if your debugging mode is on and you got an error while your website is running you will be able to see the error message on it. This information will be extremely helpful, since it will describe the execution of the template page.

To complete the template, let’s create its xml file. To meet the standards, it must be called templateDetails.xml and be inside your template folder. As said before, this file contains the template technical information, and list of used files. So open this file in your preference editor. Copy the following lines into it.

<?xml version=”1.0″ encoding=”utf-8″?>

<install version=”1.5″ type=”template”>

    <name>helloworld</name>

    <description>

                Simplest template in the Joomla world.

    </description>

    <files>

                <filename>index.php</filename>

                <filename>templateDetails.xml</filename>

    </files>

</install>

Installing a new template in Joomla

As any other extension in Joomla, a template can be installed through the Joomla Extension Manager. There you will find three ways to install a new extension: Uploading a Package file, installing from a directory (by default: Joomla/tmp directory) or from a URL. Let’s use the first option: Uploading a package file. To install your template:

  • First you must to compact the whole template folder in a Zip file;
  • Second, go to your Joomla administrator area, and then the Extension Manager; and
  • Third, go to the “Install” tab, push the “Choose File”, localize your template zip file, and click on the “Upload & Install” button.

Joomla-Website-Template - Part2Figure 1: Extension Manager – Installing a new extension

Applying a new template as default
Considering that you did everything well and your template was successfully installed, go to Extensions>Template Manager. There you’re going to see your template amongst the available ones.  Click on the checkbox beside of the desired template and then on “Make Default” button.

Joomla-Website-Part2a

Figure 2: Template Manager – applying a template

Doing this, your template will be used by your website. Check it out!

Joomla-Website-Template -Part2b

Figure 3: Hello World template.

In this article we learned a little more on how to work with templates in Joomla. In the next (and final) article, we are going to apply all what we’ve been learning to create a basic template that contains all common structures (CSS, Javascript, XHTML and etc).  Keep it up!

Comments

  1. Narendra singh rajput says:

    Thank,s for good step by step template create

  2. nice work, a good starter, when moving from 1.0 to J2
    Thanks

  3. Tnx a lot… i was searching about this subject but i could not give any right answer except this useful website…

    thanks anyway

  4. Siju Ganapathy says:

    hi,
    When i use your xml content n my templateDetails.xml file it shows jinstall error. when i change install tag to extension it works!. i am new to joomla and using joomla 2.5 . Thanks for your articles they are very helpful

  5. can u tell m how to create advance templates for joomla 2.5 pl.tell m i want to learn it.

  6. When I want to install theme, it says this:
    Failed loading XML file
    F:\wamp\www\Joomla stran\tmp\install_50c0aa9d8ac05/templateDetails.xml
    XML: String not started expecting ‘ or ”
    XML: Malformed declaration expecting version
    XML: Blank needed here
    XML: parsing XML declaration: ‘?>’ expected
    XML: AttValue: ” or ‘ expected
    XML: attributes construct error
    XML: Couldn’t find end of Start Tag install line 3
    XML: Extra content at the end of the document
    JInstaller: :Install: Cannot find Joomla XML setup file

    It is in red frame. So, where is my problem?
    Tnx

  7. I would like to know how to install a complete template with needed components and modules?

  8. Zaheer Ahmed says:

    I would like to know how to make complete template with full multimedia components such as Text, Images,Audio and vedio .

  9. I am getting the same result as Zan.
    In this version I’ve copied exactly what’s done in this guide, just to check if I did something wrong.

    Failed loading XML file
    /home/xxxxxx/public_html/tmp/install_50fe9f15625cd/helloworld/templateDetails.xml
    XML: String not started expecting ‘ or ”
    XML: Malformed declaration expecting version
    XML: Blank needed here
    XML: parsing XML declaration: ‘?>’ expected
    XML: AttValue: ” or ‘ expected
    XML: attributes construct error
    XML: Couldn’t find end of Start Tag install line 3
    XML: Extra content at the end of the document
    JInstaller: :Install: Cannot find Joomla XML setup file

    What am I doing wrong here!?!?!

  10. Siju is correct. I got the error and examined the other similar files in working templates. Change the xml file to:

    helloworld

    Simplest template in the Joomla world.

    index.php

    templateDetails.xml

  11. grr – html tags got stripped.

    Look at the extensions tag in a working file and make sure the extension option client=”site”

  12. Last try:
    line 1: ?xml version=”1.0″ encoding=”utf-8″?

    line 2: !DOCTYPE install PUBLIC “-//Joomla! 1.6//DTD template 1.0//EN” “http://www.joomla.org/xml/dtd/1.6/template-install.dtd”

    line 3:extension type=”template” version=”2.5″ client=”site”

    middle section leave alone

    Last line: /extension

    Just put the brackets around the code lines (), which I had to remove or the post would strip the html.

  13. I had the same failures as Zan and Kim.
    I found that cut and paste from your web page changed the double quotes to alternative characters.
    Edit the xml manually and replace the bad characters using the web page as a guide.

  14. CekasWeb.com says:

    Nice tutorial, step by step. :)

  15. I would like to know how I can change the font style and colour in the template.

  16. ‘It is in red frame. So, where is my problem?’

    Check that the quotes (“) are correct. Sometimes when you copy and paste the quotes change to a slanting type of quote if copied from 66 and 99 type used above. check the code in both files.

  17. Just put this in templateDetails.xml:

    helloworld

    Simplest template in the Joomla world.

    index.php

    templateDetails.xml

  18. line 1:
    line 2:

    line3:

    middle section leave alone

    Last line: /extension

  19. Ronny Fretel says:

    looking forward for 3rd part!
    please send me an email

  20. Oh my goodness! Incredible article dude! Thanks, However I am encountering issues
    with your RSS. I don’t know why I am unable to join it. Is there anybody having the same RSS issues? Anyone that knows the solution can you kindly respond? Thanx!!

Speak Your Mind