Highlight Current Page in WordPress

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

Related posts

Leave a Reply

3 comments

  1. 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.

  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;
    }