PHP Headers and Footers (Part 1)

April 16th, 2007 by

When maintaining a website it can save you hours if you try to reduce any redundancy in your update routine. A good example of redundant work could be the process of updating the headers and footers across a basic HTML-based website. In this article I will try to shed some light on ways to ease this process.

Why use shared Headers and Footers?

Lets say you have a website consisting of 20 or more pages and on each page you have the same header (containing stuff like your logo, first level navigation etc.) and a footer (containing contact information etc.). At some point you might need to add a new menu item to your first level navigation or you might have moved to a new location and therefore need to change your address. So, how can you avoid editing each and every file on your site if you want to make these changes?

Well – there are several ways of doing this (and probably more than I’m listing here):

  • You could use a CMS (Content Management System)
  • You could do site wide ‘search and replace’ in your favorite HTML editor (Programs like Adobe Dreamweaver support this)
  • You could use include files (like PHP’s include() function or Apache’s Server-Side Includes).

In this brief article I will be looking into the latter – PHP include files.

Note: You can download all the files used in this article here.

Creating the PHP include files

A PHP include file does not have to be more than a basic HTML file. All it does is contain a block of code that you wish to reuse several places on your site. In the following example I will be using a basic HTML template that you can view or download here.

As you can see we can split the file into three separate areas:

  1. Header: Contains the doctype information, start <html> tag, the <head> tag containing meta tags, pagetitle and stylesheet information.
  2. Content: Contains the variable content of the page.
  3. Footer: Contains address information etc.

To create our Header include file we will cut&paste starting from the beginning of the file with <!DOCTYPE and ending with the </DIV> tag just after the unordered list. This will give us a nice fragment of code that will look like this.

We do the same with our footer, starting a cut&paste from the <div id="footer"> and ending with </html> which gives us something like this.

Including your Header and Footer file on your page

In order to use these include files on your page you can use PHP’s excellent include() function.

If we go back to the remnants of our original template file it should only contain the <div id="content"><p>Lorem ipsum dolor sit amet....</p></div>.

To include the Header file insert the following on the first line of the document:

<?php include("header.htm"); ?>

And proceed to the last line of the document and insert the Footer include with the following code:

<?php include("footer.htm"); ?>

Now, in order to actually make this run there are a few things you need to be aware of.

First of all, if you have been using the template.htm to work from you will need to change its extension to .php so that the webserver will know it is a PHP page – otherwise it will not understand the <?php> tags defined above.

Secondly PHP code can’t be executed in your browser like standard HTML can – it will always need to run through a server, so in order to test what we’ve been going over here try uploading it to your UK2 website or download a stand-alone testing server like Wampserver.

Keeping your include files in a separate directory

The above approach assumes that you keep all your files in the same directory, but this is of course rarely the case. If you wanted to keep your include files in a separate directory like includes/ you would need to change your include statement to say include("includes/footer.htm"); unfortunately any of these approaches would force you to change the path pointing to your include files every time the file that’s calling the includes is not on the same directory level as the includes.

Unfortunately we can’t just call “/includes/footer.htm” but what we can do instead is use a PHP server variable that will return the document root.

Say you have all your includes in the /includes/ folder, you could refer to the footer file using the following:

<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.htm'); ?>

Oops, where did my flexibility go?

One of the main problems with the above approach is that you might want to have unique page titles on all of your pages (for increased search engine performance) and different meta tags, javascript includes etc. – this is something I will be looking into in Part 2 of this article series, so stay tuned!

Nonetheless I hope you’ve been inspired and that you’re able to utilise this basic technique to reduce the time you spend on maintaining your website.

  • Share this post

Clarification on UK2 Domains and E-mail

Today: Highest sales ever!

5 Comments

David Precious
# 17th April, 2007

Good post Esben. Sharing common code (headers + footers etc) around the site can really make a big difference to how easy your site is to manage and work with, even on a small site.

Jamie Stallwood
# 22nd April, 2007

It might be more efficient to use Server-Side Includes (SSI) which is well documented on the Apache website, if the pages don;t need to run other PHP code.

Esben
# 24th April, 2007

Jamie Stallwood Said:

It might be more efficient to use Server-Side Includes (SSI) which is well documented on the Apache website, if the pages don;t need to run other PHP code.

Thanks for your input Jamie, and yes you are right, Server-Side Includes are definitely a good way to get the same functionality. I’ve amended the article slightly to include this!

Cheers 🙂

Whatever-ishere
# 21st November, 2007

thanks for the GREAT post! Very useful…

Julien
# 23rd October, 2009

Where is part 2?

Leave a Response