Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Wed

27

SEP

2006

User-friendly Contextual Navigation with Simple PHP Includes

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.

  • To follow along with this tutorial, create a new file for your navigation. Let’s keep it simple for now:

    <ul>
    <li><a href="/">Home</a> </li>
    <li><a href="/about/">About Us</a> </li>
    <li><a href="/contact/">Contact Us</a> </li>
    </ul>

    You can probably name that file with a variety of file extensions, depending on your server’s configuration, but for the moment, let’s name it nav.php. To help keep your files organized, consider putting your include files in one directory, such as a directory called includes.

  • You can also go ahead and create 3 simple HTML webpages if you wish - one for home, one for About Us, and one for Contact Us. Don’t worry about filling any content in for them - just 3 basic HTML pages.

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

Comments

Comments, Trackbacks: 10 so far. Add yours!

  1. Very nice tutorial; clear and simple. I’m puzzled why more developers don’t think this way; I was dismayed to see the reaction to Derek Powazek’s article on navigation at AListApart - nearly eight pages of professional web developers arguing that users expect each page to have the same links, including links to themselves. When it’s as simple as your tutorial shows (it’s just as simple in ASP) it just doesn’t make sense not to kill the self-link.

    08:29 am, pdt28 September, 2006Comment by spinhead

    comment #1 permalink ·

  2. Why not just use PHP to check the URL against $_SERVER["PHP_SELF"] to see if they are a match? You might have to check for certain variations, like '/' == '/index.php', but you won’t have to define a $thisPage variable. On my (woefully out of date) site I use a function like navlink("/", "Home") and it automatically detects if it should display a link or just text.

    09:48 am, pdt28 September, 2006Comment by Patrick Fitzgerald

    comment #2 permalink ·

  3. Hi, Joel,
    Thanks for the kind feedback about the tutorial. I really do find this concept an easy one to follow. As you know, I consider myself a designer/developer, not a programmer. It was nonetheless easy to learn a basic level of PHP to figure out and implement this simple approach to navigation. As I’ve gone along I’ve gotten into more complicated PHP rules than this tutorial here, but this tutorial is truly the concept and starting point, and I learn as I go.

    For example, the websitetips.com navigation definitely got more complicated since it’s a larger site with a multitude of sections and contextual section navigation. I also include ads in specific areas of pages and sections, target book recommendations, and do a lot of things behind the scenes that is handled with PHP. Well, I do a lot of other things for that site, too, that I manage with include files and PHP.

    I also just finished a redesign of Brainstorms and Raves and launched it earlier this week (I’m still working out a few IE6 bugs, though). While I use pretty simple PHP for the main site navigation, for this redesign I combined some PHP with what Movable Type automates for creating the templates, which makes a huge and helpful difference behind the scenes for me.

    This entire site is built with Movable Type, not just the blog posts. (See the Sitemap for a glance of all that’s here.) By combining Movable Type’s automation with a little PHP I cut down the overall number of templates I need dramatically, and I was able to automate so much more behind the scenes. So, even though there doesn’t visually appear to be much different beyond the visual design, it’s totally different and much improved behind the scenes.

    And the basic logic for the massive changes behind the scenes are all based on the use of the "if it’s this page, do this; else do that" or "if it’s this page or this other page, do this," or "if it’s this page, insert this include file." Very basic, simple approach.

    Then, with Movable Type, I can use some Movable Type regex-based plugins to specify certain content based on whatever - my categories, a certain blog name, whatever. So I can combine what Movable Type will do with PHP to do things like, "if it’s this blog name, insert this PHP include file." That capability gave me the ability to re-use one template for a multitude of purposes, for example. Major stuff. I know programmers have done this kind of thing forever, but for me this is BIG. :-)

    I didn’t know hardly any PHP three years ago when I first set up this blog with Movable Type (converted from Blogger), so I wasn’t able to take advantage of things like I’ve done now for this new redesign. So I’ve learned quite a bit during that time.

    I also know I’ve only scratched the surface with PHP. I’ve learned enough during the past 3 years, though, that I’ve been able to totally change how I develop a site behind the scenes to a much easier, more efficient system that also includes things like the contextual navigation.

    The if/else logic is a simple one for my brain to wrap around, despite my expertise as a designer, developer. ;-) It’s been a fun adventure to figure out a design and then take advantage of some PHP behind the scenes as I develop the site. So I know that if I can figure this out and make everything so much easier to manage that other designers can figure this out, too, without having to learn a whole lot about PHP to do it.

    10:30 am, pdt28 September, 2006Comment by Shirley Kaiser

    comment #3 permalink ·

  4. Hi, Patrick. That’s a great approach that can work, too. Could you provide a bigger snippet here of what you do here as an example? It would be great to see a little more of that function.
    As I mentioned in my tutorial, there are lots of ways to approach this. So I GREATLY appreciate you bringing this one up.

    10:42 am, pdt28 September, 2006Comment by Shirley Kaiser

    comment #4 permalink ·

  5. Excellent. I am adding it to my site. I figured if I did it this way (horizontal):

    if ($thisPage=='about')
    {echo '';}

    then, when the user is on that page, the link is not even displayed.

    07:43 am, pdt29 September, 2006Comment by Lee Underwood

    comment #5 permalink ·

  6. Hi, Lee, I’m glad you’re going to use this approach.

    And yes, of course you could do it the way you mention, too. Instead of leaving it blank, though, you might consider using the current page in your navigation to help reflect where they are at the site, such as using bold text for that one with normal text for the navigation links, or using css to add a background color as a highlight or some other visual cue. I’m just speaking in general terms, though, without knowing your site or specific needs, as that can make a difference in the approach.

    For some examples of what I’m referring to, for this particular site, I’ve made the text bold for the current page for the main sections of the site for the top of the page global navigation and for the bottom of the page navigation: Home, Abundant Archives, Luscious Links, Subscribe, About, Contact, Search. I’ll probably implement a different approach soon, though (I just redesigned this site and I’m still working on it), more like what I do at my business site at SKDesigns or at another of my sites, WebsiteTips.com. For those, I highlight SECTIONS that the visitor is in, such as the FAQs section page, Planning Your Web Site. The main FAQs page is highlighted with a border around it and no link, while the section page, Planning Your Web Site just has a highlighted background color to provide a visual cue of the section the visitor is in at the site. It’s a visual cue that isn’t necessary to make sense of the site, but it can be helpful for those who pay attention to such things.

    On the other hand, I’ve implemented YOUR approach for subsection pages within my WebsiteTips.com site (not for the main navigation, though). For example, within the CSS section, CSS Articles, General CSS Tutorials, the subsection navigation excludes section 2 since it’s already listed directly above it. That’s handled with the same PHP that you mention doing.

    So, your own approach should depend on your particular site, the specific navigation, the type of visitors you have visiting, what would be most helpful for them to understand your site, and how they can best navigate through it easily. If you look around at some major sites that are well done and easy to navigate, you can get some good ideas about what works effectively, along with reading up on the latest research on usability studies.

    I do recommend an approach based on what’s best for your visitors and keeping the user in mind, and that certainly varies. There’s no one single "right" answer. :-)

    Best wishes with your site, Lee!

    11:13 am, pdt29 September, 2006Comment by Shirley Kaiser

    comment #6 permalink ·

  7. Nice!

    I have been trying to get the tutorial on ALA to work for about a week with very limited results.

    I followed your tutorial and it worked on the first try. Styled my list a little, and oh the possibilities!

    Thank you. I’m glad I found this site.

    Scott

    04:43 pm, pdt29 September, 2006Comment by Scott

    comment #7 permalink ·

  8. Building on the previous post, User-friendly Contextual Navigation with Simple PHP Includes, I thought I'd take things one small and simple step further by using PHP once again, this time to add a CSS class for the current page. Then it's easy to use t...

    10 Oct, 2006Trackback from Brainstorms and Raves

    trackback #8 permalink ·

  9. As a followup to my previous comment, here is the PHP function I currently use. I’m sure it can be improved because it was a quickie job written years ago.

    function navlink($url, $text, $attr="") {

    $match_regexp = preg_quote($url, "/");

    /* If URL ends in a slash, match an "index.*" file */
    if (preg_match("/\/\$/", $url)) {
    $match_regexp .= "index\..*\$";
    }

    if (preg_match("/^$match_regexp/", $_SERVER["PHP_SELF"])) {
    return( /* a span */ );
    } else {
    return(/* a link */ );
    }

    }

    You’ll have to modify the return values to send back a string using $url, $text, and $attr.

    Then I just use PHP to print the following for my nav links:

    navlink('/', 'Home');

    12:03 pm, pdt10 October, 2006Comment by Patrick Fitzgerald

    comment #9 permalink ·

  10. Patrick, thanks so much for following up on this and providing a sample of your PHP for navigation. Much appreciated. Looks interesting, and I’ll give it a try.

    Thanks again!

    06:50 pm, pdt11 October, 2006Comment by Shirley Kaiser

    comment #10 permalink ·

This discussion has been closed. Thanks to all who participated.

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

Web Style Guide - Basic Design Principles for Creating Web Sites, 2nd Ed., by Patrick J. Lynch, Sarah Horton. Yale University Press, March 2002.

Cover: HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Sixth Edition. By Elizabeth Castro. Pub. Peachpit Press August 2006.

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2006/09/27/navigation/
Page last modified 14 July, 2007 - 10:19pm PDT Page load time: 0.012181 seconds.