How to Highlight the Parent Link in the WordPress Navigation When On a Child Page

Recently I was working on a project where we wanted to highlight the parent page link in the WordPress navigation when the user is on a child page.

At first, I wasn’t sure how to do this but I quickly discovered a CSS class that is added to wp_list_pages, which is frequently used for navigation, and by styling those classes the parent link can be highlighted when on a child page.

The CSS class, .current-page-ancestor, is added when wp_list_pages is used to display the navigation. Frequently, the current page is highlighted in the navigation menu and is often the hover or rollover color. For example, if I am on the About page, About is highlighted in the navigation menu. This is done using .current_page_item a. If Contact is a child page of About, About can still be highlighted in the navigation menu when you are on the Contact page by using .current-page-ancestor a.

For example, you could have the following in your CSS file:

#nav li a {color:#000000;}
#nav .current-page-item a {color:#666666;}
#nav .current-page-ancestor a {color:#666666;}

The navigation links are black. If you are on a page in the menu, such as About, the About link will be gray. If you are on a child page of the About page, the About navigation link will still be gray.

One thing I love about WordPress is that I’m always discovering new things and am constantly learning.

Do you think current-page-ancestor would be useful in your project?

You can read more about wp_list_pages in the WordPress Codex.

photo credit: haveclipperswilltravel