Title: Styling Each Alternate Post differently
Last modified: August 18, 2016

---

# Styling Each Alternate Post differently

 *  Resolved [akira01](https://wordpress.org/support/users/akira01/)
 * (@akira01)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/)
 * Hi All,
    I would like your advise on how to code my theme so that the posts in
   frontpage show different style for each alternate post (something like comment
   where you can add a style called “odd”)
 * Example:
    <div class=”**style1**“> Post 1 </div>
 * <div class=”**style2**“>
    Post 2 </div>
 * <div class=”**style1**“>
    Post 3 </div>
 * <div class=”**style2**“>
    Post 4 </div>
 * and so on.
 * Please advise. Thanks in advance

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

 *  [bpartch](https://wordpress.org/support/users/bpartch/)
 * (@bpartch)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661111)
 * Hello
 * Borrowing from comments.php in the default theme you can add this to the index
   or home.php( whichever you are using)
 * **Before the Loop:**
 *     ```
       <?php /* variable for alternating post styles */
       $oddpost = 'alt_post';
       ?>
       ```
   
 * For the division surrounding the post in the Loop:
 *     ```
       <div class="<?php echo $oddpost; ?>">
       blah, blah, blah...
       </div>
       ```
   
 * **After the above division:**
 *     ```
       <?php /* Changes every other post to a different class */
       $oddpost = 'alt_post';
       if ('alt_post' == $oddpost) $oddpost = '';
       else $oddpost = 'alt_post';
       ?>
       ```
   
 * **The .css file:**
    `.alt_post {background:red)`
 * Hope it helps. 🙂
 *  Thread Starter [akira01](https://wordpress.org/support/users/akira01/)
 * (@akira01)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661136)
 * Hi,
    Thanks for your reply.
 * Unfortunately, it doesn’t work. after putting in the code, only the first post
   is “alt_post”, the rest are all no class
 * Please advise. Thanks
 *  [bpartch](https://wordpress.org/support/users/bpartch/)
 * (@bpartch)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661137)
 * Hello
 * It’s working for me. Here is the whole file I am using:
 *     ```
       <?php get_header(); ?>
   
       <?php /* variable for alternating post styles */
       		$oddpost = 'alt_post';
       ?>
   
       <?php if (have_posts()) : ?>
   
       <?php while (have_posts()) : the_post(); ?>
   
        <div class="<?php echo $oddpost; ?>">
         <h2 title="<?php the_title(); ?>" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
         <?php the_excerpt(); ?>
        </div>
   
       <?php /* Changes every other post to a different class */
       if ('alt_post' == $oddpost) $oddpost = '';
       else $oddpost = 'alt_post';
       ?>
   
       <?php endwhile;?>
   
       <?php else : ?>
        <?php include (TEMPLATEPATH . '/404.php'); ?>
       <?php endif; ?>
   
       <?php edit_post_link('Edit this post.', '<p>', '</p>'); ?> 
   
       <?php get_sidebar(); ?>
       <?php get_footer(); ?>
       ```
   
 * Hope it helps. 🙂
 *  [Adam Brown](https://wordpress.org/support/users/adamrbrown/)
 * (@adamrbrown)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661141)
 * If you still need help:
 * [Posts with alternating colors](http://adambrown.info/b/widgets/easy-php-tutorial-for-wordpress-users/posts-that-have-alternating-colors/)
 *  Thread Starter [akira01](https://wordpress.org/support/users/akira01/)
 * (@akira01)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661145)
 * Hi, Thanks for the tips. With your latest code, it works.
 * There were some differences with the first one and the second one. First one 
   not working and the second one works.
 * Thanks a lot for the help. Really appreciated it.
 *  [Adam Brown](https://wordpress.org/support/users/adamrbrown/)
 * (@adamrbrown)
 * [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661147)
 * In his first example, the “after the division” code had a bad line:
 *     ```
       <?php /* Changes every other post to a different class */
       // $oddpost = 'alt_post'; DELETE THIS LINE
       if ('alt_post' == $oddpost) $oddpost = '';
       else $oddpost = 'alt_post';
       ?>
       ```
   

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

The topic ‘Styling Each Alternate Post differently’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [Adam Brown](https://wordpress.org/support/users/adamrbrown/)
 * Last activity: [18 years, 5 months ago](https://wordpress.org/support/topic/styling-each-alternate-post-differently/#post-661147)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics