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