The parent (or ancestor) page will only be highlighted if it’s actually in the menu.
They only are highlighted if they’re actually in the menu itself.
So you have your menu structure:
Vegetables, Fruits, Legumes
then your sub-menus: carrots, broccoli, etc. for veggies, apples and watermelon for fruits, etc. When you’re on the apples page, you’d hope that the Fruits menu item in your navigation will be highlighted. But, at least as far as I’m understanding today, you need to have that menu structure laid out in your navigation to have it highlight. In other words, if I only have the pages Vegetables, Fruits, & Legumes in the navigation but I don’t have sub menus Apples & Watermelon, when I’m on the Apples page, the highlighting won’t show up (as it’s doing in the image on this page highlighting Solutions.
It took forever digging through “parent” and “ancestor” class because I was hoping even to get “grand children” pages to also highlight the “grand parent” (or ancestor) class, but it wasn’t. But when I put them into the navigation, then it worked. My tricky trick was that I used some CSS to hide them (using the CSS class in the menu item itself) to hide them from the navigation as I didn’t really want all of those drop-downs there.
Whew, a bit of manual labor, but I finally got what I was looking for.
[…] Parent and Ancestor Class Highlighting in WordPress Menus (Mar 3) […]
Hey Brad! That’s one clever way of getting around it (never thought about that). :)
I figured out something different. I just insert the following code in the theme’s footer.php file right before the closing body tag .
jQuery(“li.current-page-ancestor”).addClass(‘current-menu-item’);
What it does is it adds another native WordPress nav li class to the parent page making it active/highlighted when the user is on any of its child/sub pages.
I wrote a short post explaining everything here: How to keep parent page navigation link highlighted when viewing a child/sub page
Let me know if anyone has questions. :)