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

template_name
29 January 2014
write Your name here
write your email here
your website url here
Copyright here. All rights reserved.
License here
3.0.1
TPL_NAME_XML_DESCRIPTION

index.html
index.php
templateDetails.xml
template_preview.png
template_thumbnail.png
favicon.ico
component.php
error.php


debug
top
position-2
position-3
position-4
position-5
position-6
banner
left-navigation
position-login
position-footer
  



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!

Post a Comment