How To Develop a Joomla Template from scratch

ByAlexia Pamelov

How To Develop a Joomla Template from scratch

CheapWindowsHosting.com | Best and cheap joomla hosting. Do you Want a customized joomla template for the business requirements? It really is so easy to construct a template of one’s decision as an alternative to paying thousands for it. So lets commence now.

To produce a joomla template you may require at the least two files,

  1. templateDetails.xml which can be mainly configuration file containing info like autor name, e mail, template version, folders and file names and module names (we’ll discuss it leter).
  2. index.php which can be entry point for all pages
    These are standard files required to create a joomla template, but furthermore you will need some a lot more files to produce a beautiful and powerful template like css, images, language, javascript, html and so forth.

Now lets generate our xml file

<?xml version="1.0" encoding="utf-8"?>
 
<extension version="2.5" type="template" client="site">
<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>2.5.0</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 further files are right here like index.html (just to avoid 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 prepared, now produce your index.php file.

<?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/template_name/css/template.css" type="text/css">
</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 perform with joomla you’ve got to upload it below templates folder. Following uploading it to templates folder log in for your joomla administrator and open extensions -> Templates manger. Right here you’ll not be able to see your template as you expected. This can be since it calls for one more step, to set up the template. Ok, visit Extensions -> Extension Manager then click Learn tab now click on discover icon around the top-right corner from the page. It’s going to search all of the extensions accessible inside your joomla installation, here you will be able to see your template name, select it and click on set up icon on the top-right corner of the page. This will likely install your template. Now you happen to be done. Go to Extensions-> Template manager , right here you’ll be able to see your installed template.

About the Author

Alexia Pamelov administrator

Leave a Reply