Custom CSS class for your menu items

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!

Advertisements
About

Web Developer @ Oakwood Creative - www.oakwood.se

Tagged with: , ,
Posted in Beginner
One comment on “Custom CSS class for your menu items
  1. […] Custom CSS class for your menu items February 2010 5 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About

WordPress Quick Tips is a blog supplying great tips about WordPress.

We hope to create a great knowledge resource for WordPress developers as well as serving a reminder for all the forgetful ones.

The blog is created and run by Vincent of Oakwood Creative

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 120 other followers

%d bloggers like this: