Brainstorms and Raves - Mobile';}?>

skip to navigation

User-friendly Contextual Navigation with Simple PHP Includes
06:21 PM - Sep 27, 2006

Usability experts continue to tell us not to have a live hyperlink pointing to the current page, as it can be confusing for visitors. With some basic, simple-to-use PHP and one PHP include file, you can customize your navigation so that the current page does not have a live hyperlink to itself. In addition, you can manage your entire site’s navigation from that one include file, making your site’s navigation management convenient, efficient, and easy to maintain. Today’s post is a short tutorial on how to create this type of navigation with a couple of short snippets of PHP code, clean and lean HTML markup, and one PHP include file for your entire site.

There are a multitude of ways to accomplish this, but I’ll show you a very basic approach that’s easy to implement, an approach that I use as the starting point for my site design and development projects. I’m writing this with the idea that you know at least a little about PHP already.

OK, on to the magic of PHP...

  1. The first step is to give each webpage a name using some PHP. Later we’ll use PHP to reference that name in the navigation.

    At the very top of your webpage, before the doctype, add a PHP value to name your page. Here’s the PHP code for top of the Home page:

    <?php $thisPage='home';?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD ...
    ...

    The top of the About Us page:

    <?php $thisPage='about';?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD ...
    ...

    The top of the Contact Us page:

    <?php $thisPage='contact';?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD ...
    ...

  2. Next, add a little PHP to your navigation markup so that when it’s the home page, there won’t be a link, and otherwise the home page will have a hyperlink.

    <li> <?php
       if ($thisPage=='home')
          {echo 'Home';}
       else
          {echo '<a href="/">Home</a>';}?> </li>

    That bit of PHP says that if the page name = 'home' to echo this (Home with no link); else (otherwise) echo that (Home with a hyperlink). So, the navigation links via your home page would look like this:

    Continue with the next navigation item:

    <li> <?php
       if ($thisPage=='about')
          {echo 'About Us';}
       else
          {echo '<a href="/about/">About Us</a>';}?> </li>

    Then, visitors to the About page would see this navigation:

    Repeat for the Contact Us page:

    <li> <?php
       if ($thisPage=='contact')
          {echo 'Contact Us';}
       else
          {echo '<a href="/contact/">Contact Us</a>';}?> </li>

    Then, visitors to the Contact page would see this navigation:

    So, your navigation behind the scenes should now look like this:

    <ul>

    <li> <?php
       if ($thisPage=='home')
          {echo 'Home';}
       else
          {echo '<a href="/">Home</a>';}?> </li>

    <li> <?php
       if ($thisPage=='about')
          {echo 'About Us';}
       else
          {echo '<a href="/about/">About Us</a>';}?> </li>

    <li> <?php
       if ($thisPage=='contact')
          {echo 'Contact Us';}
       else
          {echo '<a href="/contact/">Contact Us</a>';}?> </li>

    </ul>

    Note that I do recommend removing the excess carriage returns after you’ve tested the navigation and have finalized it for your website project. I’ve formatted them here to help make the code easier to understand visually, that’s all.

  3. Then, within your Home, About Us, and Contact Us webpages, add a PHP include where you want the navigation. Here’s how I include the nav.php file:

    ...
    <body>

    <?$root = $_SERVER['DOCUMENT_ROOT'];include $root . '/path/to/includes/nav.php';?>

  4. Upload the files to your Web server’s test area for testing. As always, it’s important to test your pages to make sure everything works as intended.

Use some CSS to style your navigation, and you’re set!

You can use this basic concept in a multitude of ways for your site and to build upon this very basic concept. In addition to the navigation, I use this basic concept for the topmast area, the footer area and bottom of page navigation, section navigation, and elsewhere. Another helpful use for a PHP include is for the goodies between your <head> </head> element tags.

To make site management easier, consider information or page elements that are repeatedly used within your pages, as you can use PHP includes for these along with a little PHP where needed to customize the content for pages needed.

In conclusion, what I’ve shown above is just one of the millions of different ways to accomplish the same thing with user-friendly contextual navigation. I’ve found the above approach to be a pretty basic concept that can be built upon and used in a multitude of ways, too.

Added 14 October, 2006: I wrote a follow-up to this with more: see Part 2: User-friendly Contextual Navigation with Simple PHP Includes (9 October, 2006).

More

top