Wordpress Dynamic menu highlighting if page belongs to specific category

Question

I'm looking for a way to dynamically highlight a menu item anytime a user is viewing a page that is assigned to a given taxonomy or category. For example a nav bar at the top with items "Products" and "Strategy". Any page or post that is created and has the category or taxonomy "product" would cause the Products menu item to be highlighted when you are on the page for that product. I'm thinking if I could figure out a way to just apply a class to that item based on the criteria above, that would do it. Any ideas? I'm stumped on this one.

Vlad Nicula Vlad Nicula · Accepted Answer · 2011-09-23T05:50:24

I would recommend a front end approach. Here's what I'm thinking:

1) You have 2 or more categories: Products and Strategy ...

2) Each post in Products will have a body class string that contains a class which is probably called products-taxonomy or something like that.

3) With jQuery you can check for products-taxonomy or strategy-taxonomy and highlight the specific menu-item. This can be done easily with jQuery selectors provided that you add a specific class to your products category when you create your menu.

It would be something like this:
add class for products menu item : 'productsMenu'
add class for strategy menu item : 'strategyMenu'
make sure you echo the body_class

var $body = $(body); // better select just once the body
if($body.hasClass('products-taxonomy')) {
    // highlighetMenuItem should be your highlighting class
    $(".productsMenu").addClass("highlighetMenuItem");  
} else if($body.hasClass('strategy-taxonomy')) {
    $(".strategyMenu").addClass("highlighetMenuItem");
}

And yeah... you need jQuery on the front end if you want this to work. Or you could use pure javaScript in almost as many lines of code. :)

Wordpress Dynamic menu highlighting if page belongs to specific category

1 Answers