Simple Templating with PHP, CSS, and XHTML (Part 1)

June 8th, 2005

Dave Shea posted how he uses simple PHP and CSS for templating the websites he creates. It turns out that I use something similar, but different enough that I thought I’d share it, in the case that anyone else can use it, or better yet, improve on it.

The page template

<?php
$page['title'] = "Page Title";
$page['section'] = "section";
$page['description'] = "";
$page['keywords'] = "";
$page['template'] = "layout-sm";
$page['head_content'] = '';
?>

<?php include($_SERVER['DOCUMENT_ROOT']."/inc/top.inc.php"); ?>

<h1>Page Title Goes Here</h1>

<p>Content goes here</p>

<?php include($_SERVER['DOCUMENT_ROOT']."/inc/bottom.inc.php"); ?>

The page template explained

The page variables

The first php code block contains the page variables. There was no real reason for making $page and array, but some sites may need a $site array and/or a $section array and it just keeps things nice and clear.

  • $page['title'] - contains a string value for the title of the page.
  • $page['section'] - contains a string value for the class name of the <body> tag
  • $page['description'] - contains a string value that will be used in the <meta> description tag
  • $page['keywords'] - contains a string value (comma separated terms) that will be used in the <meta> keywords tag
  • $page['template'] - contains a string value for the id of the <body> tag
  • $page['head_content'] - is used for placing css or javascript in the head for just that page, for instance if it is something you only need for that page

The top template include - see details

The next php statement includes the top template

Content

Next comes the content of the page…

I use 1-3 div’s in here to represent the layout of the page. For instance if this was a one column layout, I’d use

<div id="main">
<div class="inner">
</div>
</div>

If this were a two column layout (side and main), I’d use

<div id="side">
<div class="inner">
</div>
</div>

<div id="main">
<div class="inner">
</div>
</div>

And for a three column layout (side, main, extra) I’d use

<div id="side">
<div class="inner">
</div>
</div>

<div id="main">
<div class="inner">
</div>
</div>

<div id="extra">
<div class="inner">
</div>
</div>

Note: The reason I use the extraneous <div> tags, is to account for IE’s box model. I’m not so much of a markup purist that I mind extra divs if it means I don’t have to use all those silly hacks to make the layout behave properly in IE vs. Safari * Firefox. Hopefully, someday IE will behave properly and I can get rid of those extra <div> tags.

I name these structural <div> tags “side”, “main”, and “extra”, because it is less positional, and is a little more flexible that calling them “left”, “middle”, and “right”.

The bottom template include - see details

The final php statement includes the bottom half of the template


The Top Template


<?php echo "<?xml version="1.0" encoding="utf-8"?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="<?php if ($page['description']!="") { echo $page['description']; } ?>" />
<meta name="keywords" content="<?php if ($page['keywords']!="") { echo $page['keywords']; } ?>" />
<title>Site Title<?php if($page['title']!="") { echo " - ".$page['title']; } ?></title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="/css/master.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
<?php if($page['head_content']!="") { echo $page['head_content']."\n"; } ?>
</head>
<body<?php if($page['template']!="") { echo " id="".$page['template']."""; } else { echo " id="layout-sm""; } ?><?php if($page['section']!="") { echo " class="".$page['section']."""; } ?>>
<div id="container">
<div id="header">
<p><a href="/">Site Title</a></p>
</div>
<ul id="nav-top">
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 2</a></li>
<li><a href="/">Link 3</a></li>
<li><a href="/">Link 4</a></li>
<li><a href="/">Link 5</a></li>
</ul>

The Top Template explained

The code is pretty self explanatory, but basically I’m just using the $page variables to fill in the values for the top half of the template. If you have a global site navigation that is at the top of each page, you can add that here and then only update the navigation once to make a change throughout the website.

I will go into what’s going on with the $page[’template’] and $page[’section’] variables in my next post that shows how I use CSS for these templates.

The Bottom Template


<div id="footer">
<div class="inner">
<p>Footer content goes here</p>
</div>
</div>
</div>
</body>
</html>

The Bottom Template explained

This probably needs the least explanation of all. Basically I’ve thrown in a footer, and closed the open tags.

In my next post, I’ll talk about how the CSS is used in conjunction with this template.

Posted by Brian Sweeting Filed in Development

Comments are closed.