A LIST Apart: For People Who Make Websites

No. 162
November 7, 2003

Keeping Navigation Current With PHP

by Jason Pearce

Turning unordered lists into elegant navigational menus has become the new favorite pastime for many web developers. Adding a unique id or class attribute to indicate which menu item reflects a user’s current page, however, can become laborious. Even if you use body id attributes instead, as ALA does, some labor is involved and it is easy to make mistakes. But thanks to PHP, we can add these current-page indicators automatically.

Consider this tutorial a marriage of Christopher Robbins’s Manage Your Content With PHP and Mark Newhouse’s CSS Design: Taming Lists. The offspring of this marriage will be a single navigational document called navigation.php. Using PHP, we will include our one-size-fits-all navigational menu into every page of our site. Unlike other site-wide includes, however, this one will know which page the user is viewing and will adjust the current-page indicator appropriately.

Keeping current

To visually indicate which page of your carefully crafted CSS navigational menu represents the current page, you typically add an id or class attribute with a currentpage value, and style accordingly. Your markup and CSS might look something like that shown next:

HTML

<div id="navigation">
  <ul>
    <li><a href="#">Page One</a></li>
    <li id="currentpage"><a href="#">Page Two</a>
		</li>
    <li><a href="#">Page Three</a></li>
    <li><a href="#">Page Four</a></li>
  </ul>
</div>

CSS

#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#navigation li {
	background: #ccc;
	border-left: 1px solid #999;
	float: left;
	margin: 0;
	padding: 0;
	}
	
#navigation a {
	color: #666;
	font-weight: bold;
	padding: 5px 10px;
	text-decoration: none;
	}
	
#navigation a:hover {
	color: #333;
	}
	
#navigation #currentpage a {
	background: #fff;
	color: #333;
	}

The result will look something like this:



The navigational menu indicates which page the user is on by displaying the Page Two link in a different color and background. The down side? As a developer, you must remember to manually remove id="currentpage" from one link to the next as you develop each page. Not so if you use PHP.

PHP is an open-source server-side language. In order to use PHP, you will need the PHP module installed on your server. Most Linux servers have this module installed, and the PHP module is also available for Microsoft servers. If you are unsure about your server or modules, just ask your web host.

What to include?

We’ll start by removing the navigational menu from all pages and placing it in a separate document called navigation.php. This document will contain just the (X)HTML that makes up your navigational menu. In this case, it will contain the above <div id="navigation"> and all of its content.

As you remove the navigational menus from each page, you’ll add in a pinch of PHP. All it takes is some basic PHP to include the content of navigation.php.

PHP’s include() function offers a handy way to call an external file from the server. Simply replace the navigational menu with this line of code, being sure to adjust for the location of the file on your server. I like to put all of my PHP includes in a folder named phpincludes. (How original.)

<?php include("phpincludes/navigation.php"); ?>

While you have your document open, you’ll also need to add a unique identifier at the very top of every page that PHP will understand, ideally appearing before the HTML tag. You’ll do this by creating a varible called $thisPage and assigning a value that is both descriptive and unique to the document.

Naming your document is easy. If you are working on the “About Us” page, assign the value About Us, like so:

<?php $thisPage="About Us"; ?>
<html><head>

Since PHP is a server-side language, the server will take care of the naming of the document and the inclusion of navigation.php well before the the file is sent to the browser. All that’s left is adding some PHP to your navigational file.

Putting it together

If you haven't figured it out, the current-page magic is determined by the PHP value of $thisPage. Since we have assigned a unique value to $thisPage for each XHTML file, we are able to craft a navigational menu that will automatically add the id="currentpage" to the appropriate link before the page is ever sent to the user. Here’s how we do it:

HTML and PHP code for navigation.php

<div id="navigation">
  <ul>
    <li<?php if ($thisPage=="Page One") 
      echo " id=\"currentpage\""; ?>>
      <a href="#">Page One</a></li>
    <li<?php if ($thisPage=="Page Two") 
      echo " id=\"currentpage\""; ?>>
      <a href="#">Page Two</a></li>
    <li<?php if ($thisPage=="Page Three") 
      echo " id=\"currentpage\""; ?>>
      <a href="#">Page Three</a></li>
    <li<?php if ($thisPage=="Page Four") 
      echo " id=\"currentpage\""; ?>>
      <a href="#">Page Four</a></li>
  </ul>
</div>

Pay attention to all of the PHP syntax. The dual equal signs and backslashes next to the nested quotation marks are required. Your links should also go to real pages on your site. I’m just using the pound symbol for simplicity, but you knew that.

Upload your files to the server and give the menu a test run. This is important, for unless you’ve configured PHP on your client or are using a tool like Dreamweaver, the PHP includes will not run locally.

If all goes well, the server will receive your request, recognize and run the PHP on your page, import your navigation.php file, and return a custom-built (X)HTML document that — like your mother — seems to always know where you've been.

Other uses for $thisPage

Though the possibilities are endless, another favorite use I have for $thisPage is focused toward search engine optimization. Since you’ve already given each document a useful name, why not go ahead and update some document-specific tags with useful content? Here are a few other uses you might find for $thisPage.

<?php $thisPage="About Us"; ?>
<head><html>
<title>Company Name<?php if ($thisPage!="")
  echo " | $thisPage"; ?></title>
<meta name="title" content="Company Name<?php
  if ($thisPage!="") echo " | $thisPage"; ?>" />
<meta name="keywords" 
content="<?php if ($thisPage!="")
  echo "$thisPage, "; ?>
company name, keyword1, keyword2,
  keyword3" />

When the file is processed and delivered, search engines will receive a document that has page-specific title and keywords, like so:

<head><html>
<title>Company Name | About Us</title>
<meta name="title" 
content="Company Name | About Us" />
<meta name="keywords" 
content="About Us, company name, 
  keyword1, keyword2, keyword3" />
Translations
Russian (webmascon.com)

Discuss

Was it good for you, too? Join the discussion »

About the Author

Jason Pearce Web designer Jason Pearce once had a great dream. Just before he awoke, a white cursor appeared, traveled to the top of his mind, and saved the dream to his Favorites menu. It was then that Jason realized he should avoid sleeping at his desk and get out more often.