Tutorial: Uniform/consistent navigation (or other site elements) using PHP

Hey guys, I just thought I would share this technique for dynamically updating certain aspects of a web page throughout an entire site, without updating each page individually. Although a lot of you probably already know this technique, I figured I'd share it with those who might not.

You need to have PHP enabled on your webserver for this to work properly.


So say you have a navigation div, that you want to show up on every page of your web site. If you are using the traditional method of having it in every HTML file of your site, simply do this:

1. Create a new file, and call it something like navigation.php

2. Copy this exact code below and paste it into the navigation.php file:

Code:

<?php

function showNavigation() {

echo '                  ';
}
?>

3. Copy (and delete from your HTML pages) the specific div that you want to be able to recur on all pages of your site, say for example, this code that might appear on your HTML pages;

Code:

<div id="navigation">
     <ul>
        <li>Home</li>
        <li>About</li>
        <li>Portfolio</li>
     </ul>
</div>

4. Now copy the code above from your HTML page(s), and paste it in between the 2 quote marks in the navigation.php file.

5. On every page where you want this div to appear, at the very top line of the file, declare the following, obviously replacing the filename with whatever yours is called:

Code:

<?php include('navigation.php'); ?>

6. In all your HTML files, wherever you want your navigation to appear (typically, it's simply the spot where you cut and pasted the div code from earlier), declare the following:

Code:

<?php showNavigation(); ?> 

obviously replacing showNavigation with whatever you happened to call your function in the php file.

7. Make sure to upload the php file to your web directory, and make sure that in step 5 the file is referenced correctly per your specific hierarchy.


If you guys have any questions about this process let me know. You can do this with multiple elements of a site, not just navigation. It makes updating pages much easier, and vastly increases the likelihood that your site will stay consistent. If any of you happen to use this tutorial, let me know as Id like to see the results.