Highlight Current Page in Wordpress

Question

What is the easiest method of highlighting the current page from a nav menu in Wordpress?

Answer 1

There's an article in the Wordpress Codex that should help you.

Answer 2

Current page highlighting sometimes depends on if it happens to be implemented in the CSS of the theme you're using, but this should work in a basic theme.

<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>

CSS: Change the color in the CSS to whatever highlights well against the background of the menu bar or background image. Change the # to the container of the list pages call above.

#menu ul li a:active, #menu ul li.current_page_item a
{
color:#000;
}

Answer 3

If your top nav links are manually inserted in your theme, you can do something like this:

<a href="page-link" <?php if(is_page('page-name') : ?>class="highlight"<?php endif; ?> >Link text</a>

I do something similar to this in a theme where certain pages and categories have special headers. There are a few conditional functions that help with this:

• is_page('page-name')
• is_category('category-name')
• is_home()
• is_front_page()

Edit: Didn't see the comment about it being dynamic WP links. You might still be able to use these functions if the query data you get back contains the page slugs.

You might instead consider using the get_pages() function and loop through it manually, doing an is_page() check on each one to see if the current page ID matches the ID of the page you are at in the array.

Answer 4

You can use the dtabs plugin, which does just that, for both pages, categories, home, and other types of pages.

Answer 5

When I put this in place of my old, static nav:

<a href="services" <?php if(is_page('services') : ?>class="services-btn-active"<?php endif; ?> >Graphic Design and Web Design Services</a>

I just get a blank screen upon refresh. Any ideas?