M and W Handcrafted Web Communication Blogs

M&W blog #2 - Create a joomla! Template from scratch.


There are a lot of free joomla! Templates available, even for free, but what to do if there is none available that fits your needs? You can pay someone to create a template or, if your needs are not to complex, you can try to create a new template from scratch on your own. In this part we will explain how to create a basic joomla! template. In the next blog we will explain how to use frameworks like twitter bootstrap and how to make your template responsive.

BTW: template development is way easier if you install a joomla! system locally on your computer. There are some good tutorials out there, check google.com.

What we need is a Text Editor and a zip program. Notepad would be sufficient and the Windows building zip program also but there is better software available. Notepad++ http://notepad-plus-plus.org/ and 7-Zip are pretty nice free alternatives. We will use them in this tutorial. And we will create a template for Joomla! 2. x.


Preparing the basic structure


We need to create a basic file/folder structure for our new template. I will call my template and the base folder ‘my_template’. All files and subfolders will be placed here.

Folder and files


We need at least the following files:

Index.php - The basic template file that will be used to generate the joomla! pages.
templateDetails.xml - Meta information goes into this file, xml style.

\my_template\
\my_template\index.php
\my_template\templateDetails.xml

Index.php


Plain and simple index.php file. No formatting, no nothing, just show something.
<?php // make sure that all code is not visible if someone try to // access pages without joomla defined('_JEXEC') or die; ?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"> <head> <jdoc:include type="head" /> </head> <body> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html>

templateDetails.xml


This is the basic description of the template. Please change it to fit your needs. BTW: for testing purposes there is no need to change anything.
<?xml version="1.0" encoding="utf-8"?> <extension version="1.6" type="template"> <name>my_template</name> <creationDate>2012-12-29</creationDate> <author>John Doe</author> <authorEmail>john@example.com</authorEmail> <authorUrl>http://www.example.com</authorUrl> <copyright>John Doe 2012</copyright> <license>GNU/GPL</license> <version>0.1</version> <description>My Template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files>

Now we have our basic template. Zip the folder and install it to your joomla! installation.

Install the template


Open your Joomla! admin control panel use the extension manager to install the new template. Then open the template manager and make your new template default for your joomla! installation (Click the star in the Default column.)

joomla! Web Blog

Well done, your first joomla! template. Pretty simple, no styling but it works.

Changing the template – adding some style


From here we have different ways to change the template.
  • If you have a local installation You can simply go to your joomla directory and from there to templates\your_template_name. You can change files with your favorite text editor and create new folders as needed.
  • Remote installation with ssh access You can simply change and create all files and folders you need your favorite editor.
  • Remote installation without ssh access You can do all necessary with your ftp client
  • Remote installation without ssh and ftp access You can change your template locally, zip it and upload it again. But I would suggest a local installation for development and then upload the finished template.

Adding some style to your template


The basic template looks a little bit odd but that’s how a page looks without any css styles.

Add the style info to index.php

<link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/<?php echo $this->template ?> /css/style.css" type="text/css"

Add the following line to the head section of index.php

Create a css folder and a file ‚style.css’ in the css folder.

Style.css

html, body { background: #00FF00; }

templateDetails.xml


Add a line for the css folder to your templateDetails.xml
<?xml version="1.0" encoding="utf-8"?> <extension version="1.6" type="template"> <name>my_template</name> <creationDate>2012-12-29</creationDate> <author>John Doe</author> <authorEmail>john@example.com</authorEmail> <authorUrl>http://www.example.com</authorUrl> <copyright>John Doe 2012</copyright> <license>GNU/GPL</license> <version>0.1</version> <description>My Template</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>templateDetails.xml</filename> <folder>css</folder> </files> </extension>

Now you should have a nicely colored background in your template.

joomla! Web Blog

Adding more styles


From here you can start to add more and more css to your template. Available classes can be found in one of the templates that comes with joomla.

Changing the template – adding module positions


To place the menu and other modules or components we need some module positions. To create this, add the following lines to the index.php and templateDetails.xml.

Changing the template – adding module positions


Adding ‘position-7’ – the main menu
We will add position-7 to our template. In the joomla! default installation the main menu is places in position-7.

Index.php


<jdoc:include type="modules" name="position-7" />

templateDetails.xml


<positions> <position>position-7</position> </positions>

That should give you something like this:

joomla! Web Blog

From here you can go on and add styles and positions as you need them. Have fun!


join us on facebook

Contact us to discuss your project: wlainenaida@mandw.de    mkaiser@mandw.de



© mario kaiser / warren laine-naida 2014 impressum/legal