Highlighting in WordPress Menus, current pages and parent pages

This is another post written because I was struggling for a while with an issue, so I thought I would post my solution here.

Often on a WordPress site you want to have a menu that highlights the current page. Assuming you are using the WordPress custom menus, then WordPress is smart enough to add classes to the menu items that represent where they fit in the scheme of things.

For instance:

  • li.current_page_item = The page that you are currently on (Obviously)
  • li.current-post-ancestor = Any page above in the hierarchy of the current page

What threw me for a few hours was the use of underscore _ and dash – at differing times.

If you are having trouble I would suggest going back and checking these linking symbols.

For the record, I usually set the basic color for an unselected menu item: #nav li a{ color:#fff} and then I use the following with a feature color to cover the current page, the hover state and any pages that may fall into this like parents and ancestors:

#nav li a:hover,
#nav li.current_page_item a,
#nav li.current-menu-item a,
#nav li.current-menu-parent a,
#nav li.current-post-ancestor a  {
color: featurecolor;