Build a simple SSI PHP-based template for your website

Submitted by Steve on Wed, 08/06/2008 - 21:30.

For simple websites it's handy to separate elements that are shared across pages, such as your header and footer. Instead of maintaining several files and worrying about updating each file indenpendently and redundantly, keep these sections separate.

This article explains an easy (albeit very simple and not very robust) way to separate your sections into multiple files.

Benefits

Easy updating: only change one file, rather than every page on your site
Consistency: because every page relies on the one file, your common sections will look the same across your whole site.

An HTML document

We'll start with a regular HTML document:

<!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" />
<title>Page Title</title>
</head>
<body>
<div id="page">
  <div id="header">
    <h1>My Website</h1>
    <p>a website for me and you</p>
    <hr />
  </div><!-- header -->
  <div id="main">
    <h2>Page title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
    <ul>
      <li>lorem ipsom</li>
      <li>duis aute irure</li>
      <li>dolor sint labore</li>
    </ul>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolora aliqua. </p>
  </div><!-- main -->
  <div id="footer">
    <hr />
    <p>Site contents copyright <?php echo date('Y'); ?></p>
  </div><!-- footer -->
</div>
</body>
</html>

Separation of elements

Notice how we have div#header containing our header, div#main containing the main section, and div#footer holding our footer. These sections are already naturally separated.

Here's an image showing the basic idea:

Elements of a page: A simple diagram showing distinct elements of a web page

Folder structure

Now we'll setup a simple folder structure to hold our site. I like this, but you can vary it as much as you'd like. The real dangerous work is done in layout.php, so make sure it's up to par, and you should be fine.

webroot/
    index.php
    common/
        header.php
        footer.php
        layout.php

index.php

This will be our home page. (Note that with this technique you'll have to create a new php page for every page on your site.)

common/

This folder holds the sections that are common to all or many pages. Hence the name common.

header.php

This file will hold the contents of div#header.

footer.php

This file will hold the contents of div#footer.

layout.php

This file will be responsible for a few simple functions that allow us to easily get our header and footer, as well as any other elements you wish to use.

Setup layout.php

I like to use a layout.php that will hold functions for retreiving the file. We're just going to use some include()s to get our elements, but here's my layout.php:

<?php
function get_header()
{
  include 'header.php';
}
function get_footer()
{
  include 'footer.php';
}
?>

Since layout.php is in the same folder as the common elements (header.php & footer.php), we don't have to worry about setting up any PHP include paths or anything like that.

The only thing to remember is that you must include layout.php in each page.

Setup the common elements

Now take the entire div#header and place it into the common/header.php file. On your index.php, replace what was there with the get_header() function call:

Your index.php should now look like this:

<body>
<div id="page">
  <?php get_header(); ?>
  <div id="main">
    <h2>Page title</h2>

And your common/header.php should look like this:

<div id="header">
  <h1>My Website</h1>
  <p>a website for me and you</p>
  <hr />
</div><!-- header -->

Do the same with the footer:

index.php:

    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolora aliqua. </p>
  </div><!-- main -->
  <?php get_footer(); ?>
</div>
</body>
</html>

common/footer.php:

<div id="footer">
  <hr />
  <p>Site contents copyright <?php echo date('Y'); ?></p>
</div><!-- footer -->

Give it a shot

Now you've got these elements separated out, you must include the functions from layout.php in the page. So at the top of index.php, add this line:

<?php include 'common/layout.php'; ?>

This will include that php file and setup the functions so that you can use them.

This should get you going, at least with the concepts of include() and the separation of elements.

Creating another page

To create another page, you can simply duplicate index.php. Make sure that you include common/layout.php on any additional pages. Then you can replace the contents of div#main with the content for the additional page.

You'll notice a problem though: because the page title <h1> element is located directly in header.php, it'll be the same on every page. This is ok, but it could pose a problem.

Improve get_header()

To improve get_header() we can create a varaible that could dsiplay the page's title. It's pretty easy to do. In common/layout.php we'll add an argument and its default value to the function get_header():

function get_header($page_title = ''My Website')
{
  include 'header.php';
}

Now we also have to tell common/header.php to use that variable:

<div id="header">
  <h1><?php echo $page_title; ?></h1>
  <p>a website for me and you</p>
  <hr />
</div><!-- header -->

If you call get_header() without sending it an argument, then the variable $page_title will take the default value of 'My Website'. Otherwise, you can send an argument and $page_title will accept that as its value.

For example say we have a page called 'About Us'. We could call get_header() with an argument:

<?php get_header('About Us'); ?>

Now when you load about-us.php in the browser, you should see the <h1> read 'About Us'.

Download it

You can download a copy of these files at here.

Beer Is My Poison