Title: Adding different styling every 3rd post
Last modified: August 19, 2016

---

# Adding different styling every 3rd post

 *  [huckmag](https://wordpress.org/support/users/huckmag/)
 * (@huckmag)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/)
 * Hi,
 * Would any be able to help me out on this query….
 * I’m trying to add a different style class to every 3rd post displayed inside 
   the loop.
 * I’d also like to use this to add a `</tr><tr>` after every 3rd post on another
   page (so I can list lots of posts to a table with 3 on each row).
 * Thanks for any help on this one!

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [dor](https://wordpress.org/support/users/dor/)
 * (@dor)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161545)
 * I’d say there may be a lot of ways to do that..
 * Put a counter into loop and fetch style information from a “style pool” using
   that counter; be sure to use “cycling fetching”…
 * Let’s say:
 *     ```
       $style_classes = array('first','second','third');
       $style_index = 0;
   
       // ...
       // in a loop:
       <span class="<?php echo "class=$style_classes[$style_index%3]"; $style_index++; ?>"> .... </span>
       ```
   
 * Does this make sense?
 *  Thread Starter [huckmag](https://wordpress.org/support/users/huckmag/)
 * (@huckmag)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161550)
 * Hi Dor,
 * I can’t get this to work. Below is the code I have…
 *     ```
       <?php
       query_posts("cat=5&showposts=3&offset=0");
       while (have_posts()) : the_post();
       $style_classes = array('first','second','third');
       $style_index = 0;
        ?>
       		<div class="<?php echo "class=$style_classes[$style_index3]"; $style_index++; ?>">
       			<div class="indexreview"><a href="<?php the_permalink() ?>" title="read the interview with <?php the_title_attribute(); ?>"><?php echo c2c_get_custom('Image URL', '<img src="', '" width="240" height="88" '); ?>alt="<?php the_title_attribute(); ?>" />
       				</a>
       			</div>
       			<h3 class="interviewheader"><a href="<?php the_permalink() ?>" title="read the interview with <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
       			</h3>
       <?php echo c2c_get_custom('Stand First', '<p>', '</p>'); ?>
       			<div class="postdate"><?php the_time('d.m.y') ?> </div>
       			<div class="commentquote"><?php comments_popup_link('0', '1', '%'); ?></div>
       			</p>
       		</div>
       <?php endwhile; ?>
       	</div>
       ```
   
 * I get the following error:
    `Parse error: syntax error, unexpected '%', expecting']'
   in [mydomain] on line 139`
 * Can you shed any light on what I’m doing wrong?
 *  [dor](https://wordpress.org/support/users/dor/)
 * (@dor)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161554)
 * First, this:
 *     ```
       $style_classes = array('first','second','third');
       $style_index = 0;
       ```
   
 * should be outside of the loop. Before `query_posts`, let’s say.
 * Next, right you are, that’s my fault, try to use one more variable, like this:
 *     ```
       <div class="<?php $k = $style_index%3; echo "class=$style_classes[$k]"; $style_index++; ?>">
       ```
   
 * Mmm… should work.
 *  Thread Starter [huckmag](https://wordpress.org/support/users/huckmag/)
 * (@huckmag)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161559)
 * Thanks! If you want more or less options do you just change the number of classes
   in that array and the number here `$style_index%3;`?
 *  [dor](https://wordpress.org/support/users/dor/)
 * (@dor)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161564)
 * I’m not using code like this,
    but you can try:
 *     ```
       // outside the loop:
       $style_classes = array('first','second','third', 'fourth');
       $styles_count = count($style_classes);
       $style_index = 0;
   
       // inside the loop:
       <div class="<?php $k = $style_index % $styles_count; echo "class=$style_classes[$k]"; $style_index++; ?>">
       ```
   
 * So, you can change “styles pool” (or, in general case, variables “pool”) and 
   loop fetching over `$styles_count`.
 * Well, you can use also a variant with no extra variable (my fault again):
 *     ```
       // inside the loop:
       <div class="<?php echo $style_classes[$style_index++ % $styles_count]; ?>">
       ```
   
 *  [ogonkov](https://wordpress.org/support/users/ogonkov/)
 * (@ogonkov)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161694)
 * [@dor](https://wordpress.org/support/users/dor/), sorry i’m not well into programming
   thing, can you explain what does `$style_index%3` mean? Or what i need google
   to know it 🙂
 * I didn’t understand what is `%` mean. I know it’s very simple, but i don’t know
   how to google it. :-[
 * upd. oh i get it
 *  [jschleuss](https://wordpress.org/support/users/jschleuss/)
 * (@jschleuss)
 * [16 years ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161704)
 * This is awesome, but I’m not sure how to implement a similar option using the`
   wp_nav_menu` tag. I’m not very familiar with PHP.
 * This is what I have. I get a parse error if I use another <?php ?> inside for
   the class of the span. Any ideas on how to make it work for this template tag?
 *     ```
       <?php
       $style_classes = array('first','second','third','fourth');
       $style_index = 0;
       ?>
   
       <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'before' => '<span class="$k = $style_index%3; echo "class=$style_classes[$k]"; $style_index++;">', 'after' => '</span>' ) ); ?>
       ```
   

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Adding different styling every 3rd post’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [style](https://wordpress.org/support/topic-tag/style/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 7 replies
 * 4 participants
 * Last reply from: [jschleuss](https://wordpress.org/support/users/jschleuss/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/adding-different-styling-every-3rd-post/#post-1161704)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics