Joomla! Documentation - User contributions [en]

Creating a basic Joomla! template

2008-05-03T09:46:58Z

Confudler:

== Introduction ==

The purpose of this tutorial is to serve as an introduction to creating Joomla! templates. It will cover the essential files and code needed to create a basic template. The code is presented so it can be cut and pasted with very little modification needed.

== Setting up a directory structure ==
{{:Setting up a directory structure|Setting up a directory structure}}
{{:How to edit the files|How to edit the files}}
== Creating a basic templateDetails.xml file ==
{{:Creating a basic templateDetails.xml file}}

== Creating a basic index.php file ==
{{:Creating a basic index file}}
{{:Testing the template}}

== Conclusion ==

You should now have created a template that works. It won't look like much yet. The best thing to do now is start experimenting with the layout.

<noinclude>
[[Category:Templates]]
[[Category:Tutorials]]
</noinclude>

Creating a basic index file

2008-05-02T15:24:14Z

Confudler:

The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place php code where the content of your site should go. Here is the bare bones ready for you to cut and paste.

Lets start at the top:

<pre>
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >
</pre>
The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<pre>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/css.css" type="text/css" />
</head>
</pre>

The first line gets Joomla to put the correct header information in. The second creates a link to your style sheet. You will need to change this to the directory name that you chose.

Now for the main body:

<pre>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</pre>

Amazingly, this will suffice! Yes, its a very basic layout, but it will do the job. Everything else will be done by Joomla!. Note: you will need to ensure your menu is set to go into the top module.

Finish it off - one last bit:

<pre>
</html>
</pre>

Creating a basic index file

2008-05-02T15:23:35Z

Confudler:

Creating a basic index file

2008-05-02T15:22:25Z

Confudler:

The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place php code where the content of your site should go. Here is the bare bones ready for you to cut and paste.

Lets start at the top:

<pre>
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >
</pre>
The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<pre>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/css.css" type="text/css" />
</head>
</pre>

The first line gets Joomla to put the correct header information in. The second creates a link to your style sheet. You will need to change this to the directory name that you chose.

Now for the main body:

<pre>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
<pre>

Amazingly, this will suffice! Yes, its a very basic layout, but it will do the job. Everything else will be done by Joomla!. Note: you will need to ensure your menu is set to go into the top module.

Finish it off - one last bit:

<pre>
</html>
<pre>

Creating a basic index file

2008-05-02T15:05:03Z

Confudler: New page: The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place php code where the content of your site should go. For ...

The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place php code where the content of your site should go.
For many reasons (such as: bandwidth, accessibility, and W3C standards compliance) you will want to make the index.php file as small as possible and use a separate css file for styling. This example will show how to create a simple layout using the
tag.

Lets start at the top:

<pre>
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >
</pre>
The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<pre>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/css.css" type="text/css" />
</head>
</pre>

The first line gets Joomla to put the correct header information in. The second creates a link to your style sheet. You will need to change this to the directory name that you chose.

Now for the main body:

<body>
</body>

Creating a basic Joomla! template

2008-05-02T15:04:03Z

Confudler:

What is the purpose of the index.php file?

2008-05-02T14:58:49Z

Confudler: New page: The index.php file is the skeleton of the website. Every page that Joomla! delivers is "index.php" fleshed out with a selection of content inserted from the database. The index.php file ...

The index.php file is the skeleton of the website. Every page that Joomla! delivers is "index.php" fleshed out with a selection of content inserted from the database.

The index.php file for a template contains a mixture of code that will be delivered as it is, and php code, which will be modified before it is delivered. The code will be familiar to anyone who has designed a simple html webpage: there are 2 main sections - the <head> and <body>. Where index.php differs is the use of php code to insert information selected from a database.

Here is an example:

A tradition HTML head section:

<pre>
<head>
<title>My Example Webpage</title>
<meta name="title" content="example" />
<link rel="stylesheet" href="www.example.com/css/css.css" type="text/css" />
</head>
</pre>

And the same thing done the Joomla! way:

<pre>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>templates/mytemplate/css/css.css" type="text/css" />
</head>
</pre>

So, instead of these header parts being defined on the index.php file, the header parts are looked up from the database by bits of php code. The clever part is that both these scripts will deliver the same code to a user. If you look at the code of a joomla website, all the <?php blah /> will have been replaced by regular html code.

Good template design

Index.php should be as bare-boned as you can make it because it will be re-sent every time a new page is loaded. Elements such as styling should be delivered in css files that are saved in the users cache. The tutorials here will go through the technical aspects of creating your index.php.

Why index.php?

Index.htm has historically been the name given to the home page of a website. Thus when a user navigates to www.example.org, the webserver delivers www.example.org/index.htm. Because Joomla! is written in PHP, index.php is the automatically served file. To futher complicate things, when a user navigates to the joomla website, the index.php of the root directory redirects to the index.php of the current default template.

Creating a basic Joomla! template

2008-05-02T13:40:50Z

Confudler:

== Setting up a directory structure ==

{{:Setting up a directory structure|Setting up a directory structure}}

{{:How to edit the files|How to edit the files}}

== Creating a basic templateDetails.xml file ==

{{:Creating a basic templateDetails.xml file|Creating a basic templateDetails.xml file}}

== Creating a basic index.php file ==

{{:Creating a basic index.php file|Creating a basic index.php file}}

{{:Testing the template|Testing the template}}

<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Tutorials]]</noinclude>

Talk:Creating a basic Joomla! template

2008-05-02T13:39:16Z

Confudler: New page: OK, something has gone wrong here. I edited the "creating an index.php file" and it went wrong - renamed itself 404.shtml. It refused to allow editing of the "creating" file so I tried mak...

OK, something has gone wrong here. I edited the "creating an index.php file" and it went wrong - renamed itself 404.shtml. It refused to allow editing of the "creating" file so I tried making a new one "create". Now I can't access either to edit them.

Creating a basic Joomla! template

2008-05-02T13:35:14Z

Confudler:

== Setting up a directory structure ==

{{:Setting up a directory structure|Setting up a directory structure}}

{{:How to edit the files|How to edit the files}}

== Creating a basic templateDetails.xml file ==

{{:Creating a basic templateDetails.xml file|Creating a basic templateDetails.xml file}}

== Creating a basic index.php file ==

{{:Create a basic index.php file|Create a basic index.php file}}
{{:Creating a basic index.php file|Creating a basic index.php file}}

{{:Testing the template|Testing the template}}

<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Tutorials]]</noinclude>

Creating a basic Joomla! template

2008-05-02T13:29:15Z

Confudler:

== Setting up a directory structure ==

{{:Setting up a directory structure|Setting up a directory structure}}

{{:How to edit the files|How to edit the files}}

== Creating a basic templateDetails.xml file ==

{{:Creating a basic templateDetails.xml file|Creating a basic templateDetails.xml file}}

== Creating a basic index.php file ==

{{:Create a basic index.php file|Create a basic index.php file}}

{{:Testing the template|Testing the template}}

<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Tutorials]]</noinclude>

404.shtml

2008-05-02T13:27:42Z

Confudler: 404.shtml moved to Create a basic index.php file: don't know why it changed to 404.shtml

#REDIRECT [[Create a basic index.php file]]

Create a basic index.php file

2008-05-02T13:27:42Z

Confudler: 404.shtml moved to Create a basic index.php file: don't know why it changed to 404.shtml

The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place php code where the content of your site should go.

For many reasons (such as: bandwidth, accessibility, and W3C standards compliance) you will want to make the index.php file as small as possible and use a separate css file for styling. This example will show how to create a simple layout using the <div> tag.

Lets start at the top:

<pre>
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >
</pre>

The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<pre>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/css.css" type="text/css" />
</head>
</pre>

The first line gets Joomla to put the correct header information in. The second creates a link to your style sheet. You will need to change this to the directory name that you chose.

Now for the main body:

<pre>
<body>
</body>
</pre>

Creating a basic Joomla! template

2008-05-02T13:25:22Z

Confudler: /* Creating a basic templateDetails.xml file */

Creating a basic Joomla! template

2008-05-02T13:24:36Z

Confudler:

== Setting up a directory structure ==

{{:Setting up a directory structure|Setting up a directory structure}}

{{:How to edit the files|How to edit the files}}

== Creating a basic templateDetails.xml file ==

{{:Creating a basic templateDetails.xml file|Creating a basic templateDetails.xml file}} (not needed???)

== Creating a basic index.php file ==

{{:Creating a basic index.php file|Creating a basic index.php file}}

{{:Testing the template|Testing the template}}

<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Tutorials]]</noinclude>

Create a basic index.php file

2008-05-02T13:22:29Z

The index.php file becomes the core of every page that Joomla! delivers. Essentially, you make a page (like any html page) but place php code where the content of your site should go.

For many reasons (such as: bandwidth, accessibility, and W3C standards compliance) you will want to make the index.php file as small as possible and use a separate css file for styling. This example will show how to create a simple layout using the <div> tag.

Lets start at the top:

<pre>
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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; ?>" >
</pre>

The first line stops naughty people looking at your coding and getting up to bad things. The second tells the browser (and webbots) what sort of page it is. The third line says what language the site is in.

Now the header for real:

<pre>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/css.css" type="text/css" />
</head>
</pre>

The first line gets Joomla to put the correct header information in. The second creates a link to your style sheet. You will need to change this to the directory name that you chose.

Now for the main body:

<pre>
<body>
</body>
</pre>

Creating a basic templateDetails.xml file

2008-05-02T12:50:35Z

Confudler:

The templatedetails.xml file is essential. Without it, your template won't be seen by Joomla!. The file holds key "metadata" about the template.

Lets look at an example:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>1/5/08</creationDate>
<author>Joe Bloggs</author>
<authorEmail>Joe@bloggs.com</authorEmail>
<authorUrl>http://www.joebloggs.com</authorUrl>
<copyright>joe bloggs 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/background.png</filename>
<filename>css/css.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>

</install>
</pre>

So, as you can see, we have a set of information between markup tags ( the <thing> ). Your best approach is to cut and paste this into your "templatedetails.xml" file and change the relevant bits (such as <name> <author> ).

The <files> part should contain all the files that you use - you possibly don't know what they are called yet - don't worry update it later.

Leave the positions as they are - these are a common set so you will be able to switch easily from the standard templates.

Creating a basic templateDetails.xml file

2008-05-02T12:49:01Z

Confudler:

The templatedetails.xml file is essential. Without it, your template won't be seen by Joomla!. The file holds key "metadata" about the template.

Lets look at an example:

<pre>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>1/5/08</creationDate>
<author>Joe Bloggs</author>
<authorEmail>Joe@bloggs.com</authorEmail>
<authorUrl>http://www.joebloggs.com</authorUrl>
<copyright>joe bloggs 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/background.png</filename>
<filename>css/css.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>

</install>
</pre>

So, as you can see, we have a set of information between markup tags ( the <thing> ). Your best approach is to cut and paste this into your "templatedetail.xml" file and change the relevant bits (such as <template name> <author> ).

The <files> part should contain all the files that you use - you possibly don't know what they are called yet - don't worry do it later

Leave the positions as they are - these are a common set so you will be able to switch easily from the standard templates.

Creating a basic templateDetails.xml file

2008-05-02T12:43:07Z

Confudler:

The templatedetails.xml file is essential. Without it, your template won't be seen by Joomla!. The file holds key "metadata" about the template.

Lets look at an example:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>1/5/08</creationDate>
<author>Joe Bloggs</author>
<authorEmail>Joe@bloggs.com</authorEmail>
<authorUrl>http://www.joebloggs.com</authorUrl>
<copyright>joe bloggs 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/background.png</filename>
<filename>css/css.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>

</install>

So, as you can see, we have a set of information between markup tags ( the <thing> ). Your best approach is to cut and paste this into your "templatedetail.xml" file and change the relevant bits (such as <template name> <author> ).

The <files> part should contain all the files that you use - you possibly don't know what they are called yet - don't worry do it later

Leave the positions as they are - these are a common set so you will be able to switch easily from the standard templates.

Creating a basic Joomla! template

2008-05-02T12:26:05Z

Confudler:

Setting up a directory structure

{{:Setting up a directory structure|Setting up a directory structure}}

{{:How to edit the files|How to edit the files}}

Creating a basic templateDetails.xml file

{{:Creating a basic templateDetails.xml file|Creating a basic templateDetails.xml file}} (not needed???)

{{:Creating a basic index.php file|Creating a basic index.php file}}

{{:Testing the template|Testing the template}}

<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Tutorials]]</noinclude>

Creating a basic Joomla! template

2008-05-02T12:25:00Z

Confudler:

Setting up a directory structure

{{:Setting up a directory structure|Setting up a directory structure}}

{{:How to edit the files|How to edit the files}}

{{:Creating a basic templateDetails.xml file|Creating a basic templateDetails.xml file}} (not needed???)

{{:Creating a basic index.php file|Creating a basic index.php file}}

{{:Testing the template|Testing the template}}

<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Tutorials]]</noinclude>

Setting up a directory structure

2008-05-02T12:17:46Z

Confudler:

To make the most basic template, create a new folder in the "templates" folder. Name this folder after your template i.e. "mynewtemplate".

Using a text editor (or dedicated html/php/xml/css editor such as dreamweaver) create the files "index.php", "templatedetails.xml"

To keep things organised, make 2 new folders called "images" and "css". Insided the "css" folder create a file called "css.css"

This is the most basic practical setup. Theoretically, the css could be missed out but if you place the styling information within your "index.php" it will bloat the size of webpages and give a poor user experience.

Setting up a directory structure

2008-05-02T12:17:23Z

Confudler: New page: To make the most basic template, create a new folder in the "templates" folder. Name this folder after your template i.e. "mynewtemplate". Using a text editor (or dedicated html/php/xml/cs...

To make the most basic template, create a new folder in the "templates" folder. Name this folder after your template i.e. "mynewtemplate".
Using a text editor (or dedicated html/php/xml/css editor such as dreamweaver) create the files "index.php", "templatedetails.xml"
To keep things organised, make 2 new folders called "images" and "css". Insided the "css" folder create a file called "css.css"

This is the most basic practical setup. Theoretically, the css could be missed out but if you place the styling information within your "index.php" it will bloat the size of webpages and give a poor user experience.

Taking the website temporarily offline

2008-05-02T11:59:01Z

Confudler:

{{cookiejar}}
To take a Joomla! site temporarily offline:

Log in to administration

Click on "Global Configuration"

Where it says "site offline" change the radio button from "no" to "yes"

You may change the offline message

The site has now been replaced by a page with: the Joomla logo; your message; a log-in for registered users