Creating a Joomla templates is not very traft. Only learn some functions about joomla templates. Then you can develop of joomla templates. If you want to develop a joomla template you need to learn css and php. With tableless desgin a websites looks so preitty. So you need to know the css very well. In this post we will learn how to develop a joomla template and some of joomla templates functions. Here we only include some basic to joomla template content.

Joomla and joomla template

Joomla is a free and open source content management system (CMS) for publishing content on internet websites and it is a model–view–controller (MVC) Web application framework that can also be used independently.It is most popular and widely used. Joomla is written in php, object orientented php (oop). You can download latest version of this cms in joomla.org. Joomla is easy to use for developing a websites. It is also easy to maintain. Anybody can learn joomla and develop web pages.There no need to learn any language like php and css. it is user friendly and less time needed to create a website. So if anybody want to create a website without learning programming they can use joomla. But if you want to use it your own way you need to learn php and css languages.

Why need joomla Templates

In joomla software thier have default templates.They are simple good.In various websites there has a lot of joomla templates free or premimum. Morwe and more attractive templates are found. Sometimes need templates in different category. It is aalso found and freely. But when you want develop your own template, you need to learn this procedure.For this need to learn php nad css.

Joomla Templates resources

Various source are found for joomla resoures. There has joomla plugins, templates and more. Here include some good resourecs for joomla users

Customizing the zoomla template

In joomla you can customize joomla templates which are set in joomla default templates.If you want to customize the joomla template you need to firstly logged in the joomla software. After fininshing logged in now you go to template customize.

Hide Example Show Example

Creating a new joomla Templae

In this part you will learn the basic to advaneced part of developing a joomla template.

Template files structures

For this you need mimimum three files
1 a css file
2 a index file
3. a xml file
4. a optional image file ( a sample screenshot of your templates)

Firstly create a folder where all the files are located.And named it. Below one sample are given.

FirstTemplate/
 style/
  style.css
 images/
  thumbnail.jpg
 index.php
 templatedetails.xml

Creating a templateDetails.xml. Sample of the templatedetails.xml

After creating this structure of files and folders, then first working with templatedetails.xml.
Because it is most importatnt to creating a joomla template. Without this file joomla templates can not installor it is not shown in joomla.

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"  "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">  

 mynewtemplate
 2008-05-01
 John Doe
 john@example.com
 http://www.example.com
 John Doe 2008
 GNU/GPL
 1.0.2
 My New Template
 
  index.php
  templateDetails.xml
  images
  css
 
 
  breadcrumb
  left
  right
  top
  user1
  user2
  user3
  user4
  footer

1. This line denoted that it is xml file. It indicates that xml version 1.0 we are used.
2. Second line denoted the doctype or rules of joomla 1.6
3. After that the information are located in <intall></install> tag. This denoted that we are creating a template and using joomla 1.6 templates rules.
4. <name> Name of the template which will show in your cms
5. <creationDate> the templates created date
6. <authotr> Author name who created this template
7.<authorEmail> Author contact email
8.<authorUrl> If author have any websites then insert the url
9.<copyright> Copyright of this templtes
10. <license> license of this template
11.<version> version of this template
12.<description> Description of this template
13.<files> files and folders are located in this
14.<filename> Files are located in this tag
15.<folder> Folders are located in this tag
16.<positions> Positions are located i8n this tag
17.<position> Position name of this templates are given here. if you create more position in template you must denote here. Otherwise you can not create any position of this template.

Creating index file

Now create the main page of the template. The index.php is the file which shows the front page of the template.A sample index.php file are shown below.

<?php
 /** Copyright @ taslim**/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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" />
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?phpecho $this->template ?>/css/template.css" type="text/css" />
</head>

1. It is a php file. So start with php tag.
2. 3. defined('_JEXEC') or die; makes sure that this page is not access directly.
4. $app = JFactory::getApplication(); here $app is a variavle to grab different parameters.
5. end of the php tag.
6. In this line the doctype is declared for html file.
7. In this line the html tag is defined.
Here <?php echo $this->language; ?> defines the language .
8. In this line the head tag is defined.
9. In this line the header information is added.
10. In the 10,11,12 line the css file is included. Here <?php echo $this->baseurl?> is defined the baseurl of the site which you are created. <?php echo $this->template;?> is defined the template name.

More tags are added into <head></head> tag which are used in html file.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta  name="robots" content="index, follow" />
<meta  name="keywords" content="joomla, Joomla" />
<meta  name="rights" content="" />
<meta  name="language" content="en-GB" />
<meta  name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta  name="generator" content="Joomla! 1.6 -Open Source Content Management" />

The body tags are added after the </head> tag

<body>
 <?php echo $app->getCfg('sitename');?>
 <jdoc:include type="modules"  name="top" />
 <jdoc:include type="modules"  name="left" />
 <jdoc:include type="modules"  name="breadcrumbs" />
 <jdoc:include type="component" />
 <jdoc:include type="modules"  name="right" />
 <jdoc:include type="modules"  name="footer" />
 <jdoc:include type="modules"  name="debug" />
</body>

1. The start of <body> tag.
2. The site name
3. It defines a module at the top
4. It defines a module at the left
5. It defines a module at the breadcump which are used for navbar
6. In this line the main content and post of the sites are shown here
7. It defines a module at the left
8. It defines a module at the footer
9. It defines a module at the left
10.The end of <body> tag.
At the footer we can some information like this

The name of this site is <?php echo $mainframe->getCfg('sitename');?>
  
    The administrator email is <?php echo $mainframe->getCfg('mailfrom');?>
  
    This template is in the <?php echo $this->template?> directory
  
The URL is <?php echo JURI::base();?>

After all tghis we can add css to develop a tableless design.

The complete code of the index.php file

Here is the simple index.php file.

<?php
 /** Copyright @ taslim**/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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" />
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?phpecho $this->template ?>/css/template.css" type="text/css" />
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta  name="robots" content="index, follow" />
    <meta  name="keywords" content="joomla, Joomla" />
    <meta  name="rights" content="" />
    <meta  name="language" content="en-GB" />
    <meta  name="description" content="Joomla! - the dynamic portal engine and content management system" />
    <meta  name="generator" content="Joomla! 1.6 -Open Source Content Management" />
</head>

<body>
 <?php echo $app->getCfg('sitename');?>
 <jdoc:include type="modules"  name="top" />
 <jdoc:include type="modules"  name="left" />
 <jdoc:include type="modules"  name="breadcrumbs" />
 <jdoc:include type="component" />
 <jdoc:include type="modules"  name="right" />
 <jdoc:include type="modules"  name="footer" />
 <jdoc:include type="modules"  name="debug" />
</body>
</html>

finally add html tags to desgin with css in index.php file

<?php
 /*** @licenseGPL*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$leftcolgrid= "3";
$rightcolgrid = "3";
?>
<!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" />
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" />
    <?php
        if ($this->countModules('left') == 0):?>
            <?php $leftcolgrid= "0";?>
            <?php endif; 
        ?>
    <?php
        if ($this->countModules('right') == 0):?>
     <?php $rightcolgrid= "0";?>
     <?php endif; ?>
</head>
<body>
    <div id="header" class="container_12">
        <?php echo $app->getCfg('sitename');?>
        <jdoc:include type="modules"  name="top" style="xhtml" />
    </div>
    
 <div class="clear"></div>

 <div id="content" class="container_12">
        <?php if($this->countModules('left')) : ?>
             <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
             </div>
        <?php endif; ?>

        <div id="maincolumn" class="grid_<?php echo(12-$leftcolgrid-$rightcolgrid);?>">
            <jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />
            <jdoc:include type="component" />
        </div>
  
        <?php if($this->countModules('right')) : ?>
            <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
                 <jdoc:include type="modules"  name="right" style="xhtml" />
            </div>
        <?php endif; ?>
    </div>
 
    <div class="clear"></div>
    <div id="footer" class="container_12">
        <jdoc:include type="modules"  name="footer" style="xhtml" />
    </div>
    <jdoc:include type="modules"  name="debug" />
</body>
</html>

Now explain this templates three parts

<?php
        if ($this->countModules('left') == 0):?>
            <?php $leftcolgrid= "0";?>
            <?php endif; 
        ?>
    <?php
        if ($this->countModules('right') == 0):?>
     <?php $rightcolgrid= "0";?>
     <?php endif; ?>

This part defines that if you do not want the right side or left side column then it defines zero.

<div id="header" class="container_12">
        <?php echo $app->getCfg('sitename');?>
        <jdoc:include type="modules"  name="top" style="xhtml" />
</div>

This part is for get the sitename and add top modules.

<div id="content" class="container_12">
        <?php if($this->countModules('left')) : ?>
             <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
             </div>
        <?php endif; ?>

        <div id="maincolumn" class="grid_<?php echo(12-$leftcolgrid-$rightcolgrid);?>">
            <jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />
            <jdoc:include type="component" />
        </div>
  
        <?php if($this->countModules('right')) : ?>
            <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
                 <jdoc:include type="modules"  name="right" style="xhtml" />
            </div>
        <?php endif; ?>
    </div>

This part defines the 3 columns in the template layout. the left column is define the right column is define and middle column is define by 12-left column- right column

Creating the css file in joomla template

After all that design in your own way with css.

Whats functions you need to create a joomla templates

After all done it is the chart or list of functions for use in joomla.
A functions which is not directly accessed file.

<?php 
  defined( '_JEXEC' ) or die( 'Restricted access' );  
?>

Get a variable to grab some parameters

<?php   
  $app=Jfactory::getApplication();  
?>

Get the sitename

<?php 
 echo $app->getCfg('sitename'); 
?>

Get the email of author

<?php   
  <?php echo $app->getCfg('mailfrom');?>
?>

Get some information

 
 <?php echo $this->baseurl ?>
 <?php echo $this->template; ?>
 <?php echo $this->language; ?>

See the component or the main content of the site.

 
 <jdoc:include type="component" />

Define the modules in different positions.

 <jdoc:include type="modules"  name="breadcrumbs" style="xhtml" />  
 <jdoc:include type="modules" name="user1" /> 
 <jdoc:include type="modules"  name="right" style="xhtml" />  
 <jdoc:include type="modules" name="user2" /> 
 <jdoc:include type="modules" name="position-7" /> 
 <jdoc:include type="modules" name="user3" /> 
 <jdoc:include type="modules" name="user4" />

If statement

 <?php if(condition) : ?>
 <?php endif; ?>

Others tag

 
 <?php echo JURI::base();?>

Pages - পৃষ্ঠাসমূহ

Joomla Tutorial - Beginner to advanced joomla template tutorial