Posted Tuesday, August 25th, 2009 at 10:00 AM under PHP Tutorials.
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!
Noob here! When you assign a class to the div’s, are those then formatted using css?
Thanks! Great guide!
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!
thank you very much. after long searching for a basic PHP site template with header and footer I have succeeded with this post.
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.
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…