Support » Themes and Templates » Insert 5 different classes to first 5 posts (then rotate classes)

  • Resolved streetrose


    Ok, I can’t seem to express what I really want in the subject.

    But here’s the outcome that I really want:

    (there are like 5 classes based on bg color)

    1st post – insert .red class
    2nd – insert .orange class
    3rd – insert .yellow classes
    4rd – insert .green class
    5th – insert .blue classes

    then after the classes will rotate starting to .red again.

    6th – .red
    7th – .orange

    and so on….

    is this possible?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Yes!

    Have a look at this post and the section content color, the post has a download so you can see the code!

    It uses color-1, color-2, color-3, color-4 and color-5, color-6 and color-7, adding the class to the post class:

    So for 5 you would just change the $divisor to 5 like this:

    /* Set the class based on the modulus of the current_post counter
       $counter will be 0 to 4, we add 1 to current_post which is zero based */
    global $wp_query;
    $divisor = 5;
    $counter = ($wp_query->current_post + 1) % $divisor;
    //Add the classes to the $class variable
    $class = $counter ? 'color-' .$counter : 'color-' .$divisor;
    <?php /* Comment: We have added the $class to the post_class() */ ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>>



    $extra_classes = array('red','orange','yellow','green','blue');
    $extra_class = $extra_classes[$wp_query->current_post%count($extra_classes)];
    echo $extra_class;

    within the loop of index.php, you can either echo the css class in a post div:

    <div class="<?php echo $extra_class; ?>"> ...... </div>

    or use it in (the possibly existing) post_class():

    <div <?php post_class($extra_class); ?>> ...... </div>

    thanks, @david, for explaining the modulus operator 😉

    Sorry this is super late reply. At that time, I opted to use css to have a workaround, using the nth-child selector which is a bit problematic if I want to consider browsers that don’t support it.

    Now I’m coding a theme with a similar function, so I’m gonna do it right now with your suggestions! Thank you!

    Edit: btw, alchymyth’s suggestion worked for me.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Insert 5 different classes to first 5 posts (then rotate classes)’ is closed to new replies.