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

[theprizefight]

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:

<?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;

<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:

<?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:

<?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.

 

[Cabbit]

Usually the <?php include('navigation.php'); ?> is enough and that links to a html or php file with the navigation rather than adding a unnecessary step to the complexity.

 

[angelwatt]

Usually the <?php include('navigation.php'); ?> is enough and that links to a html or php file with the navigation rather than adding a unnecessary step to the complexity.

Yes and no. For the simplistic example here using a function is overkill. However, if you put a few functions in a file then you only have to include that one file early on, then later you just call the function when you want to output a certain part. That would keep you from having to create multiple files for each section of the page. I use a mix currently.

 

[SrWebDeveloper]

Regardless of function or not, I've seen tons of code where files are included named "header.php", "section.php", "well_1.php", "footer.php" and "stats.php". All self explanatory that you can create a dynamic template system - which is what this is all about, I think.

 

[atomicbop]

To take this one step further, you can also declare some variables and if statements to do various things, like declare a page title, or have current states on your nav. For example, in a file called top.php perhaps

$page = $_SERVER['REQUEST_URI'];

if (($page == '/index.php') || ($page == '/')) { 
    $title = 'Your Site - Home';
}

Then, in all your html documents between the title tags, put <?php $title ?>

You can then control all of your page titles from one centralized page.

For current states on navigation, you can use the same $page variable.
So, your li tags might look like this now:

<li><a <?php if (($page == '/index.php') || ($page=='/')) { echo 'class="current"'; } ?> href="http://www.yoursite.com/">Home</a></li>

You could of course use case/switch instead of if statements.

I've been using this technique for years and it saves so much time and headaches in the long run. If your client wants another menu item, you just have to add it to one page and you're set.