Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Hey Folks I trying to customize a walker class to add custom classes to navigation level. Essentially there will be 3 levels of navigation.

<ul  *custom class*> 
 <li  *custom class*> 
  <ul *custom class*> 
   <li> </li>
   <li> </li>
  <ul>
 </li>
 <li> </li>
<ul> 

When a level 1 (or 2,3) LI has a ul following it, how do I add a custom class to that li and the following ul? and essentially this pattern would repeat for every other level.

Thanks!

share|improve this question
    
This may be distantly related to your question: wordpress.stackexchange.com/a/100014/21376 Maybe it will get you started. –  s_ha_dum Jul 6 '13 at 0:39

1 Answer 1

up vote 0 down vote accepted

I think Your looking for the solution :

http://shinraholdings.com/62/custom-nav-menu-walker-function/

Add this code where you calling your WP menu.



wp_nav_menu( array(
    'theme_location'    => 'navigation_menu_primary',
    'container'     => 'div',
    'container_id'      => 'top-navigation-primary',
    'conatiner_class'   => 'top-navigation',
    'menu_class'        => 'menu main-menu menu-depth-0 menu-even', 
    'echo'          => true,
    'items_wrap'        => '%3$s',
    'depth'         => 10, 
    'walker'        => new themeslug_walker_nav_menu
) ); // thanks nick


Add this code in functions.php file, you can adjust the class names from the class's function code.


class themeslug_walker_nav_menu extends Walker_Nav_Menu {

// add classes to ul sub-menus
function start_lvl( &$output, $depth ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0
    $classes = array(
        'sub-menu',
        ( $display_depth % 2  ? 'menu-odd' : 'menu-even' ),
        ( $display_depth >=2 ? 'sub-sub-menu' : '' ),
        'menu-depth-' . $display_depth
        );
    $class_names = implode( ' ', $classes );

    // build html
    $output .= "\n" . $indent . '' . "\n";
}

// add main/sub classes to li's and links
 function start_el( &$output, $item, $depth, $args ) {
    global $wp_query;
    $indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent

    // depth dependent classes
    $depth_classes = array(
        ( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),
        ( $depth >=2 ? 'sub-sub-menu-item' : '' ),
        ( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),
        'menu-item-depth-' . $depth
    );
    $depth_class_names = esc_attr( implode( ' ', $depth_classes ) );

    // passed classes
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

    // build html
    $output .= $indent . 'ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

    // link attributes
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

    $item_output = sprintf( '%1$s%3$s%4$s%5$s%6$s',
        $args->before,
        $attributes,
        $args->link_before,
        apply_filters( 'the_title', $item->title, $item->ID ),
        $args->link_after,
        $args->after
    );

    // build html
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
share|improve this answer
    
yeah that worked great to the point where I can add what I need to the submenus but not the li before. I added a jquery ul parent add class for the li and it worked. THanks! –  user31344 Jul 6 '13 at 14:44
    
Good to know its solved. –  Shahinul Islam Jul 6 '13 at 14:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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