0

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.

Improve this question
4
  • 1
    You'll probably need to create a Walker for this: wordpress.stackexchange.com/questions/14037/… – vancoder Aug 6 '13 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 Aug 6 '13 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 Aug 6 '13 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 Aug 7 '13 at 5:00
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.

Improve this answer
1

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.

Improve this answer
2
  • and then, how do I go about wrapping the drop-items? the drop down items are the names of categories, and in the nav_menu, are grouped (visually) below the categories menu. In order for them to match this template exactly, they need to be wrapped inside a <div> and their own separate <ul>. – Jon Mitten Aug 7 '13 at 15:10
  • 1
    howto wrap particular nav items with div/ul tags - might be better served as a new question with some html structure examples ;-) – birgire Aug 7 '13 at 16:41
1

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;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.