Different layout for every other posts in a category in wordpress

Question

I am working on a wordpress site where I need every other post in a category to have a different layout.

Meaning, the first post will have image on the left, text on the right. The next post will have text on the left, image on the right. The next post (3rd post) will be back to image on the left, text on the right, and so on.

Ignore the coding because it was just a quick one, but here is a jfiddle that visually shows the effect I want. http://jsfiddle.net/U4amd/

I have figured out how to layout "even" posts one way and "odd" posts differently, but used two loops to accomplish it. This won't work though because then all the even posts are showed followed by all of the odd. Here is the code I currently have:

`

        <?php while(have_posts()) : ?>
        <?php
            $postcount++;
            if( ($postcount % 2) == 0 ) : // skip 'even' posts
                $wp_query->next_post();
            else :
        ?>
        <?php the_post(); ?>

    <div class="product clearfix color-box">

        <div class="vendor pRight fleft">
            <?php $color = get_post_meta($post->ID, 'color', true) ?>
            <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                <?php the_post_thumbnail('bones-thumb-vb'); ?>
            </div>
        </div>
        <div class="vendor-images fleft">
            <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
            <img src="<?php echo $slide01 ?>">  
            <?php the_content() ?>
        </div>

    </div>

    <?php endif; ?>
    <?php endwhile; ?>

    <?php $postcount = 0; rewind_posts(); ?>

        <?php while(have_posts()) : ?>
        <?php
            $postcount++;
            if( ($postcount % 2) != 0 ) : // skip 'odd' posts
                $wp_query->next_post();
            else :
            ?>
        <?php the_post(); ?>

    <div class="product clearfix color-box">

        <div class="vendor-images fleft">
            <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
            <img src="<?php echo $slide01 ?>">  
            <?php the_content() ?>
        </div>

        <div class="vendor pLeft fleft">
            <?php $color = get_post_meta($post->ID, 'color', true) ?>
            <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                <?php the_post_thumbnail('bones-thumb-vb'); ?>
            </div>
        </div>

        <?php endif; ?>
        <?php endwhile; ?>
    </div>
</div>`

Any help at all would be really appreciated. I'm new to php/Wordpress, so still figuring everything out. And if I need to clarify anything just let me know. Thanks!

@Crowjonah -- putting this here cause i went over the character limit in a comment -- I probably didn't do something right, but now when looking at the code in firebug, there are no .even classes assigned. Here is my code based on the above.

<?php $postcount=0;
            while(have_posts()) :        
                $postcount++;
                if( ($postcount % 2) == 0 ) $post_class = ' even';
                else $post_class = ' odd'; ?>
                <div class="product clearfix color-box">                    
                    <div class="vendor pRight <?php echo $post_class; ?>">
                        <?php the_post(); ?>
                        <?php $color = get_post_meta($post->ID, 'color', true) ?>
                        <div class="color-box-expand pad-inside" style="background-color:<?php echo $color; ?>">
                            <?php the_post_thumbnail('bones-thumb-vb'); ?>
                        </div>
                    </div>
                    <div class="vendor-images post <?php echo $post_class; ?>">
                        <?php $slide01 = get_post_meta($post->ID, 'slide01', true) ?>
                        <img src="<?php echo $slide01 ?>">  
                        <?php the_content() ?>
                    </div>
                </div>

        <?php $postcount++;
            endwhile; ?>

Thanks so much for your help man.

removing `$postcount++` right before the `endwhile` might do the trick — crowjonah, Sep 21 '12 at 20:49

crowjonah · Accepted Answer · 2012-09-21T18:22:56.000

2

You can use the same incrementing and detecting you have in your two loops, but consolidate it into one loop that assigns a corresponding even or odd class to your post wrapper:

<?php 
    $postcount=1;
    while(have_posts()) :        
        if( ($postcount % 2) == 0 ) $post_class = ' even';
        else $post_class = ' odd'; ?>
        <div class="post <?php echo $post_class; ?>">            
            <?php the_post(); ?>
        </div>
<?php 
        $postcount++;
    endwhile; 
?>

Using CSS, you can then assign

div.post.even img {
   float: left; /* etc etc */
}
div.post.odd img {
   float: right; /* etc etc */
}

edited Sep 21 '12 at 18:22

answered Sep 21 '12 at 16:56

crowjonah

2,858
1
23
27

I probably didn't do something right, but now when looking at the code in firebug, there are no .even classes assigned. Here is my code based on the above. – joshmath Sep 21 '12 at 20:41
Did you use the code from my edit 2 hours ago? I accidentally left in two `$postcount++` incrementers, which would have made the count go up 2 at a time, and if `$postcount` started at 1, it would never pass the test to be assigned the `.even` class. – crowjonah Sep 21 '12 at 20:47
That plus a making a couple of tweaks that I had messed up got it working. Thanks so much for the help! You've done more than enough, but I try to understand things as I get help on here, so if you don't mind, what does the `$postcount % 2) == 0` mean? – joshmath Sep 21 '12 at 21:28
`%` is [the modulus](http://stackoverflow.com/questions/1934173/what-does-the-percent-sign-mean-in-php), and returns the remainder. Any even number divided by 2 will return a remainder of 0. – crowjonah Sep 24 '12 at 13:29

Different layout for every other posts in a category in wordpress

1 Answers1