Joomla is one of the most popular open-source content management systems. This tutorial will walk you through the necessary steps of creating a Joomla template from scratch.
In this digital age, a content management system is a basic necessity of any business for all their content creation needs. And, there are a number of open-source as well as paid CMS software available in the market. We also have listed some of the top open-source content management software for businesses. Joomla is one of the most popular open-source cms software and in this tutorial we’ll walk you through step by step and explain how to create a Joomla template from scratch. So let’s get started!
Note: We assume that you have Joomla 2.5 version installed
- Setup Directory Structure
- Create a basic templateDetails.xml file
- Create a basic index.php file
- Discover and Install Template
- Package the template
Setup Directory Structure
To create a very basic Joomla template first, create a new folder in the templates folder. Name the folder whatever you want to call your template e.g “mynewtemplate“.
Using your favorite text editor create the files index.php and templateDetails.xml. To manage your images and style sheets, make 2 new folders called images and css. Inside the css folder create a file called template.css.
Your Directory Structure will look something like this
Create a basic templateDetails.xml file
The templateDetails.xml file holds all the metadata about your template. And, this file is essential without it, your template won’t be seen by Joomla!.
<?xml version="1.0" encoding="utf-8"?> <extension version="2.5" type="template"> <name>mynewtemplate</name> <creationDate>2008-05-01</creationDate> <author>Auther Name</author> <authorEmail>email@example.com</authorEmail> <authorUrl>http://www.example.com</authorUrl> <copyright>Auther Name 2020</copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>My New Template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>images</folder> <folder>css</folder> </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> </positions> </extension>
Contents of the templateetails.xml are self-explanatory. You can just copy the contents the modify the necessary bits.
Leave the positions as they are – these are a common set so you will be able to switch easily from the standard templates.
Create a basic index.php file
The index.php becomes the main bootstrap file of every page that Joomla! delivers. This page will show the bare-bones code ready for you to cut and paste into your own design.
<?php defined('_JEXEC') or die('Restricted access');?> <!DOCTYPE html> <html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="footer" /> </body> </html>
Discover and Install Template
You first need to tell Joomla! that you have created a new template. This feature is called Discover Extensions and can be accessed via
Extensions -> Extension Manager -> Discover
Click Discover Button to discover your template, then select it and click Install to install it. Now your template should show up in the Template Manager (Styles), accessible via
Extensions -> Template Manager
Package the Template
An unzipped directory with several files is not a good method for distribution. So, for the sake of distribution, we should create a package of our template. The package can be in ZIP format (with a .zip extension).
If your template is in a directory mytemplate/ then to make the package you can connect to that directory and use commands like:
zip -r ..\mytemplate.zip .
In this article, we learned about the Joomla Template. We went through step by step on how to create a Joomla template. This is just a very basic tutorial to get started with template creation. Of course, you can build a very customized and enhanced template based on this bare-bone structure.
Relevant Product Pages
You may find the following links relevant: