Actions

User

Difference between revisions of "Rvsjoen/tutorial/Developing a Template/Part 01"

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing a Template
(Creating the manifest)
m
 
(7 intermediate revisions by one user not shown)
Line 8: Line 8:
 
== Creating the index file ==
 
== Creating the index file ==
  
This is where it all starts, the "root" of your template so to speak.
+
This is where it all starts, the "root" of your template so to speak, this file is responsible for rendering a properly structured HTML document. This file will exists in all templates.
  
 
With your favorite editor, create the following file
 
With your favorite editor, create the following file
Line 15: Line 15:
 
'''<tt>index.php</tt>'''
 
'''<tt>index.php</tt>'''
 
<source lang="php">
 
<source lang="php">
 
+
<?php
 +
 +
/**
 +
* @package    Joomla.Tutorials
 +
* @subpackage  Template
 +
* @copyright  Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
 +
* @license    License GNU General Public License version 2 or later; see LICENSE.txt
 +
*/
 +
 +
// No direct access to this file
 +
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>
 
</source>
 
</source>
 
</span>
 
</span>
 +
 +
As you can see, this is a '''very''' basic PHP file, yet in only a few lines of markup we have accomplished the following things
 +
 +
* We have declared the document type to be <code><!DOCTYPE html></code> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [http://www.w3.org/QA/2002/04/valid-dtd-list.html]
 +
* We have enforced that our document must conform to the XHTML namespace through the '''xmlns''' attribute
 +
* We have included a head in the html document
 +
* We have included a body in the html document
 +
 +
Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <code><head></code> element. We also told Joomla! that we want system messages to appear in the top of the <code><body></code> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.
 +
 +
There are several other types of jdoc include tags that we will cover later in this tutorial. What is important to know is that whenever you see one of them, it means that Joomla! may or may not insert content in it's location.
  
 
== Creating the manifest ==
 
== Creating the manifest ==
Line 47: Line 80:
 
== Installation and Testing ==  
 
== Installation and Testing ==  
  
Before testing your shiny new module you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.
+
Before testing your shiny new template you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.
  
 
=== Installing your template===
 
=== Installing your template===
Line 75: Line 108:
  
 
== Download this part ==
 
== Download this part ==
 +
 +
{{:Chunks:Developing_a_Template_Contents}}

Latest revision as of 05:19, 16 April 2012

Contents

Developing a Basic Template

Alright, lets get cracking on this awesome adventure towards template independence. Creating a basic template is in reality pretty simple, all we need is two things.

  • A template manifest
  • A template index file

Creating the index file

This is where it all starts, the "root" of your template so to speak, this file is responsible for rendering a properly structured HTML document. This file will exists in all templates.

With your favorite editor, create the following file

index.php

<?php
 
/**
 * @package     Joomla.Tutorials
 * @subpackage  Template
 * @copyright   Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
 * @license     License GNU General Public License version 2 or later; see LICENSE.txt
 */
 
// No direct access to this file
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>

As you can see, this is a very basic PHP file, yet in only a few lines of markup we have accomplished the following things

  • We have declared the document type to be <!DOCTYPE html> which means that we are creating a HTML5 template. For a complete list of recommended doctypes please see [1]
  • We have enforced that our document must conform to the XHTML namespace through the xmlns attribute
  • We have included a head in the html document
  • We have included a body in the html document

Pay special attention to the jdoc include tags, these are what makes Joomla! able to insert content into your template. For now, we told Joomla! to include all header-specific information inside the <head> element. We also told Joomla! that we want system messages to appear in the top of the <body> element and that we want to include the component here as well. The component is the main part of a rendered Joomla! page such as an article.

There are several other types of jdoc include tags that we will cover later in this tutorial. What is important to know is that whenever you see one of them, it means that Joomla! may or may not insert content in it's location.

Creating the manifest

With your favorite editor, create the following file

templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
        <name>helloworld</name>
        <creationDate>Once upon a time</creationDate>
        <author>John Doe</author>
        <authorEmail>john.doe@example.org</authorEmail>
        <authorUrl>http://www.example.org</authorUrl>
        <copyright>Copyright Info</copyright>
        <license>License Info</license>
        <version>0.0.1</version>
        <description>Description of the Hello World! template...</description>
        <files>
                <filename>index.php</filename>
                <filename>templateDetails.xml</filename>
        </files>
</extension>

Installation and Testing

Before testing your shiny new template you have to install it. In Joomla! there are two ways of doing that, either by packaging the extension into an installable zip package or by using the discovery method. Both methods are described below but I recommend using the packaged zip file as a beginner because it is more hostile towards errors especially in the XML manifest.

Installing your template

If you have used Joomla before reading this tutorial, you have noticed that extensions are installed using a compressed file containing all the things which are needed for installing and uninstalling them.

A new feature made available in Joomla! 1.6 is "discover." That means you can place the files in the correct places inside your Joomla! installation (The proper file path for this module will be in templates/helloworld within the Joomla! root), and the "Discover" option within the extension manager will install it, when selected.

Packaging an installation zip file

Create a compressed file of your extension directory using the structure shown in the file listing section of this page or download the provided installable package.

When you have this package, install it using the extension manager.

Testing your template

If you want to test this template, you first need to do a couple of things.

  1. Go to the Template Manager
  2. Set your shiny new template to the default template for Site

After performing these steps you can navigate to the frontend and view the template.

File listing

Download this part

Articles in this series

This tutorial is supported by the following versions of Joomla!

Joomla 2.5