Create a Joomla Template from scratch



HOW TO CREATE A JOOMLA TEMPLATE FROM SCRATCH?

Want a customized joomla template for your business needs? It's so easy to build a template of your choice rather than paying thousands for it. So lets start now.

To make a joomla template you will need at least two files,

1.templateDetails.xml which is mainly configuration file containing information like autor name, email, template version, folders and file names and module names (we'll discuss it leter).

2.index.php which is entry point for all pages
These are basic files needed to create a joomla template, but additionally you will need some more files to make a beautiful and effective template such as css, images, language, javascript, html etc.
Now lets create our xml file

<?xml version="1.0" encoding="utf-8"?>
<extension client="site" type="template" version="3.0">
<name>template_name</name>
<creationdate>29 January 2014</creationdate>
<author>write Your name here</author>
<authoremail>write your email here</authoremail>
<authorurl>your website url here</authorurl>
<copyright>Copyright here. All rights reserved.</copyright>
<license>License here</license>
<version>3.0.1</version>
<description>TPL_NAME_XML_DESCRIPTION</description>
<files>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>component.php</filename>
<filename>error.php</filename>
</files>
<positions>
<position>debug</position>
<position>top</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
<position>position-5</position>
<position>position-6</position>
<position>banner</position>
<position>left-navigation</position>
<position>position-login</position>
<position>position-footer</position></positions>
</extension>

As you can see additional files are here like index.html (just to prevent direct access of this folder) , template_preview.png and template_thumbnail.png to show in administrator panel. Here several positions are defined which we'll use in our index.php file.

Your xml is ready, now create your index.php file.

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xml:lang="language; ?>" lang="language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="banner" />  
<jdoc:include type="modules" name="left-navigation" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="position-3" />
</body>
</html>

As you see we have included defined( '_JEXEC' ) or die( 'Restricted access' );
just for security reasons to prevent direct access. is here to tell browsers and crawlers that its a html5 web page.

body{padding:0;margin:0;font-family:"arial";
font-size:12px;color:#5d6060;background-color:#fff}
a{text-decoration:none;outline:0}
a:focus,a:active{outline:0}
img{border:0;outline:0}
.container{height:auto;width:1044px;margin-right:auto;margin-left:auto}
.container_sub{height:auto;width:1044px;float:left}
#header_main{height:auto;width:1044px;float:left}
#header{height:118px;width:1044px;float:left}
.header_top{height:auto;width:1044px;float:left}
#logo{height:75px;width:231px;float:left;margin-top:4px}

Your template is ready now but to work with joomla you have to upload it under templates folder. After uploading it to templates folder log in to your joomla administrator and open extensions -> Templates manger. Here you will not be able to see your template as you expected. This is because it requires one more step, to install the template. Ok, go to Extensions -> Extension Manager then click Discover tab now click on discover icon on the top-right corner of the page. It will search all the extensions available in your joomla installation, here you will be able to see your template name, select it and click on install icon on the top-right corner of the page. This will install your template. Now you are done.
Go to Extensions-> Template manager , here you can see your installed template.

That's it!

In next chapter we'll make a beautiful responsive template using Twitter Bootstarp. Happy Learning!

No comments: