1.
Creating Custom Templates
for Joomla! 2.5
Dallas/Fort Worth Joomla User Group
January 14, 2013
www.KatalystCreativeGroup.com

2.
A Bit About Me: Don Cranford
• Partner / Lead Developer at Katalyst Creative
Group
• Web Design/Dev, Branding, Content, SEO
• Started using Joomla! (Mambo) in 2004
• Joomla! is our primary tool, but also do some
WordPress and Drupal.
• Custom Joomla! templates and extensions.
www.KatalystCreativeGroup.com

3.
Today We’ll Cover:
• Custom Template Basics for Joomla! 2.5
• File Structure
• templateDetails.xml
• index.php
• CSS
www.KatalystCreativeGroup.com

4.
Today We’ll Cover:
• Advanced Topics
• HTML Overrides
• Parameters
• Language Overrides
• Installation
www.KatalystCreativeGroup.com

5.
Creating Custom Templates for Joomla! 2.5
THE BASICS

6.
Template File Structure
• Required Files:
• index.php
• templateDetails.xml
• template_thumbnail.png
• css folder
• Folder must be named “css”
www.KatalystCreativeGroup.com

7.
Template File Structure
• Optional Files
• html (folder… used for overrides)
• language (for language overrides)
• error.php (to override 404… errors page layout)
• component.php (to override component layout)
• template_preview.png
www.KatalystCreativeGroup.com

8.
Template File Structure
• Show image here…
www.KatalystCreativeGroup.com

9.
templateDetails.xml
• Used during the installation process
• Tells what files to install
• Provides the optional parameters
• Used in configuring the style options.
www.KatalystCreativeGroup.com

10.
templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN"
"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">
<name>mytemplate1</name>
<creationDate>January 14, 2013</creationDate>
<author>My Name</author>
<authorEmail>My Email</authorEmail>
<authorUrl>http://www.my-url.com</authorUrl>
<copyright>Copyright Info Goes Here</copyright>
<license>Copyright License Goes Here</license>
<version>2.5.0</version>
<description>TPL_MYTEMPLATE1_XML_DESCRIPTION</description>
www.KatalystCreativeGroup.com

11.
templateDetails.xml
<files>
<folder>css</folder>
<folder>html</folder>
<folder>images</folder>
<folder>javascript</folder>
<folder>fonts</folder>
<folder>language</folder>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>component.php</filename>
<filename>error.php</filename>
</files>
www.KatalystCreativeGroup.com

12.
templateDetails.xml
<positions>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
…
<position>position-15</position>
</positions>
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_mytemplate1.ini</language>
<language tag="en-GB">en-GB/en-GB.tpl_mytemplate1.sys.ini</language>
</languages>
www.KatalystCreativeGroup.com

13.
templateDetails.xml
<config>
<fields name="params">
<fieldset name="advanced">
<field name="wrapperSmall" type="text" default="53"
label="TPL_MYTEMPLATE1_FIELD_WRAPPERSMALL_LABEL"
description="TPL_MYTEMPLATE1_FIELD_WRAPPERSMALL_DESC"
filter="integer" />
…
</fieldset>
</fields>
</config>
</extension>
www.KatalystCreativeGroup.com

14.
index.php
• The primary file that controls the layout.
• Can use regular php within the file
• Uses tags (<jdoc include type=“…” />) to
determine where to output different pieces
• <jdoc include type=“head” />
• <jdoc include type=“component” />
• <jdoc include type=“module” name=“*position+” />
• <jdoc include type=“message” />
www.KatalystCreativeGroup.com

15.
Creating Custom Templates for Joomla! 2.5
ADVANCED TOPICS

16.
Html Overrides: What Are They?
• Override the layout for any MVC components
and modules
• MVC = Model, View, Controller
• Gives Joomla tremendous flexibility!
www.KatalystCreativeGroup.com

17.
Html Overrides: How To?
• Create folder name that corresponds to
component or module under html
• Create folder name that corresponds to the
view name (ie. html/com_content/article)
• Create default.php file
• Can copy from the original as a starting point
• Ex: html/com_content/article/default.php
www.KatalystCreativeGroup.com

18.
Template Parameters
• Derived from the templateDetails.xml
• <config><fields name=“params”>…</fields></config>
• Each parameter defined as a field
<field name=“…” type=“text” default=“…”
label=“*language string from language file+”
description=“*language string+” />
www.KatalystCreativeGroup.com

19.
Template Parameters
• Access in the index.php with:
• $this->params->get(‘*parameter field name+');
www.KatalystCreativeGroup.com

20.
Template Parameters
Configure the parameters in the Joomla Template admin
www.KatalystCreativeGroup.com

21.
Language: Files & Overrides
• Provides the text for the language strings in
the template
• Two files in the language/en-GB/ folder
• en-GB.tpl_mytemplate1.ini
• Language strings used in the template
• en-GB.tpl_mytemplate1.sys.ini
• Language strings used in installation and admin
www.KatalystCreativeGroup.com

22.
Creating Custom Templates for Joomla! 2.5
INSTALLATION

23.
Installation
• Create archive (.zip or .tar.gz) file
• Install like any other extension in Control Panel
• Extensions >> Extension Manager >> Install
• Discover
• Copy folder and files to templates directory
• Extensions >> Extension Manager >> Discover
• Click Discover button
• Select and install
www.KatalystCreativeGroup.com

24.
Creating Custom Templates for Joomla! 2.5
FOR MORE GUIDANCE

25.
Resources
• http://magazine.joomla.org/issues/issue-may-
2012/item/740-How-to-convert-Joomla-15-template-to-
Joomla-25
• http://docs.joomla.org/Category:Template_Development
www.KatalystCreativeGroup.com

26.
Get In Touch
• www.katalystcreativegroup.com
• dcranford@katalystcg.com
• @katalystsol.com
• 817-900-8787
www.KatalystCreativeGroup.com

27.
Creating Custom Templates
for Joomla! 2.5
www.KatalystCreativeGroup.com