WordPress Tutorial: How to Highlight a Menu Item When Viewing a Page or any Child of a Given Page

Posted by Jay Harley on November 16, 2009 * Comments(0)

A common need that arises when building WordPress templates is that of highlighting a menu item, when the page which represents that menu item (or any of its child pages) is being displayed. Even if a page has many pages beneath it — when we are viewing any of the child pages, we will want to highlight that menu item.

We have run into this many times at Heaven Interactive when working with WordPress, so we created a simple set of functions which will help us to accomplish this, which we implement with a bit of PHP, HTML, and CSS.  Our strategy, is to change the HTML ‘class’ attribute of our menu item.  So if we are viewing a page (or one of its children), then the menu item which represents this category will be written something like:

<a class = “mainMenuCurrent”>Link Here</a>

However, if we are not viewing a page or any of its children, we may want to show a different class:

<a class = “mainMenuNormal”>Link Here</a>

When writing such a function, we need to make sure we can ascertain a given page’s ancestor.  This will allow us to highlight a menu item if one of the child pages is being viewed.

Step One: Create an Includes File Which Contains the Code To Output the Classes

You can include the two functions below by putting them in an external file in your theme directory — let’s call our file menu_functions.php

/*** BEGIN CODE ******/

function  getTopMenuClass($post, $currentID) {

$postID = $post->ID;

if ($postID == $currentID || getAncestor($post) == $currentID) {
echo “mainMenuCurrent”;
} else {
echo “mainMenuNormal”;
}
}

function getAncestor($post) {

$post_ancestors = get_post_ancestors($post);
if (count($post_ancestors)) {

$top_page = array_pop($post_ancestors);

return $top_page;

} else {

return $post->ID;

}

}

/***** END CODE *****/

Step  Two:  Include the Two Functions Below and Pull in the “global” $post Variable:

Next, you can include the functions in any script using a statement such as:

<?php

include_once(“menu_functions.php”);
global $post;

?>

Step Three:  Add the getTopMenuClass() function to the Template Which Contains Your Menu

Notice that in the code below we pass the $post variable to the getTopMenuClass() function, along with the ID of the menu item whose page the link represents.  So in the below example, the contact us page has an ID of “19″.  So when a user visits the “Contact Us” page, or any of its children, the Contact Us menu item will have a different class.

<a class = “<?php getTopMenuClass($post,19); ?>” href = “/contact”>Contact Us</a>

Step Four: Create Your CSS classes to handle the highlighted and non-highlighted states:

Lastly, you can create some CSS to handle your states:

.mainMenuCurrent a {

color:#999;

}

.mainMenuNormal a{

color:#fff;

}

In the above CSS, if the link item is currently being viewed (mainMenuCurrent), it is rendered as gray, but if it is not being viewed (mainMenuNormal), it is rendered as white.

Happy Templating!

[del.icio.us] [Facebook] [LinkedIn] [StumbleUpon] [Twitter] More »
Tags: , , ,

Jay Harley is the CEO and web architect of Heaven Interactive. As a technologist, Jay specializes in creating business productivity software and offering clients high-level media consulting services. Before founding Heaven Interactive, Jay led a double life as a web consultant and MFA New Media instructor at the Academy of Art University in San Francisco. At AAU, he enthusiastically developed several courses in web application design and scripting, and enjoyed daily interaction with design students, offering guidance, support, and camaraderie as a media professional. Jay is now squarely focused on providing Web 3.0 solutions to businesses in the form of collaboration and presentation software, by utilizing the power of the "Web as a Platform."



Related Posts:

  • No Related Post