Creating Navigation Highlights

11-13-2009 written by Travis Berry

Course_and_Bearing_(Navigation)
When creating this site I decided I wanted to have the navigation bar have a different color highlight the current page. I dived in thinking it would be a simple problem. Turns out I was wrong.
It’s not impossible but it’s not easy. As you can see above, I eventually got it to work. This article was of immense help. Just follow along and hope for the best.

One final tip, if your home page is different from the blog page, use the is_page(‘originalpagename’) not is_home() and use is_home() for the blog page.

Update: This is the code I used for those interested.

<ul><li<?php if ( is_page('about') || is_404() ){ echo ' class="current_page_item"
';}?>><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<li<?php if ( is_home() || is_page('blog')|| is_single() || is_search() || is_archive()) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>/blog/">Blog</a></li>
<li<?php if ( is_page('work') || is_page('video') || is_page('web')) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>/work/">Work</a></li>
<li<?php if ( is_page('contact')) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>/contact/">Contact</a></li>
</ul>

2 Comments

  1. Steven Bradley, November 13, 2009:

    I’m glad you found my article helpful Travis. It can be a little tricky to get right, but hopefully not too hard and I do see you managed to get things working here.

    Nice job.

  2. Travis Berry, November 13, 2009:

    Thank you for your excellent how-to. I tried to follow a different one before yours, not very helpful.


Leave a comment


back to blog