WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Insert 5 different classes to first 5 posts (then rotate classes) (4 posts)

  1. streetrose
    Member
    Posted 1 year ago #

    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?

  2. Digital Raindrops
    Member
    Posted 1 year ago #

    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:

    <?php
    /* 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 ); ?>>

    HTH

    David

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    <?php
    $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>

    edit:
    thanks, @David, for explaining the modulus operator ;-)

  4. streetrose
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags