0

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: http://imgur.com/a/yB5sK

And what I intend to do is this: correctway

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!

2

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

  • Due to the fact that my knowledge of php is shallow, I don't know how to insert this code. It would be in functions.php? – user52466 Oct 12 '16 at 10:45
  • I'll update my answer with an example more applicable to your situation. My example you just use in your template. But pre_get_posts is used in functions.php – ngearing Oct 12 '16 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.