Template Files

Note that starting developing any template you start with making copy of some existing template.  Open resources template manager, chose folder with template types you need (template that looks mostly like you need) and copy one of the templates with the new name. This will prevent missing changes on template or component update.

If it is records list template, you also have to change name of template.

If you create table style Record List template you should copy default template for easier change. Because default  template is table style. For any other template copy joomla_blog.

Now find template files with your new name.

• For list, category index, filter  /components/com_resource/vews/list/tmpl/*
• For article, comments, article forms /components/com_resource/vews/article/tmpl/*
• For rating /components/com_resource/vews/rating_tmpls/*

Template Parameters

Edit your_template.xml file. Change author, contacts and copyright information. Also you may use this file to add parameters to template. User will be able to set template parameters in template properties. Those properties are accessed simply by clicking on template name in templates list.

Because all template parameters are loaded in to global parameter object  it is essential that you make unique parameter names. For example btr_mp_show_logo. Where  btr_ is a short of your company name, mp_ is a short of template name and show_logo is the parameter name. So you can access this parameter in code.

<?php  echo $this->params->get(‘btr_mp_show_logo’); ?>
 

Important to know that for “Section Pack” compatibility you need to follow one rule. If you ever in parameter allow user to chose fields and parameter refer to field ID, then you should make sure that name contain field_ in it. For example: btr_mp_field_map. When section is packed and then installed on other Joomla the field IDs getting changed. So to touch template parameters and replace packed IDs with new created IDs you should follow this rule.

Personal Experience

I do not know if it will be applicable for you but I will share my personal experience of developing new template.
Right after copying template I open it in editor and then right after  <?php defined('_JEXEC') or die('Restricted access'); ?> I insert <?php return; ?>. After this line template stop displaying.  And then I start add template structure. Blocks, divs, tables, … After I create main structure which looks nice, I start to place different things (record properties  like title, rating, comments number, …) I copy those from template below under <?php return; ?> and paste to new part over <?php return; ?>.

All Templates

There is no better way to learn then to see code of other people. So please look code of templates to access all possible variables. The only suggestion I can give that, if you do not know what variable content, you can use:

var_dump(htmlspecialchars($variable));

htmlspecialchars() will show html in variable which you may not see using simple echo() or print_r() and var_dump() will tell you type of the variable and its content.

Article Fields

If you list all fields in a cycle then just copy field cycle from any template. If you want to call field explicitly you may use this:

<?php if(@$item->fields[23]): ?>
    <span><?php echo $item->fields[23]->result; ?></span>
<?php endif; ?>
 

Where 23 is an ID of the field.

If you want to set field in template parameters you may use this in XML file

<params addpath="/components/com_resource/elements">
      <param name="tpl_gm_field_add" type="jsfields" label="Address" filters="'address'" />
</params>

• Make sure to add addpath attribute to <params > tag which enclose all parameters
• Filters attribute allows you to list fields of only certain type. For example you want only text, textarea, html. Then as filter attribute you add filters=” ’text’,’ textarea’, ‘html’ ”; It is very useful. For example you want to make special position in your template for price or logo. Then you list only picture or price field types for easier setup by template users.

And after that in code you may use this

<?php if(@$item->fields[$this->params->get(‘tpl_gm_field_add’)]): ?>
    <span>
        <?php echo $item->fields[$this->params->get(‘tpl_gm_field_add’)]->result; ?>
    </span>
<?php endif; ?>
 

If you want just to called explicitly few fields and other fields fetch as usually you may add to fields foreach

<?php if($field->fid == 23) continue; ?>
 

Or

<?php if($field->fid == $this->params->get(‘tpl_gm_field_add’)) continue; ?>

Right after

<?php foreach($item->fields AS $field):?>
 

Form Fields

If you want to call form field explicitly to place every field to custom location in template use this

<?php echo $this->fields[24]->result; ?>
 

Where 24 is an ID of the field.

Article Templates

You can reposition/overwrite comments in to article template. For example you want your article template be in 2 columns. 1st column is an article and 2nd column is a comments. You can do it easily by placing following code anywhere in article template.

<?php if($this->params->get('comments')):?>
        <?php echo $this->loadTemplate('comments');?>
<?php endif;?>
 

Another feature is to load module just inside temple. It is also useful for creating templates like YouTube where similar and the same author videos displayed in right column and in Joomla that would be modules. Also for creating commerce sites for example you want to show “Those who buy this also buys” module in article detail only. It is hard to do with Joomla Itemid system. But if you call needed module just inside template you know that it will appear only in that particular place. And if user lose Itemid somehow (which is known fact happens from time to time)  it will be there anyway.

To call any module position use this

<?php echo load_module_position('myposition1', ‘table’); ?>
 

First parameter is the name of position to load and you can name it as you want. But not forget to add this position to your Joomla template XML file (templateDetails.xml) to <positions> tag to make this position available to place modules in to. Second parameter is the style which is used to display module. It is absolutely the same parameter as if you use it in Joomla template in style attribute like this

<jdoc:include type="modules" name="user1" style="rounded" />
 

It may have values: rounded, table, xhtml, horiz, none

Record Object

To get link to article use $item->link. For example:

<a href="<?php echo $item->link; ?>">Article</a>

To check if record is featured use $item->featured

if($item->featured)
{
     echo "This Item Is Featured";
}

To check if record is new in list template or never viewed by visitor use $item->isNew. This may be used to mark article bold or attach picture "NEW"

Filters Template

If you want to call filter explicitly for placing it in custom position in your template you may use $this->ifilters and $this->ifilters_ext variables.

$this->ifilters is an array contain all field’s filters. I mean fields that you set to be filters. 
 

Example of custom filter use

$year = $this->ifilters[23];
$year_values = $year['values'];
$year_filter = $year['filter'];
 

Where  23 is an ID of the field, $year['values']  is an array of values of the filter and $year['filter'] is an filter object. You may use it to get filter title for example $year['filter']->title;.

Based on $year['values']  array you may create list of checkboxes or select list or radio list with this array.  Please look modern or compact templates for multi value checkbox filter example and default filter template for single value select filter example.

The $this->ifilters_ext object is differ. This is one level array. You may use it like this

<?php echo $this->ifilters_ext[1]->title ?>: <?php echo $this->ifilters_ext[1]->result; ?>
 

Where 1 is an ID of extended filter in Filters section of resources in backend.

Template Files

Every template can have 6 files and 1 folder. Let say our article template name is default_article_mytpl.php.

Then you may create files

• default_article_mytpl.php - template file itself
• default_article_mytpl.xml – contain template parameters
• default_article_mytpl.ini – generated automatically when user save template parameters. Note that is you pack INI file then user parameters will be reseted on every template update. On other hand if it is not included, you should make sure that all parameters in template have default value. For example
  

  <?php  echo $this->params->get(‘btr_mp_show_logo’, ‘images/stories/defaultlogo.png’); ?>

• default_article_mytpl.png – Small screenshot of your template to preview. The usually size is not more than 300x300 px. But you may do it bigger. Just be sure it fit page nicely on 1024x768 resolution screens.
• default_article_mytpl.css – put all template CSS here. It will be automatically linked.
• default_article_mytpl.js – put all java script in this file and it will be automatically loaded.
• And folder default_article_mytpl in the same directory where files are located. This folder may contain images that is used by template or any other useful things.  If you save all files used by template there you may be sure that on “Section Pack” all those file will be packed along.

Create Installation Package

There is 2 ways of creating installation package. First is very simple. Just pack all files in to zip. If you pack few templates you may arrange files in to sub folders, but actually no matter how you packed them, installer will determine by name the purpose of the file and copy it to correct location.

This pack will be nice only to install thru template manager.

If you want your template pack to install through Joomla installer, then you need to read about how to create Joomla installer packages. This ability is beyond subject of this tutorial.