Loop counter style

Question

I created two different styles for posts. The source code is here: wpbeginner.com/wp-themes/how-to-style-each-wordpress-post-differently.

And this is my code:

<?php $count = 0; ?>
<?php query_posts($query_string.'&posts_per_page=30'); while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>

<div id="listpostsleft">
<article id="listpostsleft-<?php the_ID(); ?>" <?php post_class("listpostsleft clearfix $class"); ?>>
text images
</article>
</div>
<div class="clear"></div>


<?php elseif ($count == 2) : ?>

  <div id="listpostsright">
<article id="listpostsright-<?php the_ID(); ?>" <?php post_class("listpostsright clearfix $class"); ?>>
images text
</article>
</div>
<div class="clear"></div>

<?php else : ?>

<div id="listpostsleft">
<article id="listpostsleft-<?php the_ID(); ?>" <?php post_class("listpostsleft clearfix $class"); ?>>
text images
</article>
</div>


</article>
</div>
<div class="clear"></div>


  <?php endif; ?>
<?php endwhile; ?>
<?php pagination()?>
<?php else : ?>

<p><?php _e( 'Sorry, nothing found.' ); ?></p>
<?php endif; ?>

But the result is this: https://i.sstatic.net/yDTOQ.jpg

And what I intend to do is this:

The first post should be to the right side and the second to the left side. The style of the other posts should follow the same standard in an infinite loop.

How can I do this?

Sorry my english!

Answer 1

You can use the Modulo Operator in PHP to check if the loop count is odd or even and then assign those elements a CSS class based on that.

$class = 'listpostsright';
if ($wp_query->current_post % 2 == 0) {
    $class = 'listpostsleft';
}

Things to note:

• In programming counting begins at 0, so this logic may look a bit backwards, but it should work.

• You don't need to a variable to count the loop Wordpress has already provided that in the $wp_query object.

• And never use query_posts use pre_get_posts instead.

Update: Here is an example of how to use this in your template.

<?php
// Use pre_get_posts to alter your query.
// This would be done in your functions.php
while (have_posts()) :
    the_post();

    $class = 'listpostsright';
    if ($wp_query->current_post % 2 == 0) {
        $class = 'listpostsleft';
    }
?>

    <article id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>
        Positioning of your elements here, you should be able to do with css alone. Unless it is much more complex than your example.
    </article>

<?php endwhile; ?>

Arithmetic OperatorsPHP

pre_get_posts