Basic Page Layout using PHP Include
php include
I hope that I won’t confuse too many people with this article.
Please note, if you do not know how to build a web page using basic PHP DO NOT read this article.
This article is NOT for those readers who are using WordPress or Joomla to build there web sites, this is for the guys like me who still use the old fashioned way of doing things. If you need helping building a web site with WordPress (which is much easier for beginners anyway) go to http://www.createyourownwebsite.co.za
For the guys and girls who are still using the old traditional way; I was asked by a friend of mine to help him to orginize his “self made” web site a bit.
I use the technique described below to make it easier for me to maintain my web sites and to help getting all the pages to be uniform.
Where to start
This layout tip will help you to keep your web site more uniform throughout the site.
Before we start I might mention that I am still building my web sites in the old fashion of tables combined with style sheets. Purely because I am too lazy to learn to do it with style sheets only. So this article is not for web design fundies and it is not for people who would like to learn how to build a web site the style sheet way.
Step 1
In order to use this method you must work in PHP.
First I create a blank page and on it create a table that is 800 pixels wide, auto height, centered on the page and had three rows.
I then set the background colour of the table to white and if you would like your content block to stand out more or be better defined you can change the background colour to anything you want. In the example below the page background is #ddd3b7 and the table background is #FFFFFF
Basic Page Layout
The three rows in the table will now represent your web site’s header, body and footer.
You will see just now that I do it this way to make it easier later on to change the content of your header and footer.
Remember to also include your title, description and keywords meta tags in the template so that you do not have to do it for each page you create.
Save this file as index.php or template.php
Step 2
Now create two new files called header.php and footer.php
In these files you put whatever you want in your header and footer. If you do not know what to put in your footer I always put my about us | contact us | privacy policy | terms links in there. Google likes to see these links on your site, thus it increases your search ranking. You can also use your footer file for banner ads.
But do not worry too much about what you put in there because you will be able to change it very easily.
After you created the header and footer files make ABSOLUTELY sure there are NO <html> <header> or <body> tags in those pages.
A conventional page’s HTML will look like this, not
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body>
<p align=”center”><a href=”http://www.saskipper.com/index.php”><img src=”index_files/saislogo.jpg” alt=”skipper licence” width=”417″ height=”150″ border=”0″></a></p>
<p align=”center”><a href=”http://www.saskipper.com/index.php”>Home</a> |
<a href=”http://www.saskipper.com/Services.php”>Services</a> |
<a href=”http://www.saskipper.com/Courses.php”>Courses</a> |
<a href=”http://www.saskipper.com/Surveyors.php”>Surveyors</a> |
<a href=”http://www.saskipper.com/Downloads.php”>Downloads</a> |
<a href=”http://www.saskipper.com/Contact.php”>Contact Us</a> |
<a href=”http://www.saskipper.com/About.php”>About Us</a> |
<a href=”http://www.saskipper.com/links.php”>Links</a> | </p>
</body>
</html>
You have to delete everything from <html> to <body> and then again delete everything from </body> to </html> so that the only script that are left over are those which you want to have displayed in the header (in this case) of your pages. You must delete everything in red and keep everything in green. Your header file’s content will now look something like this
<p align=”center”><a href=”http://www.saskipper.com/index.php”><img src=”index_files/saislogo.jpg” alt=”skipper licence” width=”417″ height=”150″ border=”0″></a></p>
<p align=”center”><a href=”http://www.saskipper.com/index.php”>Home</a> |
<a href=”http://www.saskipper.com/Services.php”>Services</a> |
<a href=”http://www.saskipper.com/Courses.php”>Courses</a> |
<a href=”http://www.saskipper.com/Surveyors.php”>Surveyors</a> |
<a href=”http://www.saskipper.com/Downloads.php”>Downloads</a> |
<a href=”http://www.saskipper.com/Contact.php”>Contact Us</a> |
<a href=”http://www.saskipper.com/About.php”>About Us</a> |
<a href=”http://www.saskipper.com/links.php”>Links</a> | </p>
Do the same for your footer file and upload both to your server.
Now go back to your main page, that is the index or template file you created in step 1.
Step 3
In the area where you want to put the header of your pages, click once in the open row and then switch to HTML view or in HTML view look for the first <td> tags and between the first <td> and </td> tags you enter the following script:
<?php require_once(‘header.php’); ?>
The script should now look like this:
<table width=”800″ border=”0″ align=”center” cellpadding=”3″ cellspacing=”0″>
<tr>
<td>
<?php require_once(‘header.php’); ?>
</td>
If your web pages are in directories other than your root directory you can either enter
<?php require_once(‘../header.php’); ?>
Or
<?php require_once(‘./header.php’); ?>
Or
<?php require_once(‘http://www.yourdomain.com/header.php’); ?>
If you specified the wrong include URL or you forgot to upload the header file the page will only load up to where it needs this file and then stop.
Now do the same with the footer file.
Step 4
Upload all the files to your server and you should now have a page with one table. In the top row of the table will be the contents of the header file, the middle row will still be open, that is where you can type the content of your page and the bottom row will be displaying the content of the footer file.
The reason I do it this way is because you can now easily change the content of your header or footer file. If you have a web site which is several pages big and you want to add a link to your header, all you do is add it to the header.php file, upload it to the sever and the change will be effective on all your pages.
You can do the same with a sidebar. In fact you can do this with any area of your web site where you would like to easily update the content of a certain area.
Look at http://www.stilbaai.info/ . There I used this technique in the header and footer as well as on the left and right sidebars. Any one of those 4 fields I can change throughout the site by updating only one single file for each area (header, footer, left sidebar, right sidebar)
I included three basic files for you to download. You can use these files, just chanhe the content of the header and footer files. Click Here to Download the Sample-files
<p align=”center”><a href=”http://www.saskipper.com/index.php”>Home</a> |
<a href=”http://www.saskipper.com/Services.php”>Services</a> |
<a href=”http://www.saskipper.com/Courses.php”>Courses</a> |
<a href=”http://www.saskipper.com/Surveyors.php”>Surveyors</a> |
<a href=”http://www.saskipper.com/Downloads.php”>Downloads</a> |
<a href=”http://www.saskipper.com/Contact.php”>Contact Us</a> |
<a href=”http://www.saskipper.com/About.php”>About Us</a> |
<a href=”http://www.saskipper.com/links.php”>Links</a> | </p>
