Custom Body Classes to give your custom post types the current-menu-item class.

I was trying to figure out a way to add ‘current-menu-item’ class to my custom post type. I had created a menu in WordPress 3.0 and added the link to my custom post type ‘portfolio’. It however did not have the styled class to indicate which page I was on in the menu. A simple work around is this.

First:  Enable Custom CSS Classes

Second: define a special class to your menu item. Can be most anything.

Third: You’ll need to add a filter for the body_class function. You can read more about it here. Here is a simple example of this filter.

add_filter('body_class','custom_body_classes');
function custom_body_classes($classes)
{
 global $post;
 // Use switch to filter through custom post types
 switch(get_post_type())
 {
 case 'portfolio':
// If custom post type is portfolio, add portfolio class to body.
 $classes[] = 'portfolio';
 break;

 }
 // return the $classes array
 return $classes;
}

Once that is setup, it will then add the portfolio class, or which ever class you’re trying to add to the body tag, if you’re on a page that is of that custom post type.

Lastly add the necessary CSS to finalize the workaround.

For me I used the following in my CSS, yours may differ.

body.portfolio #access .menu li.portfolio-menu-link a{
 background-position:50% 100%;
}

Doing so I was able to give my menu the style that would help indicate which page I or the user was on.

Let me know if you have an easier way or more friendly way to do this.

Leave a Reply

Project Details