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:

{code type=css}

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

      Reply

  8. 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!

    Reply

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

      Reply

  9. 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:)

    Reply

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

      Reply

  10. the code line

    <li><a href="”>Home

    is producing

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

    Reply

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

        Reply

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

    Reply

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

      Reply

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

    Reply

    • 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

      Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

  30. 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!!!

    Reply

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

      Reply

  31. 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?

    Reply

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

      Reply

  32. 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?

    Reply

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

      Reply

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

    Reply

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

      Reply

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

      Reply

  39. 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 !

    Reply

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

      Reply

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

    Reply

  44. 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!

    Reply

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

      Reply

  47. 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?

    Reply

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

      Reply

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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *