Dynamic Menu Highlighting

ynamic menu highlighting is a way to give users a reference point with which to navigate. It is like the dot on the map that says “you are here”. WordPress.org has utilized dynamic menu highlighting.

This image illustrates that the user is currently looking
at a page under the menu “DOCS”.
By looking at the menu list you can, due to the use of the dark thick line easily ascertain that you are currently on a page within the “DOCS” or documentation section of the site.

This article will explain how to go about making a navigation menu that dynamically highlights the currently displayed page, however there are plugins available that can do most of the work for you.

Also note that if you use the Pages sidebar widget (that comes with wordpress) to display your menu, it already has a CSS class current_page_item, which you can use to achieve the same effect. You can access it like this in your CSS:

.widget_pages li.current_page_item a{
background-image:url(images/activelink.gif);
}

Overview

There are a number of components that make dynamically highlighted navigation work. These include :

1. highlighting your current location or navigation position between page loads,
2. highlighting other navigation points on mouse-over,
3. showing submenus of navigation, leaving a breadcrumb trail (Not in the scope of this article).
4. There are also many different possible approaches to achieve dynamically-highlighted navigation. These include for example Javascript, Flash, HTML and CSS in conjunction with PHP. This article covers the CSS/PHP method.

Basic Navigation Lists

The basic navigation list might look something like this:

• Page One
• Page Two
• Page Three
• Page Four

And there would likely be some bit of CSS in the pages stylesheet that would specifically style list items with the “current” ID differently from other list items.

This works fine with static HTML pages, but when dealing with dynamic pages, things become a little more complicated. Perhaps this menu is supposed to be in a sites sidebar and the sidebar is contained in a single file that is called from multiple places. Obviously, as written, only one item would ever be highlighted, no matter what page is actually being viewed. That is not what we want at all!

Making the Code Dynamic

PHP allows us to add the desired highlighting effect that reacts to whatever page is being viewed. Coupled with WordPress is_ functions, we can dynamically test what page is being viewed and then rewrite the code based on the results of that test.

There are two ways to go about this. One requires us to create a variable ($current) that will always equal the page number we are on. It also requires us to put some CSS on each page instead of keeping it all in the main CSS document. The other way means a bit more of a mess with PHP, but it means we get to keep all our styling in a single CSS document.

Method One: With CSS On Each Page

The first step in this method is to remove the one id=”current” from the list and then add a unique id attribute to each list item.

• Page One
• Page Two
• Page Three
• Page Four

The next part is where PHP comes in.

We need to write a conditional statement that will test what page is being viewed and define a variable based on the results of that test.

This piece of code uses the is_page(); function to check the title of the current page. If the title is “Page One,” the variable $current is assigned the value of “one;” if it is “Page Two,” $current becomes “two;” etc., etc. On a WordPress template, this would go in the header.php file between the tags.