Years ago I was introduced to PHP. Since then, using simple PHP includes has saved me huge amounts of time in revising and editing HTML, so I thought I’d share some basic tips and hopefully save you some time, too.
This is the first article in a series of basic designers’ guides to using PHP for interface production.
Including CSS style sheets, JavaScript files, and image files in HTML pages will be familiar to most people. PHP includes work in a similar way: Create one file with a chunk of HTML in it (like a menu or a footer) and include it in multiple pages using a bit of PHP. Change the contents of that one file and every page that includes it displays the change. Sexy, eh? Let’s get started:
What is PHP?
In case you don’t already know: PHP is a programming language that works on the server—“server-side scripting”—in much the same way that JavaScript works in the browser (“client-side scripting”).
All good hosting services have PHP installed on the server. You can find out what version and modules you have installed using phpinfo(). PHP also powers many of the most popular sites in the world. However, all we need to know for our simple purpose is this:
PHP allows us to create a single file on the server, and include the contents of that file in multiple pages before they are delivered to the browser.
Creating PHP Files
Make sure your hosting service supports PHP. Then, instead of saving your site files with a .html or .htm extension, save them with a .php extension. They won’t render any differently in the browser, the extension just tells the server that the file may contain PHP which will need to be executed before the file is served.
Before creating PHP includes, I usually create the first page of a site in the normal way, but save it as .php. I only pull chunks of HTML out to includes when I start building other pages in the information architecture.
Example: A Regular HTML Footer
Web sites usually have a footer that is constant across all pages making it perfect to be included using PHP. This is a simplified example of a regular page with the footer included inline as usual:
<!DOCTYPE… >
<html>
<head>… </head>
<body>
…main content
<div id="footer">
…footer contents
</div>
</body>
</html>
Making the Footer a PHP Include
- Create a directory in your site root called
incto contain all of your includes and keep your files organised. - Remove the whole of the footer markup and paste it into a new file in your editor. Save that file to the
incdirectory as footer.php (it can be whatever you wish). - In the regular site pages, where the footer would usually be, replace it with a bit of PHP to include the
footer.phpfile:
<?php include ("inc/footer.php"); ?>
Important: The file path ("inc/footer.php") is relative to the location of the page including it — make sure it points to the right place from any given page in your site.
With that bit of PHP in your pages, the footer.php will be included in the page at that place.
Change the markup in footer.php and it will change for every page where you have included it. Now, when you need to change the date in the footer to include the new year, or change anything about it, you only have to change it once in the include. That’s it! You can make any bit of markup an include.
More Complex Includes
PHP becomes even more useful for designers when the state of HTML objects needs to change depending on what page they appear in. For example, the markup and style of main navigation items will change to indicate which item is active. I often apply a class and either disable a link or wrap it in <em> tags. You can do all that in a single menu include. In the next article I’ll show you how. In the meantime, if this is new to you but you’re enthused by it, take a look at if/else statements yourself.






42 Comments
1. By Nicola Pressi on 16th Feb ’08 at 14:54pm
2. By Ian on 16th Feb ’08 at 15:23pm
4. By inspirationbit on 16th Feb ’08 at 17:57pm
5. By Camilo Vitorino da Costa on 17th Feb ’08 at 11:51am
6. By mumino on 18th Feb ’08 at 22:13pm
7. By Tracey Grady on 21st Feb ’08 at 10:29am
9. By Werbeagentur on 21st Feb ’08 at 16:12pm
10. By dotjay on 21st Feb ’08 at 16:31pm
11. By inspirationbit on 22nd Feb ’08 at 01:28am
13. By Ralph :) on 25th Feb ’08 at 02:06am
14. By Kevin on 3rd Mar ’08 at 14:56pm
15. By Sir Colin Of Graffiti on 18th Mar ’08 at 20:54pm
16. By Chad on 28th Mar ’08 at 01:02am
17. By dotjay on 28th Mar ’08 at 01:35am
18. By Chad on 28th Mar ’08 at 02:17am
20. By Chad on 28th Mar ’08 at 13:42pm
21. By dotjay on 28th Mar ’08 at 23:43pm
22. By Chad on 29th Mar ’08 at 00:57am
23. By skimboard on 15th Apr ’08 at 15:51pm
24. By Stevo on 17th Apr ’08 at 23:02pm
25. By Andre Tagesgeld on 7th May ’08 at 11:04am
26. By Lamdba Media on 10th Jun ’08 at 14:14pm
27. By Aphrodizzyac on 28th Jun ’08 at 18:16pm
28. By Kevin on 12th Aug ’08 at 08:13am
29. By Design Bits on 19th Sep ’08 at 14:33pm
30. By Friseur on 9th Dec ’08 at 11:18am
31. By Dana on 9th Dec ’08 at 20:29pm
32. By Werbeagentur on 5th Mar ’09 at 21:02pm
33. By Wirtschaftsprüfer on 6th Mar ’09 at 14:22pm
34. By Festgeldkonto on 17th Mar ’09 at 23:48pm
35. By Verlobungsringe on 30th Mar ’09 at 19:59pm
36. By EDI on 11th Apr ’09 at 06:34am
37. By arzneien on 27th Apr ’09 at 10:02am
38. By Tuning on 4th Jun ’09 at 00:27am
39. By Timmy on 15th Aug ’09 at 08:35am
40. By Cloo Urne on 7th Sep ’09 at 14:37pm
41. By Carola on 29th Sep ’09 at 17:25pm
42. By Mikersson on 30th Jan ’10 at 22:01pm