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.

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.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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'.

share|improve this answer
    
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 –  Mat-visual Jan 10 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. –  t f Jan 10 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? –  Mat-visual Jan 10 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. –  t f Jan 10 at 23:24
    
Thank you for all of the help –  Mat-visual Jan 10 at 23:38

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.