Documentation Menu

1.5 Template Project

The Joomla! Documentation Working Group is running a project to develop detailed reference and tutorial material on Joomla! 1.5 templates.  There is a project page on the documentation wiki where you can see the work in progress and help us by contributing your knowledge.

Who's Online

We have 41 guests online

Help Site License

The Joomla! Help Site content is copyright © 2005 - 2008 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution NonCommercial ShareAlike 2.5. Some parts of this website may be subject to other licenses.
Home arrow Manual arrow 1. Basic Templating and Site Design arrow The Layout File

The Layout File PDF Print E-mail
While the template layout file is a PHP file, it is written mostly in HTML with only a few snippets of PHP. You do not have to be a master of PHP to write a template file. All you need to be able to do is learn where to place the key "hooks" into the Joomla templating engine.

Within the HTML framework you place "windows" that look into the database behind your web site. There are typically several small windows called Modules and usually one larger opening (like a frontdoor) for a Component.

You are encouraged to write templates in XHTML. While there is debate over whether XHTML *is* the way of the future, it is a well formed XML standard, whereas HTML is a loose standard.  Future versions of Joomla will rely more and more on XML so it is wise to adopt this model now.

The index.php file for a typical 3-column layout would look like the following in a skeletal form:
 1: <?php
 2: $iso = explode( '=', _ISO );
 3: echo '<?xml version="1.0" encoding="' . $iso[1] . "\"?>\n";
 4: /** ensure this file is being included by a parent file */
 5: defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
 6: ?>
 7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 8: <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>">
 9: <head>
10:   <title><?php echo $mosConfig_sitename; ?></title>
11:   <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
12: <?php
13: if ($my->id) {
14:   initEditor();
15: }
16: ?>
17: <?php mosShowHead(); ?>
18: <link href="<?php echo $mosConfig_live_site;?>/templates/basic_template/css/template_css.css"
          rel="stylesheet" type="text/css" />
19: </head>
20: <body>
21: <table cellspacing="0" cellpadding="5" border="0">
22:   <tr>
23:     <td colspan="3">
24:       <?php echo $mosConfig_sitename; ?>
25:     </td>
26:   </tr>
27:   <tr>
28:     <td colspan="3">
29:       <?php mosLoadModules ( 'top', 1 ); ?>
30:     </td>
31:   </tr>
32:   <tr>
33:     <td width="20%" valign="top">
34:       <?php mosLoadModules ( 'left' ); ?>
35:     </td>
36:     <td width="60%" valign="top">
37:        <?php mosMainBody(); ?>
38:     </td>
39:     <td width="20%" valign="top">
40:       <?php mosLoadModules ( 'right' ); ?>
41:     </td>
42:   </tr>
43:   <tr>
44:    <td colspan="3" valign="top">
45:      <?php mosLoadModules ( 'bottom' ); ?>
46:    </td>
47:  </tr>
48: </table>
49: </body>
50: </html>

Let's have a look at the main features. We are assuming you already know a bit about HTML pages so things like head tags, body tags, tables, etc will be skipped over.

Line 1-3: Defines the file as a valid XML file.  _ISO is a special constant defining the character set encoding to use.  It is defined in your language file.

Line 5: Prevents direct access to this file. It is essential that you include this line in your template.

Lines 7-8: Set up the XHTML standard for the page.

Line 10: Prints out the Site Name configuration variable with the opening and closing title tags.

Line 11: _ISO is used again to define the character set to use.

Line 12-16: $my->id is a script variable that is non-zero if a user is logged in to your site. If a user is logged in then the nominated WYSIWYG editor is pre-loaded. You may, if you wish, always pre-load the editor, but generally an anonymous visitor will not have the need to add content. This saves a little script overhead for normal browsing of your site.

Line 17: Inserts several metadata blocks.

Lines 18: Loads the CSS stylesheet. $mosConfig_live_site is a configuration variable that holds the absolute URL of your site.

Line 24: This prints the Site Name in a table cell (spanning the three columns).

Line 29: This loads any modules that are published in the "top" position. The second argument, "1", indicates that the modules are to be aligned horizontally.

Line 34: This loads any modules that are published in the "left" position. These modules will be displayed in a single column.

Line 37: This loads the component into your template. The component is set by the URL, for example, index.php?option=com_content will display the Content Component in this area.

Line 40: This loads any modules that are published in the "right" position. These modules will be displayed in a single column.

Line 45: This loads any modules that are published in the "bottom" position.
Last Updated ( Tuesday, 17 January 2006 )
 
< Prev   Next >
[ Back ]