Here in this tutorial you will be getting how to create a simple joomla template from custom html file in joomla 2.5.First open joomla template directory by joomlaroot => templates then create a folder named as custom means your are going to create a new template called custom ,like you have some other default templates beez5,beez_20,atomic etc…

simple joomla template
joomla template

Before doing all files and folder structure you need to understand all necessities of files and folder of
a template in joomla.
index.php: It specify the all avialabel module position and path of style sheet .This is the main section of
joomla template.
templateDetails.xml : It is a system file which provides all information about the template to joomla application.
css folder: it contains all stylesheet files of template.
imgages: it also keeps the images related to your template.
index.html: it doesn’t contain any content its just a html file.
favicon icon : to set favicon icon in your site you just place an image over here.
also some other extra features you can set in template like js folder to keep your custom js files and language folder
to set your laguange globaly for diferent language format.html folder its not neccesary if you want overide core application files
of joomla you just place this html folder and set

So according to above description create all files in custom folder
you must have these files index.php,templateDetails.xml and css/style.css

Suppose you have a html template having different layout like image below.As per below image I am creating a custom template in joomla-2.5
having name custom so please check one by one:


Suppose I have installed joomla-2.5 having no sample data then I need to crate different modules and set the module positions in admin side.

As my template I have different positions like header,right,left and footer.You will be getting html template in the attached file as well.

In my custom folder file I have created below files:

Index.php file:

lets check all the details of index.php file what does it contains and it holds all the module potions.


A joomla template begins with following lines:

direction; ?>" >


First line all the header information of joomla like page title,meta information as well as all system javascript files.
after that you can include your css and js files.Like I have css files and js files in my I have created one css folder and js folder
in css folder all my css files and js folder all javascript and jQuery files.Then all those I have included in above.

Body Section:

generally joomla jdoc:include tells joomla to include output from certain parts of joomla system.In the above body I have set all the modules
and componet as per their positions.Like:
here I have included a module having position menu. by defining as type=”module” and name=”menu”.In this way you can include all other created
modules and joomla componet which will contain all articles and main content.So thats why to include componet is most important.

Note: You can add your own module lines anywhere you want in the body but you have to add corresponding lines in templateDetails.xml file.


Here the final php file will be like :

direction; ?>" >

templateDetails.xml :

	25 April 2014
	Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
	GNU General Public License version 2 or later; see LICENSE.txt
	Custom template devloped by logic rays



All the above explanation is for template creation but to make the template work on your site you need to import db.sql file.

make sure that before using this sql file you have taken the backup of your database and configured your configuration.php file means
have set your dbprefix and db name etc.

or you can see the below video tutorial for manual set of modules and articles of this tutorial.

the video part is coming soon ………..

How to create a simple joomla template from html
Tagged on:     

Leave a Reply

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