How to add (css) classes to only one wp_nav_menu()?

1 Views

Edit

I removed the original Question as this Q has far above 1.000 views now – which means it’s important to a lot of people – to show you something that works a) without a custom Walker & b) is easy. Note: I only removed to original Q, because it was pretty unspectacular.

The Task

Add css classes to all nav menu items inside a specific Nav Menu that was added via (admin UI) Appearance > Menu.

Read More

The function

function wpse4388_navmenu_classes( $items, $menu, $args )
{
    // prevent crashing the appearance > menu admin UI
    if ( is_admin() )
        return;

    # >>>> start editing

        // Nav menu name you entered in the admin-UI > Appearance > Menus (Add menu).
        $target['name'] = 'Topnav';

        // A targeted menu item that needs a special class - add the item number here
        $target['items'] = array( (int) 6 );

    # <<<< stop editing

    // filter for child themes: "filter_nav_menu_{nav menu name}"
    // the nav menu name looses all empty spaces and is set to lower
    // if you want to use the filter, hook your child theme function into 'after_setup_theme'
    $target = apply_filters( 'filter_nav_menu_'.strtolower( str_replace( " ", "", $target['name'] ), $target );

    // Abort if we're not with the named menu
    if ( $menu->name !== $target['name'] ) 
        return;

    foreach ( $items as $item )
    {
        // Add the class for each menu item
        $item->classes = 'classes for all items';

        // Append this class if we are in one of the targeted items
        if ( in_array( (int) $item->menu_order, $target['items'] ) )
            $item->classes .= ' only for a single item';
    }

    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'wpse4388_navmenu_classes', 10, 3 );

Was it helpful? Don’t forget to vote up! 🙂

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. I’m going to start by saying something similar to Horttcore..

    Is there a reason you can’t simply provide a differing container element for the given menu, it should provide enough specificity to style it uniquely.

    Although, you could do something like this to conditionalise menu args based on the menu’s location..

    function my_wp_nav_menu_args( $args = '' ) {
    if( $args['theme_location'] == 'your-specific-location' )
        $args = array_merge( array(
            'container_class' => 'example',
            'menu_class' => 'example2'
        ), $args );
    return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

    Above code is based on the example given on the codex page for wp_nav_menu, and could easily be extended to do any number of things.
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    Hope that helps..

  2. Maybe I got you wrong, but why don’t you add the class in your theme?
    Specify the class when you call the menu.

    <?php wp_nav_menu( array( 'theme_location' => 'Top Nav', 'menu_class' => 'span-3' ) ); ?>

  3. I had a very similar issue. I needed to target a specific wp_nav_menu() and replace the a links with a class. Here is my solution in reference to the OP:

    function theme_add_menuclass( $classes, $args ) {
    if ( $args->theme_location == 'your-menu-location' ) {
        return preg_replace( '/<li /i', '<li class="your-class"', $classes );
    }
    return $classes;
}
add_filter( 'wp_nav_menu_items', 'theme_add_menuclass', 10, 2 );

    You can use this to replace any piece in your nav menus. Hope this helps.

  4. To add a CSS class to a menu item, go to Appearance > Menu > Screen Options (top right of screen) and ensure that CSS Classes is checked. This will allow you to add CSS classes to each menu item. For multiple class names, separate each item by a space, e.g.:

    my-class-one my-class-two