Using PHP Includes For Headers & Footers

Today I will be showing you how to easily split up your XHTML code into a header and footer file. If you have coded websites for any length of time, you have probably noticed that every page has a lot of the similar code in it. There is only a little bit of text and content in the middle that really changes between pages. At least this is the way it should be as a common look should be established across all pages.

Now I am positive most of you have wondered if there is some way to eliminate this repeat code. If this repeated code is not put into separate includes, and you wish to make a change; you will have to make that change on all your pages. Not so bad if you have 10 pages, but what about a 100 page site? Sure you could do a find/replace, but why not plan for changes in advance?

You may say, why PHP? Could I not just use SSI? SSI or server side includes is one way people have solved this problem in the past. They put the code into 2 separate files called header.inc and footer.inc. They then use the following code to include the files:

<!--#include virtual="/ssitxt/header.inc" -->
<p>
 some content
</p>
<!--#include virtual="/ssitxt/footer.inc" -->

I could go more in depth into how SSI works, but I want to show you PHP includes. I am choosing PHP for a couple simple reasons:

SSI requires .shtml extension unless .htaccess directives are used
PHP is a robust programming language that I use on most projects anyways
Perhaps the most important, PHP allows variables to be used within the includes

Okay, let us get started with a simple XHTML document that looks similar to a lot of projects.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>PHP Includes - Brenelz's Web Tips</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="styles/default.css" />
   </head>
    <body>
    	<div id="container">

        	<div id="header">
        		<h1>Brenelz's Web Tips</h1>
                        <img src="images/logo.png" height="88" width="726" alt="Brenelz Logo" />
               </div> <!-- end of: header -->

            <div id="content">
                <p>
                     My great content here!
                </p>
            </div> <!-- end of: content -->

            <div id="footer">
            	&amp;amp;amp;amp;amp;amp;copy; Copyright 2009 Brenelz Web Tips. All rights reserved.
            </div> <!-- end of: footer -->

        </div> <!-- end of: container -->

    </body>
</html>

As you can see from the above code, everything above the p tag with “My Great Content Here!” will be common to every single page on my site. For this reason let’s throw that into a file called header.inc.php in an “includes” folder:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>PHP Includes - Brenelz's Web Tips</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="styles/default.css" />
   </head>
    <body>

    	<div id="container">

        	<div id="header">
        		<h1>Brenelz's Web Tips</h1>
                        <img src="images/logo.png" height="88" width="726" alt="Brenelz Logo" />
               </div> <!-- end of: header -->

            <div id="content">

As well, the footer will be the same on all pages. Put this into a file called footer.inc.php, also in the “includes” folder:

            </div> <!-- end of: content -->

            <div id="footer">
            	&amp;amp;amp;amp;amp;amp;copy; Copyright 2009 Brenelz Web Tips. All rights reserved.
            </div> <!-- end of: footer -->

        </div> <!-- end of: container -->

    </body>
</html>

Now as you can see the only thing we have left in our original file is:

        <p>
             My great content here!
        </p>

Now let’s include both of files we created above into the original file:

< ?php
    include 'includes/header.inc.php';
?>
        <p>
             My great content here!
        </p>
< ?php
    include 'includes/footer.inc.php';
?>

Now make sure these files are placed on a PHP-enabled web host and test it out in the browser. By requesting the page, you would never know that 2 extra files are being included. This may seem trivial, but imagine adding global navigation, utility navigation, search, and a sidebar into your header. You really really save a lot of time by using this trick.

Now let’s get more advanced by using PHP variables in our template files. The above could have been done almost identically in SSI, but PHP allows you to use variables. Let’s say for example you wanted your title to be different on each page. Can you do it using SSI? No, your files are hard-coded and you are stuck with <title>PHP Includes – Brenelz’s Web Tips</title> on every page. This is not good for SEO and can be fixed by changing the original file to:

< ?php
    $title = 'PHP Includes';
    include 'includes/header.inc.php';
?>
        <p>
             My great content here!
        </p>
< ?php
    include 'includes/footer.inc.php';
?>

And the header.inc.php title tag to:

        <title>< ?php echo $title; ?> - Brenelz's Web Tips</title>

Now it will print out the value of the $title variable which we have set in this example to “PHP Includes”. Now you can create another page, and have a whole new title by setting the $title tag to “ASP Sucks”, and changing the content in the p tag.

Because of this, if you need to add some JavaScript to the head of every page, you can make the change in the header.inc.php and it will affect all sub-pages that include that file.

That wraps up this entry on PHP includes, and I really hope by spending a few minutes reading this you will save hours and hours down the road.

Share and Enjoy:

Written by Brenley Dueck

4 Responses to “Using PHP Includes For Headers & Footers”

xiaohouzi79 Says:
January 8th, 2009 at 7:57 pm
Just a heads up,
In the file you include header.inc.php twice rather than having footer.inc.php down the bottom in your examples.
admin Says:
January 8th, 2009 at 8:38 pm
hmm… the things you miss even after checking it over a few times.
Casey Says:
June 17th, 2009 at 11:27 am
Just wanted to say thanks for this. [: I’m learning PHP and simple, easy to read tutorials such as this one really goes a long way.
Shona Says:
October 27th, 2009 at 9:09 am
I just wanted to add that for me, this code didn’t work until I removed the space between “<" and "?" in the include codes. Now it is working brilliantly! This may be obvious for regular coders but I thought for those who are copying and pasting the code it might be handy to know