Hands-on Walkthrough

You should have two key files at this point: an index.php file containing your basic page structure in HTML and a template.css file containing CSS styles to make your page look good. You should have them in the basic template folder structure from the previous step. Also, if you have any images, they should be in the images folder.

Insert the Joomla Tags

The Joomla tags are what brings your content from the database and renders it on the pages in HTML. Let’s add the tags to see how this works.

The first thing to do is add the standard header code to index.php:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JHTML::_('behavior.mootools');
?>

This does two things. It prevents users from accessing this file in an inappropriate manner and it loads the Mootools JavaScript library (http://www.mootools.net). If you don’t want to use the Mootools library, you can leave that line out.

Next, add the DOCTYPE information. Nowadays, most sites will use the XHTML 1.0 Transitional type. See the W3 Consortium for more information on other types (http://www.w3.org/QA/2002/04/valid-dtd-list.html).

<!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; ?>" dir="<?php echo $this->direction; ?>" >

The HTML tag following the DOCTYPE automatically sets the language and language direction.

Now, ...

Get Using Joomla now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial