Joomla 3.x Template Development part-1

Templetes are the most important part for Joomla websites layout. In this tutorial I will try to show how to create a joomla 3.x templete from scratch. From joomla version 3.0 the cms is shipped with two fully responsive template for both front end and back end incorporating with twitter bootstrap and jQuery javascript framework. As I will cover  series tutorial for creating a fully rsponsive joomla 3.x template so in this beginning tutorial I will show how to create a very simple basic template for joomla 3.x versions.
To understand Joomla tepmlate development tuttorial a decent understanding of HTML, xHTML, CSS, XML and PHP is needed.
For creating a joomla basic templete we will need the following tools

  • A code editor
  • Browser
  • A joomla 3.x installed in local server

File structure
The template files are installed inside the templates folder of every single joomla installation. The template must have a specific name and all the necessary files and folders of the template will be located inside the folder.
sc
The basic file structure for a joomla 3.x templete is as following

  • Html
  • CSS
  • JS
  • images
  • index.php
  • templateDetails.xml

For creating a very basic starter joomla 3.x template we will need only 2 files mainly, thry are

  • index.php
  • templateDetails.xml

At first we do not need any other files in other folders. So lets create the index.php file 1st with the following code included

<?php
/**
* @package Joomla.Administrator
* @subpackage Templates.w3p
*
* @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
//to stop direct access
defined('_JEXEC') or die('Entry Restricted');
$doc = JFactory::getDocument();
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>"
>
<head>
<jdoc:include type="head" />
<title> Joomla | Template </title>
</head>
<body>
<h1> Basic Joomla 3.x Template </h1>
<!-- main content area -->
 <jdoc:include type="modules" name="position-3" style="xhtml" />
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 <jdoc:include type="modules" name="position-2" style="none" />
</body>
</html>

If you analyze the code you can understand that it is almost a simple HTML template with some joomla specific PHP code embaded.
The follwing codeblock is included at starting to avaoid or stop direct execution on index.php file

<?php
defined('_JEXEC') or die('Entry Restricted');
?>

If you know basic PHP then you should know about PHP comment and the follwing commented part is about description about the template

 /**

* @package Joomla.Administrator
 * @subpackage Templates.w3p
 *
 * @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license GNU General Public License version 2 or later; see LICENSE.txt
 */
 

Now inside body section

<jdoc:include type="modules" name="position-3" style="xhtml" />
 <jdoc:include type="message" />
 <jdoc:include type="component" />
 <jdoc:include type="modules" name="position-2" style="none" />

It’s a very basic layout, but it will do the job. Everything else will be done by Joomla. These lines, usually called jdoc statements, tell Joomla to include output from certain parts of the Joomla system.

Now lets work with the templateDestails.xml file. This file includes the information about the total template file. Open a file in your text editor and include the following code

 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
 "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">
 <extension version="3.1" type="template" client="site">
 <name>Basic Joomla 3.0 Template</name>
 <version>1.0</version>
 <creationDate>13/07/2013</creationDate>
 <author>Asif Saifuddin</author>
 <authorEmail> admin@hungrycoder.net</authorEmail>
 <authorURL> Hungrycoder.net </authorURL>
 <copyright> Copyright (C) 2013 W3programmers.com </copyright>
 <description>A very basic template for Joomla 3.0</description>
 <files>
 <filename>index.php</filename>
 <filename> templateDetails.xml </filename>
 <folder>css</folder>
 <folder>html</folder>
 <folder>js</folder>
 <folder>images</folder>
 </files>
 <positions>
 <position>position-2</position>
 <position>position-3</position>
</positions>
 </extension>
 

In this templateDetails.xml file you need to include all information about the template which will be carried as xml data.

 <!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
 "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">

This part of code is needed for xhtml validation for joomla 2.5 and 3.x series.

In the extension tag part is description about joomla version, author and files and folder names are included. Positions tag indicates the templates module positions.

Now save all the files showed in this tutorial and put them inside w3p folder or youe desierd template folder. Now zip the file as w3p.zip and install it in your local joomla installation from extension manager and check the changes.
So you have got the basic idea about joomla 3.x template structure in this post. In the next post I will show a full fledged joomla 3.x template with twitter bootstrap.

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>