MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How to Develop Your First Ever Joomla Template?

Published on 01 July 15
832
0
1
How to Develop Your First Ever Joomla Template? - Image 1

Joomla comes with a nice long list of templates that are exceptionally good, and responsive. But, if you want to give your website an interesting outfit, and there's nothing on board like the one you are looking for, you will need to create a single template. Let's understand how you can create a Joomla template from the scratch. It is a step-by-step process, where each step marks an importance.

Pre-requisites
There are some pre-requisites that you will need to take care of before you start developing the template for your website. you will need a server and a database to get started. PHP and MySQL will come to your rescue in this case. You will need a single installer which will take care of all these installations and load it to the local server. Map your system with WAMP. You will first need to install the installer, and execute it and look out for a file named .wamp. An icon would be loaded to your PC which will help you gain access to wamp's control panel that will assist you in installing and enabling your pre-requisites.

Joomla Installation
Once you have set up the pre-requisites, you will need to get Joomla installed to your server. Check out the www folder in the wamp folders, and you will need to install Joomla to this particular folder. Extract the contents of Joomla zip file to this folder, and rename it. You will now need to create a database for the same. Go to http://localhost in the browser, go to the server admin and create your database. In the aliases section, click on phpmyadmin, and create your database here. You will need to password protect this file.Before installing Joomla, check the pre-install checklist, and mark all the items you have on board to get started. You can easily skip the FTP configuration screen while installing Joomla. You need to add the modules, so you should ideally skip adding data at this point. With all the steps done, you are ready to kickstart your Joomla website. You can now delete the installation folder present in the wamp folder.

Before you start your journey with creating the template, you will need to gain an in-depth understanding of Joomla. Develop a clear understanding on how the backend of the CMS platform works.

Template Structure
You need to understand the template structure to get started with creating the template. Study the existing templates for their structure in the wamp folder. Within the templates folder, there is a folder for every template that you have installed. Whenever you create a new template, this is where the template will go. When you want to create a template, you basically need index.php and templateDetails.xml files to get started.

index.php The markup for all Joomla includes are added to this file. These are the hooks where all the information is added

templateDetails.xml This gives out a list of instructions required to setup a template on Joomla. Name of the template, files used for the template etc. are all available in this file

Here's a quick example of how templateDetails.xml file looks like.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>template _sttl</name>
<creationDate>31-01-2009</creationDate>
<author>Netsttl Fan</author>
<authorEmail>your@email.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>You 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Template Sttl</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</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>
</install>

This code includes a detail regarding name, author, date of creation etc. for the template. It also offers an insight on the position structure. You can control some aspects of position along the backend, if included in the position.

Now that you are aware of the structure, let's get started with creating a simple template.

Creating the Template
You will first need to prepare to start the template creation process.

Go to Template folder>create new folder

Call it template_sttl

Now create two files in this template folder: index.php and templateDetail.xml, and paste the code given above to these files

Open index.php file in notepad and add the following code to it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>

For this purpose, you will use DOCTYPE the PHP code in the header section. You can add the following code, which is not included in the position element

<jdoc:include type="head" />

With this code, the Joomla header code is added which includes the page title. You can complete the markup for the page by adding body and closing html tags.

Getting Started with the Template
You have created the template file; it is time to add include to display the main content that is being viewed in general
<jdoc:include type="component" />

Now, you have the following code as part of your index.php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="component" />
</body>
</html>

You will need data to test your template. Add an article before you begin testing. WAMP should be running whilst you are testing the template.

Navigate to http://localhost/joomla/administrator to enter the admin panel

Go to content>articlemanager> and add your article. Now, view your article along the frontend, and once you are satisfied you can publish the content. Once the content is published, you should start testing the template you have created.

Go to template manager in the backend and click on extensions. Here you can access the template_sttl, and set it as your default template. Preview how the article looks on the template you have just created.

Beautifying the Template
When you tested the template, you noticed that it is perfectly capturing the content details, and displaying it to the perfection. Now, you need to develop the template aesthetically, and for that you need to program your template further.

Before adding positions, you need to take a look at the positions that exist in index.php

<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>

Here's the code to include

<jdoc:include type="modules" name="position_name" />

If you want to add left position to your index.php file, here's the code you will need to add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>

<body>

<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
</body>
</html>

To add footer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>

<body>

<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="footer" />
</body>
</html>

Now, you have a clear idea of how to add the positions.

You will need to go to module manager, and click on footer to get the code working. Now click save, and perform the actions for the other tasks too.































































































































































How to Develop Your First Ever Joomla Template? - Image 1

Joomla comes with a nice long list of templates that are exceptionally good, and responsive. But, if you want to give your website an interesting outfit, and there's nothing on board like the one you are looking for, you will need to create a single template. Let's understand how you can create a Joomla template from the scratch. It is a step-by-step process, where each step marks an importance.

Pre-requisites
There are some pre-requisites that you will need to take care of before you start developing the template for your website. you will need a server and a database to get started. PHP and MySQL will come to your rescue in this case. You will need a single installer which will take care of all these installations and load it to the local server. Map your system with WAMP. You will first need to install the installer, and execute it and look out for a file named .wamp. An icon would be loaded to your PC which will help you gain access to wamp's control panel that will assist you in installing and enabling your pre-requisites.

Joomla Installation
Once you have set up the pre-requisites, you will need to get Joomla installed to your server. Check out the www folder in the wamp folders, and you will need to install Joomla to this particular folder. Extract the contents of Joomla zip file to this folder, and rename it. You will now need to create a database for the same. Go to http://localhost in the browser, go to the server admin and create your database. In the aliases section, click on phpmyadmin, and create your database here. You will need to password protect this file.Before installing Joomla, check the pre-install checklist, and mark all the items you have on board to get started. You can easily skip the FTP configuration screen while installing Joomla. You need to add the modules, so you should ideally skip adding data at this point. With all the steps done, you are ready to kickstart your Joomla website. You can now delete the installation folder present in the wamp folder.

Before you start your journey with creating the template, you will need to gain an in-depth understanding of Joomla. Develop a clear understanding on how the backend of the CMS platform works.

Template Structure
You need to understand the template structure to get started with creating the template. Study the existing templates for their structure in the wamp folder. Within the templates folder, there is a folder for every template that you have installed. Whenever you create a new template, this is where the template will go. When you want to create a template, you basically need index.php and templateDetails.xml files to get started.

index.php The markup for all Joomla includes are added to this file. These are the hooks where all the information is added

templateDetails.xml This gives out a list of instructions required to setup a template on Joomla. Name of the template, files used for the template etc. are all available in this file

Here's a quick example of how templateDetails.xml file looks like.

br> "http://dev.joomla.org/xml/1.5/template-install.dtd">

template _sttl
31-01-2009
Netsttl Fan
your@email.com
http://www.siteurl.com
You 2009
GNU/GPL
1.0.0
Template Sttl

index.php
templateDetails.xml
css/template.css

breadcrumb
left
right
top
user1
user2
user3
user4
footer

This code includes a detail regarding name, author, date of creation etc. for the template. It also offers an insight on the position structure. You can control some aspects of position along the backend, if included in the position.

Now that you are aware of the structure, let's get started with creating a simple template.

Creating the Template
You will first need to prepare to start the template creation process.

Go to Template folder>create new folder

Call it template_sttl

Now create two files in this template folder: index.php and templateDetail.xml, and paste the code given above to these files

Open index.php file in notepad and add the following code to it

For this purpose, you will use DOCTYPE the PHP code in the header section. You can add the following code, which is not included in the position element

With this code, the Joomla header code is added which includes the page title. You can complete the markup for the page by adding body and closing html tags.

Getting Started with the Template
You have created the template file; it is time to add include to display the main content that is being viewed in general

Now, you have the following code as part of your index.php file

You will need data to test your template. Add an article before you begin testing. WAMP should be running whilst you are testing the template.

Navigate to http://localhost/joomla/administrator to enter the admin panel

Go to content>articlemanager> and add your article. Now, view your article along the frontend, and once you are satisfied you can publish the content. Once the content is published, you should start testing the template you have created.

Go to template manager in the backend and click on extensions. Here you can access the template_sttl, and set it as your default template. Preview how the article looks on the template you have just created.

Beautifying the Template
When you tested the template, you noticed that it is perfectly capturing the content details, and displaying it to the perfection. Now, you need to develop the template aesthetically, and for that you need to program your template further.

Before adding positions, you need to take a look at the positions that exist in index.php

breadcrumb
left
right
top
user1
user2
user3
user4
footer

Here's the code to include

If you want to add left position to your index.php file, here's the code you will need to add

To add footer

Now, you have a clear idea of how to add the positions.

You will need to go to module manager, and click on footer to get the code working. Now click save, and perform the actions for the other tasks too.

This blog is listed under Open Source and Development & Implementations Community

Related Posts:

Joomla

 
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top