When using the wp_list_pages function in WordPress you get a generated list of your WordPress pages.
To be able to style them, the items get several CSS classes.
Example:
<li class="page_item page-item-2"><a title="About" href="https://wpquicktips.wordpress.com/about/">About</a></li>
These classes work in most cases, but in thoose cases they don’t you can change the class by using the filter page_css_class.
The function accepts two arguments, $css_class and $page. The first is an array of all the CSS classes and the second is a Post object.
Working example:
function menu_css_class($css_class, $page){
$new_class[] = "m-" . $page->post_name;
if(in_array("current_page_item", $css_class))
$new_class[] = " m-" . $page->post_name . "-sel";
return $new_class;
}
add_filter("page_css_class", "menu_css_class", 10, 2);
In this function I check if the current array contains the default “selected class”. If so, I add a second CSS class to the new array I’ve created. This is just a quick way to check if an item is selected, but it’s not very fool proof.
Already added to the array is a CSS class that will look something like “m-the-post-slug”.
Return the array and you’re done!
Web Developer @ Oakwood Creative - www.oakwood.se
WordPress Quick Tips 
[…] Custom CSS class for your menu items February 2010 5 […]