This article was last updated Monday, 13 December 2004. View a newer version at my site, hardanswers.net/template-based-site

Templates

Creating static pages for a site works well when the site is small, but gets very cumbersome as the site becomes bigger – a site-wide change has to be performed in every single file on the site, taking a lot of time and effort. The usual way to overcome this is by the use of templates. A template is a single page or style that is applied to a whole site, meaning that most site-wide changes can be done by simply editing the template, rather than every file in the site – saving a lot of time and effort.

The system I’ve used allows me to store the content in plain XHTML files, easily created and maintained by anyone using any standard XHTML editor, such as Dreamweaver. This makes it particularly easy to deploy new content and modify existing content.

The basic logic is that I have a single file that applies all the site-wide features, such as common headers, footers and styles, and the individual page’s content is included into this file and displayed to the user.

The basic concept
Consistent Header Individual Page Contents Consistent Footer

However, because the individual pages are stored as complete XHTML files, and the resulting output page must also be a complete XHTML file, it is not possible to simply include the entire individual page into the template. The result would look something like this, which is not a valid XHTML page.

Invalid XHTML page
<html> <head> <title>Page Title</title> </head> <body> <html> <head> <title>Page Title</title> </head> <body> Individual Page Body </body> </body> </html>

To overcome this problem, I have a function that accepts a file name and a tag name, and returns the contents of that tag from the given file.

Parse tag function
// Parse file for tags // parse the given $file for the given $tag and return any contents within // that tag function include_tag($tag, $file) { // read contents of file into $data $data = file_get_contents($file); // match the <$tag blah="blah">contents</$tag> preg_match( "/<$tag.*>(.+)<\/$tag>/sU", $data, $matches ); // eval the contents from above match eval('?>'.$matches[1]); // <? } // end include_tag

I can now include just the body tag from each individual page, as the content of my template. A simple template such as this will now produce a valid XHTML page.

Simple template
<?php // Here we would have code that sets $file to the appropriate file name $file = 'included_page.html'; ?> <html> <head> <title><?php include_tag('title', $file) ?></title> </head> <body> <?php include('header.inc'); include_tag('body', $file); include('footer.inc'); ?> </body> </html>

Valid XHTML page
<html> <head> <title>Included Page Title</title> </head> <body> Header things from header.inc are here The content of the <body> tag of included_file.html is here Footer things from footer.inc are here </body> </html>

With a bit more code, you have yourself a simple, functional template.

Simple, semi-functional template
<html> <head> <?php // set $file to the ?file part of the URI // http://domain.com/?file=file-name $file = $_GET[file]; // include the parse tag function include('parse_tag_function.inc'); // print the page title print '<title>'; include_tag('title', $file); print '</title>'; ?> </head> <body> <?php include('header.inc); include_tag('body', $file); include('footer.inc); ?> </body>

Care must always be taken to ensure that anything able to be externally passed into a file isn’t malicious. A simple function such as this attempts to find PHP and HTML files, and returns a default PHP file if none are found. This can prevent anyone attempting to access anything unusual.

function verify_file($file) { switch(true) { case file_exists($file.'.php'): return $file.'.php'; case file_exists($file.'.html'): return $file.'.html'; default: return 'default.php'; } }

Individual files are now stored as XHTML or XML. XHTML files are parsed for their body, style and title tags and these tags are then included into the resulting output. This allows a simple template system where the content can be created with any XHTML capable editor, and I have found this to be the simplest way of creating a consistent and easily updateable style across a site.

There are several advantages and a few disadvantages to this approach.

Disadvantages include:

Slightly more processing is required to parse a file, rather than serving straight HTML
Initial design is more complex

Advantages include:

Easily updateable
Easy to maintain
Consistent across an entire site
Content generation possible with the majority of “webpage” HTML editors, as well as by hand
Foreign content assumes a consistent style after parsing

For further information on:

eval(), see http://www.php.net/manual/en/function.eval.php
include(), see http://www.php.net/manual/en/function.include.php
file_get_contents, see http://www.php.net/manual/en/function.file-get-contents.php
preg_match, see http://www.php.net/manual/en/function.preg-match.php
How to set $file to the file name, see Static and Persistent URI’s (Coming Soon)

Last updated Tuesday, 20 November 2012

W3C CSS 2.0

W3C XHTML 1.1

Menu Ned Martin’s Site Guide — How this site works

Templates