Customizing the post presentation in the wordpress looping

Question

I am wanting to customize the looping of my posts to display the posts as follows, the first to the left and the second to the right and so on. It went wrong (and I knew it was going to go wrong), but I did a test as follows:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <p align="left"><?php the_title( '<h3>', '</h3>' ); ?>
            <?php the_time( $d ); ?> 
            <?php the_category( ' ' ); ?></p>

            <p align="right"><?php the_title( '<h3>', '</h3>' ); ?>
            <?php the_time( $d ); ?> 
            <?php the_category( ' ' ); ?></p>

        <?php endwhile; else : ?>
            <p><?php _e( 'Sem posts para exibição' ); ?></p>
        <?php endif; ?>

That was just a test to see if it worked, well, it didn’t... I’d like some help from the skulls, because I couldn’t find what I wanted in the documentation... Thank you...

Answer 1

To do things like "once this, once that," you can use the operator module. This operator works by returning the rest of a division. In such a way, just have a counter to control each time you pass by loop, and check the rest of the division by 2, something like $resto = $contador % 2;. The rest of the division by 2 tells you whether a number is even or odd, since 0 and 1 are the only possible values for this operation. Making this check (if ($resto == 1)) you can perform actions instead yes, time no. See this snippet in JS that better exemplifies the situation:

var count = 0;

for(var i = 0; i <= 10; i++){
  var resto = count % 2;
  if(resto == 1){
    $('.target').append("<p>" + i + " é impar </p>");
  }
  else{ //resto == 0
    $('.target').append("<p>" + i + " é par </p>");
  }
  
  ++count;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="target"></div>

It is possible to do the same thing in your loop. In a simplified way, you can do:

<?php

$count = 0;

if ( have_posts() ) : while ( have_posts() ) : the_post(); 

    if ($count % 2 == 1){
        $align = "left";
    } else{
        $align = "right";
    }

    ?>

    <p align="<?php echo $align?>"><?php the_title( '<h3>', '</h3>' ); ?>
        <?php the_time( $d ); ?> 
        <?php the_category( ' ' ); ?>
    </p>

    <?php ++$count; ?>

<?php endwhile; endif; ?>

Thus, the passage house of the loop, you will line up either left, or right.

But look, <p align="left"> or <p align="left"> will only justify the text to the specified direction. If you want to do something like a grid, or each post floating on a different side, my recommendation is that you use things like float: left and a certain length for each container post. But this, of course, is a kick. It all depends on what you’re trying to do!