I'm trying to modify a non-WP theme to be compatible with my newest WP project, and one of the issues is a drop-down menu item. Since it's a totally custom theme, I want to replicate the behavior of this template 1:1, I require that the "Categories" nav menu item have the class "dropdown" included in it. I could use JavaScript to catch the ID and put a class name on it, but what if the ID changes later on?

Using PHP, how can I insert the class on a single menu item?

Thanks.

I'm trying to modify a non-WP theme to be compatible with my newest WP project, and one of the issues is a drop-down menu item. Since it's a totally custom theme, I want to replicate the behavior of this template 1:1, I require that the "Categories" nav menu item have the class "dropdown" included in it. I could use JavaScript to catch the ID and put a class name on it, but what if the ID changes later on?

Using PHP, how can I insert the class on a single menu item?

Thanks.

• php
• theme-development
• menus

Share Improve this question asked Aug 6, 2013 at 23:09 Jon MittenJon Mitten 24411 gold badge44 silver badges1212 bronze badges 4

• 1 You'll probably need to create a Walker for this: wordpress.stackexchange/questions/14037/… – vancoder Commented Aug 6, 2013 at 23:15
• Seems powerful. Is it possible to create an entire drop down menu in this way? The drop-down I'm using requires a nested <ul> – Jon Mitten Commented Aug 6, 2013 at 23:50
• You can do whatever you want within the Walker class. WP's custom menu system wraps submenus in ul tags automatically, so you might want to create the bare bones of the menu there, then customize it using the walker. – vancoder Commented Aug 6, 2013 at 23:52
• I'm not seeing how to make adjustments on an individual basis. It seems like all the examples I'm looking at are affecting all element nodes of the menu equally. Any good resource to affect specific menu items? – Jon Mitten Commented Aug 7, 2013 at 5:00

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

In the Appearance > Menus panel, you can expose custom class fields by clicking the "Screen Options" tab at the top of the page. From there, each menu item will have a custom css field labeled "CSS Classes (optional)" where an admin can put any plain text class name.

You can use the nav_menu_css_class filter to target the category items:

add_filter('nav_menu_css_class', 'custom_nav_menu_css_class', 10, 2 );
function custom_nav_menu_css_class( $classes, $item ) {
    if( 'category' === $item->object ){
        array_push( $classes, 'dropdown' ); 
    }
    return $classes;    
}

and append the dropdown class.

You can use the wp_nav_menu_objects filter:

add_filter( 'wp_nav_menu_objects', 'add_nav_menu_item_class' );

function add_nav_menu_item_class( $items ) {
    foreach ( $items as $item ) {
        $item->classes[] = 'css-class-name';
    }
    return $items;
}