Fake mark a menu item as current_page_item/active in Wordpress

Question

I have a custom post type called Books and a page structure like this:

Home
Products & Services
- Services
- Products
-- Books

I am using Wordpress custom Menus for the 1st level navigation (displayed horizontally), and wp_list_pages to print out the subnavigation based on the page selected from the 1st level of navigation (the submenu is displayed vertically).

To make things more interesting/worse, I am only displaying Books in the submenu if I am viewing the Products or Books page.

Now, I would like to add the active and current_page_item/current_page_ancestor classes to the Products & Services, Products and Books when I am viewing a single Book (custom post type).

How should I do it?

Answer 1

First thing that comes to mind is to use the built-in walker the Nav Menus use. That would be something like that

$custom_walker = new Walker_Nav_Menu();
wp_list_pages( array( 'walker' => $custom_walker ) );

Hope that's helpful

Answer 2

You can use a php conditional to load a jQuery script for when the custom post type is active, and then use jQuery to addClass the current-menu-item class to the menu items by ID number. Look in your page source to find the menu IDs for each item. These will change if you change the menu; there' no way around that.

<?php if ( 'book' == get_post_type()) { ?>

<script type="text/javascript">

jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-1000').addClass('current-menu-item');
}); });

</script>

<?php } ?>