0

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!

0

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 );
}
}
  • 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

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.