How To Hightlight 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:

• Home
• About Us
• Services
• Products
• Contact

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:

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

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

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

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

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

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:

is_page('about-us')

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

<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 style .current_page_item in a way to highlight it, you’re blog should be all set to highlight the current page.

Popularity: 29%

Subscribe to TheVanBlog |  Email This Post