WordPress.org

1. streetrose
   Member
   Posted 11 months 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 11 months 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 11 months 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 7 months 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.

Reply

You must log in to post.