Including your layout using PHP Includes

PHP Includes are used to include a certain file to another file. It is commonly used amongst web designers as it allows you to change your the included (in this case, our layout) without having to edit every single page, as well as better maintain your site. This is a much better option in comparison to iFrames, which aims to do the same.

Read this before starting!

There are a certain things you should do before you start.
- Make sure that your CSS is in a stylesheet, not in style tags.
- Validate your CSS. Click here to validate.
- Your pages should all be in PHP. Not in html. Simply change the file extension from .html to .php if your pages are in HTML. If you use Freewebs or any other hosts that do not provide PHP support, then this method is not for you. I suggest you go use iFrames instead.

header.php

Firstly, create a page called header.php in your root directory.

This file is where you put your header and or sidebar coding. The header.php file holds several things that goes on every page of your site, such as your layout’s header, the reference to your external stylesheet, your navigation and sidebar, if you chose to have one.

Here is what you should essentially put onto your header.php file.


If you would like an example of an header.php file so that you can have an idea of what you should be putting here, go to my website templates page and download a template for reference.

After inserting the html and body tags as well as the reference to your external stylesheet, you may insert the code that you would usually input for your header or header image, navigation, sidebar, etc. To simply put it, the header.php file is for the top half of your site and your sidebar if you wish to have one.

You don’t need to close your html and body tags, as this will be done in the footer. If your stylesheet is not called style.css, change it to whatever your stylesheet is called.

footer.php

Now create a page called footer.php.

The footer is the stuff that goes at the bottom of the page. If you don’t have a footer, just put your body and html closing tags here.

Include other Pages

We will now include those two files to your normal pages. Copy and paste the following code to your page.


Edit the ‘Your Content Here’ parts with your own content.

Anytime you want to change your layout simply edit the header or footer page, and the rest of the pages will change. Whatever you have added or edited will appear.