WordPress has a lot of built in functionality that you can tap for advanced customization. One of these which is often ignored is the ability to highlight the current page in menus with CSS. By default, WordPress assigns a special style class to the button that points to the current page. By styling this class differently from the “regular” classes the current page button is highlighted.

In this tutorial we’ll look at how to utilize the built in current page styling, how to create a menu like the one you see above and also how to hard code the functionality into a menu that is not generated dynamically by WordPress.

Identifying the custom styles

If you view the source code of a WordPress blog with a menu like the Reader’s Companion you’ll see that the menu items have been given different classes automatically by the CMS:

<div id="menu">
<ul>
	<li class="page_item current_page_item"><a href="http://expression.pinkandyellow.com">home</a></li>
	<li class="page_item page-item-9"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li>
	<li class="page_item page-item-11"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li>
	<li class="page_item page-item-13"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li>
	<li class="page_item page-item-15"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li>
	<li class="page_item page-item-17"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li>
</ul>
</div>

The important classes here are page_item which styles all the menu items and current_page_item which is only applied to the current page item. By styling these two classes independently you can get some very nice results. To demonstrate how far you can take this I’ve made a mock-up page that simulates the end output of a WordPress menu with custom styling. You can find it here.

By taking a closer look at the CSS you’ll see that the page_item and current_page_item classes have different styling. The remainder of the code is set up to make the button backgrounds expand and contract in accordance with the Sliding Doors technique from A List Apart.The CSS code on the demo page is identical to the CSS code being used to style the page itself:

page_item styles:

.page_item a {
float: left;
display: block;
background: url("img/right-over.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #DDDDDD;
text-transform: uppercase;
}
 
.page_item a:hover {
color:white;
}

current_page_item styles:

.current_page_item {
float: left;
background: url("img/left-selected.png") no-repeat left top;
margin: 0;
padding: 0 0 0 8px;
}
 
.current_page_item a, .current_page_item a:hover {
float: left;
display: block;
background: url("img/right-selected.png") no-repeat right top;
padding: 6px 15px 7px 6px;
text-decoration: none;
font-weight: bold;
color: #C7532D;
text-transform: uppercase;
}

If you already have your menu up and running properly, all you need to do is style these two classes and you’ll automatically have the current page highlighted in your menu. But this only applies to dynamic menus generated by WordPress. What happens when you hard code your menus yourself?

Assign dynamic styles to hard-coded menus

To get the same effect when you create a hard-coded menu you need to apply some clever PHP code to each of your menu items.

If you don’t understand what I mean by “hard-coded menu” consider this: By default your menu is called by a function within WordPress that lists all of your pages plus the Home page. This call usually looks something like this:

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

But this function lists all your pages. If you only want certain pages listed you have to take this function out and create a manual list yourself. This is a hard-coded menu.

To make the current_page_item class apply only to the current page item you need to add a small piece of PHP to each of your menu items. This line of code looks like this:

<?php if (is_page('home')) { echo "current_page_item"; }?>

and is applied inside the li tag of each item. To give a concrete example I have added this code to the list items in the list example at the beginning of this tutorial:

<div id="menu">
<ul>
	<li class="page_item <?php if (is_page('home')) { echo "current_page_item"; }?>"><a href="http://expression.pinkandyellow.com">home</a></li>
	<li class="page_item page-item-9 <?php if (is_page('Lesson Files')) { echo "current_page_item"; }?>"><a title="Lesson Files" href="http://expression.pinkandyellow.com/lesson-files/">Lesson Files</a></li>
	<li class="page_item page-item-11 <?php if (is_page('About the Author')) { echo "current_page_item"; }?>"><a title="About the Author" href="http://expression.pinkandyellow.com/about-the-author/">About the Author</a></li>
	<li class="page_item page-item-13 <?php if (is_page('FAQ')) { echo "current_page_item"; }?>"><a title="FAQ" href="http://expression.pinkandyellow.com/faq/">FAQ</a></li>
	<li class="page_item page-item-15 <?php if (is_page('Further Reading')) { echo "current_page_item"; }?>"><a title="Further Reading" href="http://expression.pinkandyellow.com/further-reading/">Further Reading</a></li>
	<li class="page_item page-item-17 <?php if (is_page('Contact')) { echo "current_page_item"; }?>"><a title="Contact" href="http://expression.pinkandyellow.com/contact/">Contact</a></li>
</ul>
</div>

When the page is loaded the PHP script looks to see if the page name matches the name in the is_page section and if it does, the current_page_item class is applied. Therefore the name you put in the is_page section of the PHP script must match the name of the page as created in WordPress exactly. If it does, the current page item will be highlighted dynamically.

Related posts:

1. New WordPress based site: The Reader’s Companion In conjunction with the release of my new book Sams...
2. Create a Twitter box in your sidebar As part of the new design for this blog I...
3. Center a Page Horizontally Using CSS – An Expansion This is an expansion to Anna Ullrich’s tutorial Center a...
4. Fancy Interactive Pure CSS List Boxes with Hover Effect There was an urgent need to expand the product...
5. Selected Pages – an answer for Beal In December Beal asked a question in response to my...