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.

Answer 1

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 */
}