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.

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:

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.

Update: WordPress also has a couple other methods to highlight dynamic menu items.