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.

Shopify's Cycle lets you alternate between things within a loop. Here's my example:

    <div class="{% cycle 'first', 'second', 'third' %}">
      {% include 'product-grid-item' %}
    </div>

My question, is there anything like this for Wordpress? I'd love to be able to cycle through some kind of setting - such as class names - as each item in my loop is printed.

share|improve this question

4 Answers 4

up vote 0 down vote accepted

Short answer, no.

But that is a pretty cool feature!

To so something similar in WordPress, you'd need to code some kind of iterator in PHP and have it do the logic for you. For example:

$classes = array( 'first', 'second', 'third' );
$iteration = 0;
if ( have_posts() ) : while ( have_posts() ) : the_post();
    $iteration = $iteration >= count($classes) ? 0 : $iteration;
    $class = $classes[$iteration];
    ?>

    <div class="<?php echo $class; ?>">
        <!-- Whatever other stuff you need to do -->
    </div>

    <?php
    $iteration++;
endwhile; endif;
share|improve this answer

There's nothing built into core but it's easy to make something like this yourself. Here's an example that would give posts classes post-count-1, post-count-2, post-count-3, post-count-1, ....2, ....3, ...1, etc.:

<?php
\\ start the counter at 1
$counter = 1;
\\ start the loop
while->have_posts() : the_post();
\\ figure out our count
$count = 'post-count-' . $counter % 3;
?>
<article <?php post_class( $count ); ?>>
    \\ some more stuff like the title and content
</article>
<?php
\\ advance the counter
$counter++;
\\ keep looping until the end
endwhile;
?>

If you wanted plain English classes, you'd need an if or switch statement to set $count. This example also uses post_class which gives you some other useful classes.

ADDENDUM: I should add that if you don't need extensive browser support (:nth-child() CSS selector is really the right solution if you need the classes purely for styling. jQuery also supports this selector and you can use it to add the classes after page-load if you need better-than-the-CSS browser support.

share|improve this answer

Not exactly, but WordPress does have body_class and post_class , which by default will give you custom selectors, which can further be customized with any name or variable of your choosing.

http://codex.wordpress.org/Function_Reference/body_class
http://codex.wordpress.org/Function_Reference/post_class

You are also able to use them as a filter, for example;

add_filter('body_class','my_class_names');

function my_class_names($classes) {
    // Some conditional
    $classes[] = 'my-custom-class-name';
    // return the $classes array
    return $classes;
}

ps. Sorry I misunderstood the question, didn't realize you wanted it exactly the same in terms of numerical classing.

share|improve this answer

This is one of my favorite helpers in Rails (which Shopify created a link to in its Liquid template language). I wrote a function similar to this for WordPress, enjoy:

/**
 * Cycle/alternate unlimited values of a given array.
 * For instance, if you call this function five times with wp_cycle('three', 'two', 'one'),
 * you will in return get: three two one three two. This is useful for loops and allows you to
 * cycle classes.
 * For instance, foreach ($posts as $post) { echo '<div class="'.wp_cycle('odd','even').'">...</div>'; }
 * would alternate between <div class="odd">...</div> and <div class="even">...</div>. Neat, huh?
 * You can pass any data as args and as many as you want, e.g. wp_cycle(array('foo', 'bar'), false, 5, 'silly')
 *
 * @param mixed Accepts unlimited args
 * @return mixed
 * @author Matthew Boynes
 */
function wp_cycle() {
    global $wp_cycle_curr_index;
    $args = func_get_args();
    $fingerprint = substr( sha1( serialize( $args ) ), 0, 7 );
    if ( !is_array( $wp_cycle_curr_index) ) $wp_cycle_curr_index = array();
    if ( !isset( $wp_cycle_curr_index[ $fingerprint ] ) || !is_int( $wp_cycle_curr_index[ $fingerprint ] ) ) $wp_cycle_curr_index[ $fingerprint ] = -1;
    $wp_cycle_curr_index[ $fingerprint ] = ++$wp_cycle_curr_index[ $fingerprint ] % count( $args );
    return $args[ $wp_cycle_curr_index[ $fingerprint ] ];
}
share|improve this answer

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.