This is the archive of jontangerine.com version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

/ log / 16th Feb, 2008 /

Designer PHP: A Simple Include

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

  1. Create a directory in your site root called inc to contain all of your includes and keep your files organised.
  2. Remove the whole of the footer markup and paste it into a new file in your editor. Save that file to the inc directory as footer.php (it can be whatever you wish).
  3. In the regular site pages, where the footer would usually be, replace it with a bit of PHP to include the footer.php file:
<?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.

Further Reading

  1. PHP tutorial from PHP.net
  2. PHP introduction from W3schools

Share

Browse More Articles

40 Comments

  1. 1. By Nicola Pressi on 16th Feb ’08 at 06:54am

    Very simple, very usefull for newbies…

    Good work!

  2. 2. By Ian on 16th Feb ’08 at 07:23am

    I think it’s a good idea to write a series of articles aimed at the designer. Although the information is already out there it’s pretty much always aimed at the developer who is fluent with more of the geek speak. This article helps to break things down and is more on a need-to-know basis of how this will make life easier.

    I look forward to the rest of the series.

  3. Jon 陳’s profile 3. By Jon 陳 on 16th Feb ’08 at 07:58am

    Graci Nicola, and thanks Ian. That’s exactly the idea. :) I remember buying books only to find they assumed I was already a developer which left me bewildered. What I wanted was something practical for design. Hopefully this series will go a little way towards that.

  4. 4. By inspirationbit on 16th Feb ’08 at 09:57am

    Even though I've been coding in PHP for the last six years (and teaching it as well) , I still read your article to see your perspective on this as a designer. PHP include capabilities are certainly the most useful and popular options that make designer’s life managing and updating the site so much simpler.

    Just wanted to add that there two functions to include files in PHP: include() and require(). The only difference between them is that if the included file is not found the script (code) will produce an error message and continue executing the rest of the code, while require() function will display an error message and halt the script.

    It is possible in PHP to disable the error messages, so whether to use include() or require() function in your code will depend on whether you'd like the file/page return the rest of the code or stop because a crucial information in the include file was not found. Hope that helps someone as well.

  5. 5. By Camilo Vitorino da Costa on 17th Feb ’08 at 03:51am

    very nice.

    I alread use for yers a solution like that and I can say, it save lives!

  6. 6. By mumino on 18th Feb ’08 at 14:13pm

    it is basic template at a cms. nice article for newbies…

  7. 7. By Tracey Grady on 21st Feb ’08 at 02:29am

    Thanks Jon for a great article. I've just discovered your site thanks to a mention over at Web Designer Wall. Your php posting is very designer-friendly. I've just spent the last 2 days working on my site redesign (yet to go live) and finding the same problems as others who have commented here – too many online tips aimed at developers who already have a grasp of these things.

  8. Jon 陳’s profile 8. By Jon 陳 on 21st Feb ’08 at 05:34am

    Thanks for adding that Vivien. Or should I call you “Inspiration Bit”, I’m never sure? :)

    Thanks Camilo and mumino, too.

    Tracey, thanks for stopping by! Hopefully the rest in the series will be equally as relevant to designers. The next one is half way written, so there should be something on including navigation with different states soon.

  9. 9. By Werbeagentur on 21st Feb ’08 at 08:12am

    There is a great danger if you use PHP include. If you allow your webserver to "include" remote files, it´s also possible to include remote php programms by scripting. You will also find more about php here: http://de.php.net/

  10. 10. By dotjay on 21st Feb ’08 at 08:31am

    Hi Werbeagentur,

    The include statements in this tutorial do not refer to remote files – they're used to include files on the local server. Considering the target audience of the tutorial, you need to clarify the case. You are right that there is a security issue with including remote files, but not for basic includes. Follow the link above and see the warning below Example 3.

    A simple include of a file on the local server is all that’s needed here. It is, however, a potential security issue to use variables in the path to a file, so you have to be careful. Jon’s not used variables here, so that’s all fine. Just be warned that unclean variables may be used to import scripts from remote sources.

  11. 11. By inspirationbit on 21st Feb ’08 at 17:28pm

    You're welcome, Jon. It’s really up to you how you prefer to refer to me in your comment replies. I’m okay with the either option. I always sign with my site’s name, but when other bloggers reply to my comments using my name, it tells me that they know me (or at least that they visited my blog and checked the About page ;-), thus making the interaction more personal.

    Btw, I like how you got all the commentor names in your replies linked to their respective comments. Do you link them manually or have a script doing it for you?

  12. Jon 陳’s profile 12. By Jon 陳 on 22nd Feb ’08 at 05:27am

    Vivien: The linked names are done manually at the moment; it’s on the to-do list though!

    Thanks Jon for clarifying the comment from Werbeagentur. You’re right: In order to be helpful, the comment should of been clear about any dangers of using include() in relation to this tutorial. As you rightly point out, no danger exists in this use case.

  13. 13. By Ralph :) on 24th Feb ’08 at 18:06pm

    Jon and Jon all on the same page, it’s a grow tag team…

    I am so new to php it hurts. I think one of the main challenges lies in the inaccessibility of php/server side scripting in general. When it comes to dorks like me we're generally able to look at the produced code of innumerable well designed pages, modify their mark up and edit their css for our own purposes--whilst applying new concepts all our own, somewhere down the way. When it comes to scripts executed on the server before they come to browsers/us-through-browsers, you can’t tell what someone has been doing so it’s harder to learn.

    Designing with templates/includes is so useful, and this article is a really great introduction into how to get started.

    Thanks again Jon (and Jon) for another clarification of what needs to be clear.

  14. 14. By Kevin on 3rd Mar ’08 at 06:56am

    I can’t thank you enough for all the PHP info. I’m primarily a user experience designer, but I've wanted to learn more about PHP for years — this stuff is perfect for getting me started. Thanks again!

  15. 15. By Sir Colin Of Graffiti on 18th Mar ’08 at 13:54pm

    Thanks, as above I needed something minus all the developerage, cheers : )

  16. 16. By Chad on 27th Mar ’08 at 18:02pm

    Wondering if you can help… I’m new to PHP, and it makes total sense. Yet I tried to use a very simple PHP include, and while I can navigate to it and see the code render successfully, when I try to load the page that should contain the include file, it’s not appearing!

    I checked it several times and can’t seem to find the issue. Would having a table and/or references to relative image paths within the PHP file cause it not to work?

    Thanks!

    Chad

  17. 17. By dotjay on 27th Mar ’08 at 18:35pm

    @ Chad: Could you link to an example? Are there any PHP errors visible?

    Perhaps you are trying to run PHP code in a file that is not a PHP script; <?php include(); ?> must be within a PHP script.

  18. 18. By Chad on 27th Mar ’08 at 19:17pm

    dotjay – thanks for the response!

    My pages are very basic HTML, so I simply put the PHP file in my /includes directory, and referenced the include using the following code on my page:

    <? php include ("/includes/promospot032708.php"); ?>

    The code is being used on this page on my site…

    http://www.11371southforest.com/interior_features.html

    Maybe I’m in over my head and PHP is not the optimal way for me to begin using include file logic? Any help you could provide would be appreciated! Thanks!

  19. Jon 陳’s profile 19. By Jon 陳 on 28th Mar ’08 at 02:00am

    Chad, save your files with a .php extension not .html—see the Creating PHP Files section above for more detail.

  20. 20. By Chad on 28th Mar ’08 at 06:42am

    So I resaved my .html page as a .php page, and when I try to view it, I get this:

    Parse error: parse error, unexpected T_INCLUDE in /hsphere/local/home/chadmich/11371southforest.com/interior_features.php on line 142

    Here’s a link to the page…

    www.11371southforest.com/interior_features.php

    Thanks so much for your help!

  21. 21. By dotjay on 28th Mar ’08 at 16:43pm

    Chad: It sounds like your PHP has a syntax error. Looking at the code you posted, you've got a space between the '<?' and the 'php' when it should be '<?php include(…'.

    If you want more information on PHP basics, Zend have a fairly good set of tutorials in PHP 101. There’s also a lot of information on the Practical PHP Programming wiki.

  22. 22. By Chad on 28th Mar ’08 at 17:57pm

    That did it – thanks for your help! Now off to change all my pages and links to PHP!

    I appreciate it!

  23. 23. By skimboard on 15th Apr ’08 at 08:51am

    The is the best thing ever. It have never been so easy!

  24. 24. By Stevo on 17th Apr ’08 at 16:02pm

    Hi i was wondering how to make that php code into an include code at the entrance that opens your news file and then when you click on another link it shows that file instead of me having to make a splash page to link to my news

  25. 25. By Lamdba Media on 10th Jun ’08 at 07:14am

    Interessting article. Thank you for sharing!

  26. 26. By Aphrodizzyac on 28th Jun ’08 at 11:16am

    Hi there. This all sounds too good to be true – I just wanted to ask if there are any potential disadvantages to using php includes?

    I’m considering using this to build a reeeeeeeeeeally big website and forsee that it could save me a hell of a lot of work in the long run. So before I begin the build I wanted to make sure that using php includes won’t come back to haunt me later on!

  27. 27. By Kevin on 12th Aug ’08 at 01:13am

    PHP includes are really useful, especially if you have 100 pages and need to update a menu for example.

    I’ve always used <?php include_once(menu.php); ?> for example, im pretty sure that there’s no difference it just ensures that that file is only included once to prevent duplication …

    Regards =)

  28. 28. By Design Bits on 19th Sep ’08 at 07:33am

    Excellent resource, thanks a lot!

  29. 29. By Friseur on 9th Dec ’08 at 03:18am

    Very nice tutorial for PHP newbies like me, thanks!

  30. 30. By Dana on 9th Dec ’08 at 12:29pm

    New to php. I have three php files for the footer, header and navigation. I am getting some weird results and was hoping somebody could shed some light. I am getting the php include to work but I am getting spaces (about 1/4 inch above each spot where my php file is inserted. What is stranger yet, on one computer the space only appears above the header and navigation while the footer looks fine. Totally frustrated!

  31. 31. By Werbeagentur on 5th Mar ’09 at 13:02pm

    Well, I’m very new to PHP and have some q’s can i drop you an email with my problem? I dont wanna bother you. Thanks in advance, mo.

  32. 32. By Wirtschaftsprüfer on 6th Mar ’09 at 06:22am

    Why not post on some php message board? Jon is probably too busy to handle every single request for help.

  33. 33. By EDI on 10th Apr ’09 at 23:34pm

    This was a great article. I really like this. This completely eliminates the need for a template that all the other pages can read out if. Instead, you only have to edit one place and all pages change. My only problem is that some of my pages are asp.net pages. anyway for the php file to work on the asp.net pages?

  34. 34. By arzneien on 27th Apr ’09 at 03:02am

    Nice tutorial for php-beginners. I like step-by-step help.

    But the include-function should be used only by pro’s.

  35. 35. By Tuning on 3rd Jun ’09 at 17:27pm

    wow nice one, still what i was looking for. im a noob in php and now i can start with it.

  36. 36. By Timmy on 15th Aug ’09 at 01:35am

    Thank you! Very good introduction in php.

  37. 37. By Cloo Urne on 7th Sep ’09 at 07:37am

    Hello!

    very impressive, thanks for the lively exchange of views. Keep up the great work.

    I’m primarily a user experience designer, but I’ve wanted to learn more about PHP for years — this stuff is perfect for getting me started. Thanks again!

    cu

  38. 38. By Carola on 29th Sep ’09 at 10:25am

    Php is not so complicated as many people think , you need only a good beginner help in php like this one :-)

  39. 39. By Mikersson on 30th Jan ’10 at 14:01pm

    So good!

    Thanks!

  40. 40. By JK on 12th Jul ’10 at 07:07am

    Great stuff, exactly what I was looking for.

    I’m also really digging the design of you site! Thanks so much!

Comments for this entry are closed.

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {66}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {0}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By George in Copywriting, Experience Design, Daleks & Julio:

    Thanks

  3. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  4. By DarkStar in Smoothing out the Creases in Web Fonts:

    I agree with Leicester that table is great!

  5. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

  6. By Steve Blakeborough in Display Type & the Raster Wars:

    Hi Jon, In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied…

Live the questions and one day grow into the answers.