PHP – Header and Footer Templates

Why use PHP header and footer templates? Luckily, there is a very simple answer to this question. When you need to change a piece of navigation, or an image such as your logo, or even just change the copyright year in your footer, do you want to have to go into every HTML file to change that one item? Of course not! Using a php header and footer will allow you to avoid changing all of your pages, and instead only make you change it once!

So how does it work? Simple. There are a few catches though first which you might not like, so pay attention! First, your website URLs will now end in .php instead of .html. Second, you won’t be able to test your website without using a server that can compile your PHP. As I explained in a previous post, PHP – What Is It Good For?, PHP is a server side language, as opposed to HTML, CSS, or Javascript, which are all client side languages. Client side languages are read and interpreted by an individual person’s browser, whereas server side languages are read and interpreted by the server that hosts the website before it arrives back to the individual user. Easy solutions are to either put it up live to test it (not advised), or to install an Apache server on your computer, which wasn’t the easiest thing for me to do (because I’m not very techy) but there are some good walk-throughs out there, and the software is free. I use it all the time now because I do all my sites in PHP.

But I’m not a web developer, I’m a web designer! Don’t be intimidated if you aren’t a programmer. Writing websites in php can be as little as 1% PHP and 99% HTML/CSS. I didn’t realize this until I actually tried to learn it, at which point I was much more comforted. You still make your entire site using your HTML or CSS, the PHP just decides essentially what content to put in where after you’ve made it all using your HTML/CSS.

How do I implement it? Alright, now here is your explanation. You’ll need 3 total files. One called “header.php”, one called “footer.php”, and one called “index.php”. Inside your header file, cut and paste all the header code (starting all the way at your opening html tag or doctype declaration if you have one… because you should). Then, do the same for your footer file with your footer HTML. Now, inside of your index.php file write two lines of code, one at the top, and one at the bottom, you can probably guess which goes where:

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

And that’s it, run it on a server and you are set. Still a little confused? Well here, this is what each of your files should look like:

header.php

<html>
  <body>
    <div class="header">
      Logo, navigation, et cetera goes in here
    </div>

index.php

<?php include("header.php"); ?>
    <div class="mainContent">
      <h1>Header in here</h1>
      <p>Paragraph in here</p>
    </div>
<?php include("footer.php"); ?>

footer.php

    <div class="footer">
      Footer content goes in here
    </div>
  </body>
</html>

And that’s it, got any questions, ask away!

38 Responses to “PHP – Header and Footer Templates”

  1. Zach says:

    Noob here! When you assign a class to the div’s, are those then formatted using css?

    Thanks! Great guide!

  2. David says:

    Zach,

    Yes, the classes would then be formatted using CSS, which I just didn’t focus on in this tutorial. Technically the divs that I included don’t even need to be there, they were just to help you understand the concept of the header and footer templates.

    If you have any other questions, feel free to ask!

  3. arie says:

    thank you very much. after long searching for a basic PHP site template with header and footer I have succeeded with this post.

  4. Tim says:

    Hi, Great article, but I was wondering…..
    How do you move all the links to style sheets etc out to a header.php file *and* have the file parse a validator…

    e.g. if I do this:

    the W3C validator will fail as the page does not have a for the element.
    Does this make sense? Or am I doing it completely wrong?
    Any help would be much appreciated.

    • David says:

      You wouldn’t run a validator on an individual PHP file. The PHP files sit on the server, but are not seen individually by users on their personal computers, they see the compiled versions of the header/footer templates along with the main pages, so it should validate properly after that. I hope I understood your question properly…

  5. dan says:

    really good guide… so thanks!

  6. Rob Coulson says:

    Hi, I’m still learning and have been using php for a little while.
    I have been including the header just below the opening body tag because of different pages using different style sheets and scripts etc rather than me putting them all in the include header and increasing the size of each file?
    Can you suggest how I can get over this and If I may. I am having problems with HTML5 inserting white space at the include header point? does include not work with html5 or is there a work around? Thanks.

    • David says:

      You can easily alter how the header file renders by using query parameters. So instead of calling header.php, call header.php?css=option1. Then in the header.php file, use PHP’s GET function to get the variable which identifies which CSS files you want to include. It will look something like this:

      $cssFile = $_GET[‘css’];
      if ($cssFile == “option1″)
      echo “<link rel=\”stylesheet\” href=\”blahblahblah\” type=\”text/css\” />”;
      else if …

      Regarding your HTML5 question, there shouldn’t be a problem. Just look to make sure you aren’t including any extra white space in your header.php file and your actual pages that call it. Good luck.

  7. John says:

    Thanks for the article, proved useful.

  8. vishal says:

    Hi David,
    As is mostly required, I want to give different keywords for different pages. Can you please explain with code. Though I read the parameter comment given by u above but not sure whether it will work if I give the parameter inside quotes… like

    $keyWord = $_GET[‘keyword’]

    As I have not started using php in my website, so before installing the apache, just wanted to ask if it can be done and how, cos if it will not be done I won’t go for php.

    • David says:

      You’ll want to URL encode your parameters inside of your include function call on your page. Inside the header file, where you want to access that query parameter, do the opposite, and pull it out with a URL decode.

      You’ll be using the php functions urlencode(string) and urldecode(string). That will allow the usage of quotes inside of your query parameters.

      Good luck.

  9. Ahmed says:

    Hello david i have a question i have made the header and footer files . my nav bar is in the header file ofc. i want to higlight the nav item whose page i am on. since the header file is same i cant do it using id tags. help needed

    • David says:

      Hi Ahmed,
      So, the benefit of php is it allows variables to be used across files if you use an include line. That means, all you have to do is set a variable in your page file (such as $selectedItem = 3;) before the include file statement. Then, in your header file, use that variable’s value to determine which navigation item to highlight using some simple if statements. Hope that helps.

  10. Michael says:

    One caveat: This process won’t work if you use the MVC design pattern. If your index.php is the default template which contains your redirect to the controller, i.e. $controller->invoke();, then footer.php will never be reached.

  11. graham says:

    Complete noob question here. google brought me. I have some php sites a company made for me a long time ago, and I am trying to customize some things- not even sure if this is possible. Is there any way to have multiple headers/footers, either rotated somehow ( like to include header, header1, or header2)? Or maybe I should just customize different header/footer files for the different folders and categories of my sites. What I’m trying to do is not have 1000s of pages all with the same exact content except for short unique product descriptions in the main body. I want the header and footer to basically have some of the same info for navigation purposes but have at least some variations.

    • David says:

      Hi Graham,
      So, from what I understand, you are trying to include slightly different content in your wrapping header/footer. First let me say I’d encourage keeping your navigation the same (except for highlighting active navigation). Second, what exactly are you trying to vary? You can use a random number in php and then use an if statement to run different include statements. Here’s the code for a random number:

      $random = rand(1,3); (this would set $random to a number between 1 and 3)

      Then do a quick little if statement like:
      if ($random == 1)
      include(headerfile.php);
      else if ($random == 2)
      include(headerfile2.php); (you get the idea)

      I would just warn you that users tend to like consistency, and they like to know what to expect on a new page load, so be careful doing something like this. Hope that helps though…

  12. graham says:

    Thanks David. What I am trying to do is include different variations of text. I guess it wouldn’t really alter navigation in any way or the user experience. it might just be blocks of text at the end of the footer, example. A user is not going to see more than one variation of any page, most likely. Basically I have 1000s of results pages, the main body is called from some catalog that I don’t control. I control the coding on my end, like the pages have include footer.php, include header.php. I can edit the footer, header, and other files. I write unique text content in my header and footer files, and I would like to be able to write many different versions and somehow rotate them so that I don’t have 1000s of pages with almost the exact same content. It may all be for naught, but it was just an idea I wanted to try and test out ( if possible, I know next to nothing about coding) and perhaps compare results to having my pages de-indexed- which might be what I should’ve done in the first place. This is more about web page quality and uniqueness as measured by someone other than users.

  13. raj says:

    I have tried same code but it is not shown require results, it displays same code which i use in source

    • David says:

      If you are developing on your local machine, you need to make sure that you are running a local server like Apache. Because PHP is a server side language, you need a server to interpret the code. The other problem you may be facing, is you must name your file with the php extension.

  14. M_Hacks says:

    Amazing Thanks a lot

  15. ashwani says:

    how exactly we cut header and footer of a template in html

    • David says:

      Build a single functional HTML page. Then, find the point where your HTML has to change for your other pages. This should be your dividing point for your header. Then do the same at the bottom of the page. Whatever HTML is going to remain the same on every page, that should be in your template header and footer files. Whatever changes based on the page, should be in the page that calls your header and footer files.

  16. John says:

    wow, I am completely new to php and never had done any programming but with this tutorial help it took me only few minutes to make my website worked with php header and footer. Thank you so much for such a clean and point-to-point tutorial.

  17. Walt says:

    Hi David,
    Is it possible to have my header and footer code all residing in a single external file? In other words, rather than have header.php, footer.php, leftsidebar.php, rightsidebar.php, etc., could I perhaps treat them all as individual functions, perhaps, within a single, say pageelements.php file? If so, how would I call each one from my index.php file?

    • David says:

      Yes, although in my opinion it only makes your code harder to follow. Nonetheless, you can accomplish it easily by using a query string parameter. When you include your pageelements.php file, just add on a ?portion=XXX where XXX is the “function” you want to call. Then in your pageelements file, pull the query string using $_GET[‘portion’] and the result will be the XXX part. Then use an if/else or a switch statement to run through the different options. Again, really messy code, for really no gain, but if you want to do it, you can…

    • Walt says:

      Excellent! Thanks! Through some trial and error, I also discovered I can enclose the element (sidebar, say), in
      brackets as a function (i.e. “function leftsidebar() {… ) in the pageelements file, and then call it from index.php the same way one would call any function (i.e. Works great so far, and thanks for the query string suggestion! I’m sure that will come in handy! Thanks for the prompt response!

  18. Sarah says:

    Thank you for this tutorial! I’m slowly learning the basics of how php works and this was very easy to follow.

  19. Nekesa says:

    Thanks, it was really helpful.

  20. aditya says:

    im doing it exactly this way ..!!
    now where do i call the css of all the pages

    i called it in the …. of header.php , but css clashes
    how do i load only the particular page’s css using this templating method

  21. Carl Lewis says:

    Hello,

    Thanks for the blog, it’s great! I’m having problems tho… like when I put the header in, it seems to have a mind of it’s own and just goes where ever it wants on page, why would this be? I’ve tried it all different ways but can’t seem to get it where I want it.

    I’ve attached a sample link to show you whats going on, http://www.firstchoice4hosting.com/new_page_1.php

    I built a website about 4/5 years ago using these but I can’t for the life of me figure out what I’m doing, totaly forgot everything!

    • David says:

      Your PHP header inclusion is fine, it is your HTML or CSS that is off. I assume you copied some HTML for your footer which isn’t printing out correctly. You are probably either missing an opening or closing tag, or possibly your CSS is messing everything up. Good luck.

  22. Jonathan says:

    Thank you! Probably a very noob question. But I would normally use the HTML editor option in cPanel to get a visual real quick but it seems using .php will take that option away. Is that what Apache’s for? Again, probably a very noob question. Thanks again!

    • David says:

      Yes, you are correct that cPanel will not give you the right output. PHP needs to be run via a server to render the HTML properly. Apache allows you to run a server on your local machine. You can find instructions on how to set it up easily online. If you have a Mac, you won’t need Apache because they build in a system for this purpose. You can find instructions online for a Mac as well.

  23. Mike says:

    David,

    First, great tutorial. Now my question…I am looking to include a different header and footer on each page as a result of setting a “current” class for nav menu items. You have kind of answered this but not directly and I’m not sure about the query string and if statements so I need some guidance. I want to have one header.php file and then be able to call a certain section of code for the different page headers. Thank you in advance!

  24. Beth says:

    Why do I have to rename the index.html to index.php ? Can I just embed the php code in my html?

    • David says:

      No, the php extension tells the server how to interpret the document. If you leave the html extension, all of you php code will simply print out as text.

Leave a Comment