Sometimes creating a template gives you the freedom of customizing it. You can position the header, footer and other aspects of the template as and where you want to. Follow these steps to create your template, and then change the positions of the different elements as per your need. Hire Joomla developer to give your template the aesthetic purview

1. How to Develop Your First Ever Joomla Template?
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.

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

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

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

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

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

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

8. </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

9. <!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.
Conclusion:
Sometimes creating a template gives you the freedom of
customizing it. You can position the header, footer and other aspects
of the template as and where you want to. Follow these steps to
create your template, and then change the positions of the different

10. elements as per your need. Hire Joomla developer to give your
template the aesthetic purview
Original Source:
http://www.instructables.com/id/How-to-Develop-Your-First-
Ever-Joomla-Template/