Tutorials

Headers and footers

This tutorial will teach you the usefulness of PHP includes, in this example with header and footer files.

Lets say, you’ve got a big site with many pages. On each page you have the <html>, <head>, <title> and </title> tags, header image and the sidebar, and they all look identical on all the pages. When you change your layout, you have to change all the HTML pages to the new layout’s HTML, with different images, colors and style.

With header and footer pages and PHP enabled on your server, you’ll only have to change the header and footer files to the new layout, and all the other pages will change automatically!

What the PHP function does is to include the file specified in the ()s. You can read more about includes here.

Lets say this is your index.html page. In the same directory you also have a me.html page, a pets.html page, a blog.html page, lots of pages! All the pages have the same layout, the only thing that changes is the content. 

<html>
<head>
<title>Welcome to my site!</title>

<style type="text/css">
a {
// lots of styles
}
</style>
</head>
<body background color="black">
<img src="header.png" />
<div style="postion: absolute; blabla"><b>Sidebar!</b>

- Navigate
- Navigate
</div>
<div>Content!!!!! Blablabalabla</div>
</body>
</html>

The first thing you have to do if you want to use headers and footers on your page is to rename all your files so their extension is .php. index.html becomes index.php, for example, and pets.html becomes pets.php.

Then we will have to create the header and footer files! Look at your layout HTML, and copy everything that is above the content - the header and stuff. Paste it into an empty Notepad (or other plain text editor) file, and name it header.inc.

Your header.inc file should look something like this:

<html>
<head>
<title>Welcome to my site!</title>
<style type="text/css">
a {
// lots of styles
}
</style>

</head>
<body background color="black">
<img src="header.png" />
<div style="postion: absolute; blabla"><b>Sidebar!</b>
- Navigate
- Navigate

</div>
<div>

Notice that just before the content starts, it cuts off. Now we’ll create the footer.inc file. Do the same, but this time copy the HTML that is below the content. In my case, it is this:

footer.inc

</div>
</body>

</html>

Upload your header.inc file and footer.inc to the same place as all your pages are.

Then, open all your files, and remove the layout coding and all other parts that are the same on every page, so only the content is left. Above the content, add this:

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

And below the content, add this:

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

This way, PHP will look for the files header.inc and footer.inc, and if they are found, they are included to your page.

Look how much less text you have to type on every page!

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

Content!!!!! Blablabalabla

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

Save and upload. If you’ve done it right, your page will look exactly the same, and if you view source the coding will look identical to the first version of your page (the one that wasn’t using PHP). But when you change your layout next time, just change header.inc file and the footer.inc file. All pages will automatically have the new layout!

Note: you can name your included files anything you like with any extension you like (e.g. .html, .php, .htm, .txt), as long as you remember to change the include code. For example, if you named your header and footer files top.html and bottom.html, you should change your include code to this:

<?php include("top.html"); ?&gt

…for the header, and this:

<?php include("bottom.html"); ?&gt

…for the footer.

I hope this tutorial was useful, and that I didn’t make it sound more difficult than it is. ^_^

Comments

Error Comments are closed for this entry.