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
- A joomla 3.x installed in local server
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.
The basic file structure for a joomla 3.x templete is as following
For creating a very basic starter joomla 3.x template we will need only 2 files mainly, thry are
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> firstname.lastname@example.org</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.
Open source technology enthusiast & passionate programmer. PHP based Web developer. Fan boy of twitter Bootstrap, jQuery, Backbone.js, Joomla, PyroCMS & Laravel PHP framework. Also interested in Python, Django, C++, C#, Drupal, OpenCart, WordPress, Linux & Android. Love to play with new technologies.