Incrementing a class in a custom walker

1 Views

I have written a custom walker that I am using with wp_nav_menu but I need to iterate through 4 custom classes, and I’m not sure how to do this. Basically, each menu-item <li> needs to be given a class of color1, color2, color3 or color4, cycling back to color1, lather, rinse, repeat, in that order.

Ordinarily I would do this with a $i and a $i++, but how do I do this in the Walker class?

Read More

EDIT: My Walker class code: 

class Salamander_Advent_Walker extends Walker_page {
function start_el(&$output, $item, $depth, $args) {
    if ( $depth ) {
        $indent = str_repeat("t", $depth);
    } else {
        $indent = '';
    }

    $advent_thumbnail = get_post_meta($item->ID, 'advent-thumb', true);
    $advent_slug = get_post_meta($item->ID, 'advent-slug', true);
    $advent_oneliner = get_post_meta($item->ID, 'advent-oneliner', true);
    //$description = get_post_meta($item->ID, 'advent-thumb', true);

    $output .= $indent . '
    <li class="active color4">
        <a href="#day'. $advent_slug .'">
            <span class="day">
                <strong>'. $advent_slug .'</strong>
                <span>&nbsp;</span>
            </span>
            <span class="content">
                <small>'. $advent_slug .'</small>
                <img src='. $advent_thumbnail .' width="126" height="91" alt="advent" />
                <strong>'. $advent_oneliner .'</strong>
            </span>
        </a>';                      
}

}

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Use a class variable to keep the ‘index’ of the colour you wish to display. Increment each time it’s used, and check if it goes over, in which case set it back to 1.

    class Salamander_Advent_Walker extends Walker_page {
    private $color_idx = 1;
    function start_el(&$output, $item, $depth, $args) {
        if ( $depth ) {
            $indent = str_repeat("t", $depth);
        } else {
            $indent = '';
        }

        $advent_thumbnail = get_post_meta($item->ID, 'advent-thumb', true);
        $advent_slug = get_post_meta($item->ID, 'advent-slug', true);
        $advent_oneliner = get_post_meta($item->ID, 'advent-oneliner', true);
        //$description = get_post_meta($item->ID, 'advent-thumb', true);

        $output .= $indent . '
        <li class="active color'.$this->color_idx.'">
            <a href="#day'. $advent_slug .'">
                <span class="day">
                    <strong>'. $advent_slug .'</strong>
                    <span>&nbsp;</span>
                </span>
                <span class="content">
                    <small>'. $advent_slug .'</small>
                    <img src='. $advent_thumbnail .' width="126" height="91" alt="advent" />
                    <strong>'. $advent_oneliner .'</strong>
                </span>
            </a>';              
        $this->color_idx++;
        if ($this->color_idx > 4) {
            $this->color_idx = 1
        }
    }

}

  2. Create a separate function:

    function alternate()
{
    static $i = 0;
    $args = func_get_args();

    return $args[ $i++ % func_num_args() ];
}

    In your walker use it like this:

    $class = 'color' . alternate( 1, 2, 3, 4 );
// somewhere in your output string:
$output .= '<li class="active ' . $class . '">';

  3. You can do that by setting the incrementing number to a global variable.

    function start_el(&$output, $item, $depth, $args) {
    //globalize the variable
    global $ac_color_num;
    //check if it is set, or if it is 4 (to reset to 1)
    if ( !isset($ac_color_num) || $ac_color_num == 4 ) { $ac_color_num = 1; }
    $ac_color_num++
    if ( $depth ) {
        $indent = str_repeat("t", $depth);
    } else {
        $indent = '';
    }

    $advent_thumbnail = get_post_meta($item->ID, 'advent-thumb', true);
    $advent_slug = get_post_meta($item->ID, 'advent-slug', true);
    $advent_oneliner = get_post_meta($item->ID, 'advent-oneliner', true);
    //$description = get_post_meta($item->ID, 'advent-thumb', true);

    //use $ac_color_num in the output.
    $output .= $indent . '
    <li class="active color' . $ac_color_num . '">
        <a href="#day'. $advent_slug .'">
            <span class="day">
                <strong>'. $advent_slug .'</strong>
                <span>&nbsp;</span>
            </span>
            <span class="content">
                <small>'. $advent_slug .'</small>
                <img src='. $advent_thumbnail .' width="126" height="91" alt="advent" />
                <strong>'. $advent_oneliner .'</strong>
            </span>
        </a>';                      
}