1

I'm getting to grips with the walker at the moment, but i need some assistance in getting my desired effect.

My walker function looks like:

class ik_walker extends Walker_Nav_Menu{
    //start of the sub menu wrap
    function start_lvl(&$output, $depth) {
        $output .= '<nav class="site-navigation" role="navigation">
                        <ul>';
    }
    //end of the sub menu wrap
    function end_lvl(&$output, $depth) {
        $output .= '
                    </ul>
            <button id="menu" class="menu-button" type="button" role="button" aria-label="Menu Toggle">
              <span class="icon-menu"></span>
            </button>
        </div>';
    }
    //add the description to the menu item output
    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
        $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        ) .'"' : '';
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        if(strlen($item->description)>2){ $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; }
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

What I need is for each a within the li of the nav, to have it's own class that start with c then a number - starting at 1.

<a href="[link]" class="c1"></a>
<a href="[link]" class="c2"></a>
<a href="[link]" class="c3"></a>

I then need a span after each a, with a class when I can specify somewhere, if possible? I know how to get the span in there, but I can't figure out from my searches if you can indeed set specific individual classes as I need to do things like:

<span class="paw-icon"></span>

Any help would be VERY much appreciated.

1

Try it like this:

class ik_walker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth) {
        $GLOBALS['ik_walker_counter'] = 0;
        $output .= '<nav class="site-navigation" role="navigation">'.
            '<ul>';
    }

    function end_lvl(&$output, $depth) {
        $output .= '</ul>'.
            '<button id="menu" class="menu-button" type="button" role="button" aria-label="Menu Toggle">'.
            '<span class="icon-menu"></span>'.
            '</button>'.
            '</div>';
    }

    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        global $ik_walker_counter;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
        $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="c'.(++$ik_walker_counter).'"';
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        if(strlen($item->description)>2){ $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; }
        $item_output .= '</a>';
        $item_output .= '<span class="'.$args->my_individual_class.'"></span>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

}

Your c1 through cn classes are tracked/counted by the global $ik_walker_counter variable, which is reset every time we start a new level. The individual class goes as new parameter in your walker arguments ( e.g., 'my_individual_class' => 'paw-icon'.

  • Could I specify a series of class for 'my_individual_class'? I noticed when I tested this that I'm not seeing the classes being added to the anchors – Doidgey Jan 10 '14 at 23:13
  • Sorry for that. There was a typo in attribuTes. Yes, you can also specify a space-separated sequence of classes for my_individual_class. – tfrommen Jan 10 '14 at 23:15
  • Ah brilliant ,thank you. What would be the best option if i needed a different my_individual_class for each span. Just use jQuery or is there an efficient way to specify this in some sort of array? – Doidgey Jan 10 '14 at 23:18
  • Why don't you use the CSS class for each menu element in the WordPress admin? If you don't see it, just activate it in the Screen Options (upper right area). Then you can use $item->classes. – tfrommen Jan 10 '14 at 23:24

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.