We all know the importance of the careful separation of websites into their three discrete elements – content in the form of XHTML, style in the form of CSS (Cascading Style Sheets) and behavior in the form of JavaScript. This is the basic foundation of correct, clean and functional web design. Once one has accomplished this basic building block of manageability one must look to external tools in order to achieve greater gains in website management and maintenance. Often we find a solution in heavy Content Management Systems or CMS. But often, especially for smaller web sites, there is a far simpler solution that still allows for growth and maintainability. Enter the PHP Include.
Before we get into discussing the use of the PHP Include for maintaining website I would like to first mention the oft forgotten Server Side Include or SSI. I have nothing against the old Server Side Include. I used to use it, in fact, and I believe that it is extremely functional. However, PHP has become so ubiquitous on web servers today (especially Apache) and it is so easy to use for this purpose that I feel that its advantages in growth and flexibility outweigh the slight increase in processing necessary to use it. PHP Includes are simple, straightforward and flexible when we want to start doing just that little bit more with our site than we did before.
The first step to working with PHP is to have PHP enabled in your web server. PHP requires nothing in the client browser – it is a web server only technology. Everything that we will be doing here is server side. Most web servers today already have PHP turned on and ready by default. The notable exception to this is Microsoft’s IIS where you will have to manually install PHP. Check the instructions for your particular web server on how to enable PHP for your use.
The process that I prefer to use when building a website using PHP Includes is to first build my first “prototype” page using traditional XHTML, CSS and JavaScript. One I have the basics of the page I then start by chopping out everything before the <body> tag and pasting it into a file that I like to call header.inc. I can then replace the entire section that I removed with the following simple PHP line:
<?php include("header.inc"); ?>
If this is your first time working with PHP this is a good time to test your page. I like to rename my pages from *.html to *.php once I have modified them. This makes it more evident to me what I am working on and when. I will assume that we are working on a default page here and that we can call it index.php. You should now test your page to be sure that it is rendering correctly. Any browser should now see the page as identical to the *.html equivalent. What we have done is simply take the top of the page and move it into a separate, reusable file. The PHP Include statement is simply taking the header.inc file and concatenating it back into the page at the last minute when the page is requested. It we were only ever to work on a single page this would be silly and a waste of time and effort. But it is a rare thing to have a web site with only a single page. Our goal here is to make a multi-page site easy to manage, control and standardize.
Now that you have the basics of the PHP Include working we can work on expanding its use. Simply handling the declaration and head portions of our page are not enough to make the PHP Include truly useful. This would reduce on-disk file sizes and remove a few maintenance tasks but the gains would be few. The true value begins when we start including portions of the page body in our includes. Now the fun really begins.
Now we need to identify the portion of the top of our page that will be common to every individual page that we will have in our site. In many cases this will be a banner area and navigational elements – most often a menu of some sort. We want to be sure to find every line that will be duplicated exactly and none that need to be different in each page. Once you have identified this page portion you can cut that bit of text and paste it to the bottom of your header.inc file. Quite often I find that this section will include quite a bit of menu markup as well as many “setup” tags such as common opening <div> tags. The more that you can manage in this manner the more value you get from it.
If you want, save everything and test the site again to be sure that nothing is broken so far. Nothing is? Good. Now we need to do a similar task to the bottom of our index.php page. We need to identify where the custom page-specific material ends and the common “wrap up” material begins. In my experience this is generally a relatively small about of markup but will often include a “bottom bar”, some <div> closeouts and often some late-running JavaScript such as Google Analytics or other tracking code.
Once you have identified the common bottom code that is shared, or will be shared, between your pages you can cut it out and paste it into a new file that I like to call footer.inc. The .inc extensions are not necessary but I find that it really helps to make these files easy to find. Now in place of the markup that we removed from index.php we can add in:
<?php include("footer.inc"); ?>
Now test your page again. Nothing should have changed in your web browser. But now your page is significantly easier to manage going forward. You can now create many new pages and simply start them with the PHP Include “Header” line and end them with the PHP Include “Footer” line and all you have to do from page to page is fill in the content that goes between. This will speed initial page generation but more importantly will make updates and management far easier. If you need to add a new <base> or <link> tag, for example, you can simply add it into header.inc and instantly it is applied to every page that you have created. When you create a new page and need to add a link into your navigational menu you can simply add it in and instantly every page’s navigation menu is updated.
Not every page will benefit from this approach but most traditional pages used by small business and most “brochure” style pages will. Often you may need to exclude your default page (a.k.a. index.html) because it might be different from all of your other pages. That is fine. Don’t let that be a show stopper for you. Just manage all of your other pages together.
To get even more value from this approach you can begin looking for common shared elements between pages. If you have a navigational bar that appears in the middle of the pages you could create navigation.inc and move that shared markup out to that file to manage more easily. Of course you can also do this with markup shared between any two pages – it doesn’t have to common to every page. Just use the appropriate PHP Include on the right pages and voilà, less work when adding content or making changes to your site.