How To Highlight The Current Page In WordPress

One of the more common questions people ask about WordPress is how to highlight the current page in the main navigation. It’s a nice effect that aids usability by giving your visitors a cue as to where they are within your site. It’s also surprisingly easy to achieve.

Highlight Your WordPress Page Links

Many themes are designed with a simple html and css navigation bar that displays your home page and a list of your WordPress pages. It might look something like the following:

In the above navigation bar each of the links would be a WordPress page with the exception of Home, which would be a link back to your blog’s home page. You can see how About Us is styled differently to indicate it’s the page your visitor is currently viewing. The code WordPress uses to display the html for the above is:

1
2
3
4
<ul>
 <li><a href="<?php echo get_option('home'); ?>">Home</a></li>
 <?php wp_list_pages('title_li='); ?>
</ul>

The code above is taken directly from the WordPress default theme, but it’s very typical of free and premium themes as well. The code in the list-item provides a link to your blog’s home page and the following line of code uses a WordPress template tag to run through all your WordPress pages and wrap them in html list-item and link code.

The html that us ultimately produced will look like the following code block. Note that I’ve replaced the actual URL each link would point to with a # for simplicity.

1
2
3
4
5
6
7
<ul>
 <li><a href="#">Home</a></li>
 <li class="current_page_item"><a href="#">About Us</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Contact</a></li>
</ul>

The key to the above code is the class=”current_page_item” which WordPress automatically adds through the wp_list_pages template tag. When your viewing the About Us page the class will be applied to the list-item containing a link to the About Us page. When you’re viewing the Contact page the class will be applied to the list-item for the Contact link.

Given this class will only appear on the currently viewed page all you need to do highlight the page is give the current_page_item class a look that makes it stand out. How you highlight the current page link is up to you and will depend on the style of your theme, but a simple way to highlight the link is to give it a different background-color and a different color for the text itself.

Highlighting Your Main Blog Page

Everything above works great for highlighting the link in your navigation when you’re viewing a page, but what about when you’re on your blog’s home page? The home page link wasn’t being produced with the wp_list_pages tag and won’t automatically have our class applied. We need to find a way to have the class added when you’re viewing the home page.

Fortunately WordPress makes this easy through the use of conditional tags. Combined with a little bit of php we can apply the class just as above. The conditional tag used to check if the current page is your main blog page is called is_home() and the code you would use to add the current_page_item class can be seen below.

Note: If you’ve set WordPress to use a static front page as your home page you’ll want to use the is_front_page() conditional to test the true home page of your site. is_home() tests to see if the page is your main blog page. See Andrew’s comment below.

1
2
3
4
<ul>
 <li<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <?php wp_list_pages('depth=1&title_li'); ?>
</ul>

The code we’re concerned with is:

1
<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>

All the code above is doing is checking to see if we’re viewing the main page of the blog and if so add the current_page_item class to the list-item. The css in place for the pages will do the rest. Pretty simple.

Highlight Blog Posts And Other Blog Pages

Of course your blog has more pages than just the main page. You have post pages, search pages, and archive pages. Your main navigation likely won’t include all these pages, and the code we’ve been using here doesn’t so we’ll highlight the home page whenever we’re viewing one of these other pages.

All we need to do is add a few more conditional_tags to our Home link

1
2
3
4
<ul>
 <li<?php if ( is_home() || is_single() || is_search() || is_archive() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <?php wp_list_pages('depth=1&title_li'); ?>
</ul>

is_single tests to see if we’re on a single post page, and is_search and is_archive test to see if we’re viewing any of the search or archive pages as you’d expect. The double pipe || is php to say or. So the statement is testing if we’re on the main blog page or a single post page or a search page or an archive page and if we’re viewing any of those pages add the current_page_item class. Our css will handle the highlighting as it has above.

Nothing too hard right?

What If Your Navigation Isn’t Using The WordPress wp_list_pages Tag?

Occasionally you’ll come across a theme that doesn’t use wp_list_pages to create the main navigation. Maybe your blog uses a lot of WordPress pages, but you only wanted a few to show in the navigation. Your developer may have decided to hard code the html instead of using the WordPress tag.

One more time WordPress to the rescue. Even if your theme doesn’t take advantage of wp_list_pages to automatically add the class you can add it in same manner we added it to the main blog page, that is with a conditional tag. This time we’ll use is_page() and specify exactly which page we want to test for.

You can test for a specific page if you know it’s WordPress id. Say your About Us page us id 9. You’d write the conditional as:

1
is_page('9'

What’s that? You don’t know the idea of your page? That’s ok. You can also check for it’s permalink. Your About Us page will likely be called about-us and you could use it in the conditional like the following:

1
is_page('about-us'

Putting it all together your hard coded navigation might look like:

1
2
3
4
5
6
7
<ul>
 <li<?php if ( is_home() || is_single() || is_search() || is_archive() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
 <li<?php if ( is_page('about-us')) { echo ' class="current_page_item"'; } ?>><a href="#">About Us</a></li>
 <li<?php if ( is_page('services')) { echo ' class="current_page_item"'; } ?>><a href="#">Services</a></li>
 <li<?php if ( is_page('products')) { echo ' class="current_page_item"'; } ?>><a href="#">Products</a></li>
 <li<?php if ( is_page('contact'))  { echo ' class="current_page_item"'; } ?>><a href="#">Contact</a></li>
</ul>

As long as your css is in order and you’ve styled .current_page_item in a way to highlight it, your blog should be all set to highlight the current page.

Download a free sample from my book, Design Fundamentals.

86 comments

    • MissAnn I’m not sure what the difference in the code is. Am I missing something? It wouldn’t be the first time.

      Are you asking about the dash in about-us?

      If so that’s how WordPress will generate the page slug for About Us. I’m pretty sure the way I have it is right, but it’s easy enough to try the other if I do have it wrong.

  1. Well I’ve been trying ot figure this out, but I just can’t seem to get it. I think i’m stuck on the CSS part.

    I need to give each link an ID (because I’m using background images for the links instead of text). And for whatever reason, the current_page_item is not being put into effect, I assume because the ID I’m applying to the UL, the LI, or even the specific link, is being given priority.

    Any help would be appreciated, I can post or email my CSS/HTML if necassary.

    Thanks!

    • Sorry I didn’t respond sooner Marc. Have you been able to work this out?

      The code above assumes you’re using the default WordPress class. If you need IDs you’ll have to use something different. You could adapt my last example where I hard code the links and add an ID to each link instead of adding the same class to each link.

      You’ll then need to add your styles to the IDs you set up instead of the current_page_item class.

      If you can’t get it working feel free to email me your code. I don’t think the comment field here will display it easily.

  2. this post helped me, but not in a copy paste way, putting it together wth other snippets i came up with this, and it worls like a treat :)

    <li> <a href="/order”>Order

    so you kinda helped, but your code gave some errors because of some missing bracets, but a small thanx is in place:)

    • Glenn if you want to send me an email with the code you tried to add, I’ll see if I can edit your comment to get it in there.

      I’m glad the post kind of helped. Sorry about the errors. Could you let me know where they are so I can fix them. WordPress will strip out some code at times. I thought I found all the missing bits, but I guess I’m still missing a few.

      Thanks.

  3. the code line

    <li><a href="”>Home

    is producing

    Parse error: syntax error, unexpected ‘}’, expecting ‘,’ or ‘;’ in [URL]

      • If Bogatabeav’s fix below doesn’t work, it could be that as you have to watch that the quotation marks aren’t being changed to typographic quotation marks.

        It looks like the second in the pair is getting converted to the typographic one.

  4. m’s problem fix.

    The last four links, listed in the last bit of code, you need to add a second parenthesis.

    Example: ( is_page(’11′)
    to
    ( is_page(’11′))

    That should fix your errors.

    • Glad you liked the post Jason.

      Try something like:

      li.current_page_item a:hover { your style here }

      Match the style to whatever you already have set for the active link so it won’t appear to change.

  5. Just a coupla pointers to solve problems I encountered:

    - the code elements still seem to be missing ; between the ‘ of the echo statement and the } This was the reason for m’s error above.

    - is_home() doesn’t work when you’re using a static front-page in your wordpress configuration. You need to use is_front_page() instead in this case.

    • Thanks Andrew. I thought I had caught all the missing semi-colons, but I guess not. They seemed to display in some places, but not others. Hopefully I really have caught them all this time.

      Good point about is_home() and is_front_page(). I made a note in the post to call attention to it.

      Thanks again

  6. Hey man! you are so humble.. I guess great persons AND programmers are… Yours is the best, simplest and most extensive explanation on how to do this that I could find over the web.
    Thank you so much.

  7. Great post. This does 50% of what I want. Is there a way to include parent pages too?

    For example if I have mysite/shop/women, women is highlighted. But if I go to mysite/shop/women/item1, women is no longer highlighted. The items change too much to create an array. Since I’m using pages and not posts, I can’t use is_category() or is_tag()

    Thanks

    • I hear you. It’s been a little while since I looked into that, but if memory serves it was not easy and required more hacks than I would want to use.

      See if either of these posts helps

      Adding Class To The WordPress Page Menu

      New page menu function in WordPress 2.7

      I linked to both of them in this post on creating drop down menus in wordpress

      All 3 posts have info on getting hooks into your menus to help style them.

      I’m not sure if any will be enough to help you with what you’re trying to do. If not come back here and comment again or send me a message through my comment form. I’ll see if I can find the info for you. Memory is telling me it’s not as easy as it should be, but I’m sure someone has figured out how to do this and it’s possible more recent versions of WP make this easier.

  8. Nice writeup!

    I found a method that worked great also –

    if you end your
    wp_list_pages() function walue with “&title_li=” (example “wp_list_pages(‘depth=1&title_li=’)), it by default will throw in the “current_page_item” class name into the class tag.

    If this doesn’t work for you, please send me an email at falkon303@gmail.com and I’ll try to help out when I have time for sure.

  9. Hello,
    My question is not directly related to your post, but
    I very much hope for your help.

    As far as I know the page widget in the sidebar adds current_page_item automatically.

    In some themes this works, but there are themes where the current_page_items are not showing up. I have a menu where the current_page_items are showing up correctly, but not in the sidebar page widget.

    Is there something I need to do – add a code in the sidebar.php or somewhere else? I have spent days and daysresearching this subject, but have not found anything useful

    Many thanks in advance.

  10. Yes, this concerns me too!
    Thank Steven for obviously perfect solution, that’s just what I’ve been searching for, but menu on all child pages does not pick this effect.
    Is there any way I can tell WordPress to highlight menu section if user is at the child page of this section?
    Thank you!!!

    • Thanks Vladimir. I think it depends on how deep your structure goes. For example I am highlighting the blog link in the main navigation here on all pages inside the post. If I remember correctly there wasn’t a good solution for highlighting anything below the main navigation though.

      It’s been awhile since I’ve looked and I just made a note to look again. If I can find something I’ll write another post or add to this one.

  11. Thanks Steven for this great tutorial. I have a seemingly simple question though:

    I am using a hardcoded nav, and I have a static home page, and my blog is another section called pin-ups, however this button is never highlighted.

    So I am using a static front page, with a statement.

    How can I highlight my blog section that is currently pin-ups, if its my blog but not my home page?

    • Thanks Patrick. If you look at the example where I test to see if we’re on the home page and if so add the current_page_item class it would work the same way for the other items in your hardcoded navigation.

      The difference is in the conditional you use. WordPress lets you test for a lot of different things. Here’s the page on conditional tags from the codex.

      If I’m understanding right pin-ups is your entire blog and not just one specific category in the blog. You might need to tie several conditionals together using the OR operator ( || ). Something like

      if( is_home() || is_single() || is_category() )

      How many and which conditionals you use depends on how you have the blog set up and when you want the button highlighted.

      Hope that helps.

  12. Thanks for the reply Steven. Your right, pin-ups is my entire blog, and its in my nav, however its not my homepage. Is there a way for me to test if its my home page, and if its false, then to select the pin-ups?

    Right now I am using:
    <li>pin-ups

    But its isn’t highlighting pin-ups button. So I’m thinking I need to check if its the home page with “is home”, and say false?

    • It sounds like what you want is to use the not operator ( ! )

      You can try:

      if( !is_home() ){ }

      Add an exclamation point before the conditional and it’s basically testing for false instead of true.

  13. Hi,

    First of all Thank you for post! Really helps. Im using old style oportunity: “What If Your Navigation Isn’t Using The WordPress wp_list_pages Tag?” :)

    For me like this didn’t work is_page(‘about-us’), but works with numbers well:
    php if ( is_page(’1′) || is_page(’2′) || is_page(’3′) || is_page(’4′) ) { echo ‘ class=”current_page_item”‘; }

    I left highlighting for submenu pages too.

    • Antonio as long as about-us is the page slug it should work. You can use the id, slug, or title of the page to test for that page. It shouldn’t matter which you use, but I typically use the slug since I find it the easiest to work with.

      Here’s a page from the WordPress codex on is_page().

      As long as everything else is working it’s not a big deal whether you test for id, slug, or title.

      I’m not sure if I answered your question. I hope so, but if not let me know and I’ll try again.

    • i am new in wordpress please can you tell me which file i have to inclue this page.

      Actually i want to add class for other active page rather then home page.

  14. Good information here :)

    I am working on a wordpress blog right now and couldn’t find how to highlight my active menu.

    is_page(‘about-us’) is all I need ! Thanks for sharing this awesome piece of code !

    • Hi Rahul. Hard to know without being able to see your code, but it might be that the class names have changed. I just looked at the WordPress.org site and I’m seeing class=”current” instead of class=”current_page_item”

      I haven’t had a chance yet to jump into 3.3 and get to know any changes. Usually everything will still work after an upgrade, but naturally things will change here and there.

      Visit a page on your site and view the source code through your browser. Look for the class being used on the link for the page you’re on. It might just be you’ll need to change the class name in the css.

  15. Really great blog. As my website is based on WordPress and it works good but i was confused about how to highlight the link. But i got the idea.
    So, Thanks for sharing such a useful stuff.

  16. Thanks for this, very helpful! Just out of interest, to solve this is_home()/is_front_page() issue, why not just add them both with an ‘or’?

    ie.

    That way, if you or your theme user decides to change to static, there’s no issues!

    • Thanks Toby.

      You can use both is_home and is_front_page with an OR if you want, but keep in mind they don’t refer to the same thing.

      is_home refers to your main blog page. is_front_page refers to the page that displays on the root of your domain. That may or may not be the main blog page. It could be any page on your site.

  17. Great post. It got me started with what I wanted to do. I am having an issue with how this functions with one of my plugins. Hopefully someone can help.

    I’m using WP e-Commerce on a site I’m building. It bases the product detail page on the single blog post page. By using the above method, when you go to the product detail page, the highlighted navigation switches from “Products” to “Blog”.

    Is there a work around for this?

    • Thanks Jeremy. Yep, since the products are really posts the parent is the blog.

      You probably have to try one of the other conditional tags. I’m not sure which as I’m not familiar enough with WP Ecommerce. I would think they’ve set up something consistent with all their product pages so the system knows it’s a product page and not a regular post.

      If you check some of the examples on the conditional tags page there are also some examples about finding all children of a single parent. You might have to modify one of those examples.

    • I’m not sure how up to date the Starkers theme is. .current_page_item gets created by the wp_nav_menu code you use to display a menu. It’s possible Starkers isn’t using that.

      Is there a specific need for Starkers? I’ve been using Underscores (_s) as a started theme and it works well.

Leave a Reply

Your email address will not be published.

css.php