Creating a Joomla Template

Blog Site

Development Blog

Monday, 24 May 2010 14:38

Written by Miguel

Joomla makes use of templates to present your website information to the frontend user. All templates are stored in a folder entitled templates inside your Joomla installation directory. To create a new template, create a folder and name it mytemplate.

As with all other extensions (components, modules and plugins), Joomla gathers information about your template by reading the XML in your template folder. So let's create our XML file.
Create a new XML file inside the mytemplate folder and name it templateDetails.xml.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5">
<name>mytemplate</name>
<creationDate>2010-04-20</creationDate>
<author>Go Fish Client Catchers</author>
<authorEmail> This e-mail address is being protected from spambots. You need JavaScript enabled to view it </authorEmail>
<authorUrl>http://www.gofishcc.com</authorUrl>
<copyright>Go Fish Client Catchers</copyright>
<license>GNU/GPL</license>
<version>1.0</version>
<description>My Template</description>
<files>
<filename>index.php</filename>
<filename>component.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/background.png</filename>
<filename>css/style.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>

Next, create a new folder inside the mytemplate folder and name it CSS. Inside the CSS folder create a new file, name it styles.css, and code your style sheet as desired.

Create a new file in the mytemplate folder and name it index.php. This will be the basis of every page on your website. All content will be displayed inside the index.php file. Let's look at the basic code:

<!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="language; ?>" lang="language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/internet-marketing-blog/baseurl ?>/templates/mytemplate/css/style.css" />
</head>
<body>
<jdoc:include type="modules" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" />
</body>
</html>

The first lines of code (just before the head tags) stop people from viewing your codeand informs the browser of the site language and type of page.

The first line between the head tags loads the header information such as page titles and scripts used by the different extensions. The next line calls the style sheet, style.css.

Between the body tags, are defined module positions and where to display the component content such as articles. Let's take a closer look:

<jdoc:include type="modules" />
This line of code defines where to display modules set to the position "top".

<jdoc:include type="message" />
This line of code defines where to display system messages.

<jdoc:include type="component" />
This line of code defines where to display component content such as your articles.

<jdoc:include type="modules" />
This line of code defines where to display modules set to the position "bottom".

Making use of DIVs, tables etc., you can structure your webpage to suit your desired look and feel.

To package the module for installation and distribution, simply zip all the files, and name your zip file mytemplate.zip.

Last modified on Friday, 04 June 2010 07:21

Read 3767 times | Like this? Tweet it to your followers!

Published in Development Blog

Miguel

E-mail: This e-mail address is being protected from spambots. You need JavaScript enabled to view it

Latest from Miguel

More in this category: « CodeIgniter 2.0 – Pushing Web Application Development Forward Creating a Joomla module »

1 Comment

Comment Link Friday, 04 June 2010 10:03 posted by Farai
Super duper awesome Migs! Well explained my mom who is a farmer will understand this. This is very helpful. Many thanks!
This e-mail address is being protected from spambots. You need JavaScript enabled to view it