Highlight the Current Page In WordPress Using CSS

I’m building a new website for a client who’s requirements were to highlight the current page you’re on. The system is using WordPress so I needed to build something that was php-based. After much thought and lots of Googling, I came up with the following solution:

Here’s the code I used in header.php for the sidebar. This basically checks to see which page you’re on. If it’s the current selected page, assign the css class ‘current_page_item’ to the li node.

<div class='leftsidebar'>
  <ul>
    <li <?php if(is_home()){echo 'class="current_page_item"';}?>>
	<a href="/wordpress/">Home</a></li>

 	<?php wp_list_pages('title_li=&depth=1');?>
 </ul>
</div>

Now you’ll also need to style this guy with a bold, different font color, and/or an image. Here’s the css I used in this instance:

#leftcontent li.current_page_item a:link, #leftcontent li.current_page_item
a:visited, #leftcontent li.current_page_item a:hover, #leftcontent
li.current_page_item a:active
{
font-weight: bold;
color:#FFFFFF;
padding:0px 0px 0px 7px;
background-position: 0px 0px;
background:url(images/li_bg.jpg) no-repeat;
}

Now after you’ve got all the code plugged, you should be able to navigate through each page and it will bold, indent, and put a small orange triangle in front of the current navigation element (in my instance for example). To see it working on the site I’m finishing up check out Artelligenz.