0

I am trying to display recent posts where I have one on the left showing the image, title, excerpt and author info and on the right, just the title, date and author information. I want it to show the remaining info in the right column (stacked on one another). So far I have the one recent post on the left and the next post title on the left column but the third does not stay in the right column but rather moves to the left under the recent post #1. What I have: enter image description here

What I am trying to achieve: enter image description here

Here is my code:

<div class="row">

          <?php 

          $args = array(
            'post_type' => 'post',
            'posts_per_page' => 3
          );

          $counter = 0;


          $_posts = new WP_Query($args);

          ?>


          <?php  if( $_posts->have_posts() ) : ?>

          <?php while ( $_posts->have_posts() ) : $_posts->the_post();  $counter++ ?>

          <?php if ( $counter === 0 || $counter === 1) : ?>

          <div class="col-md-6 float-left">
            <div>
            <a href="<?php the_permalink(); ?>" class="mb-4 d-block"><?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
              the_post_thumbnail( 'full' );
            }
            ?></a>
              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <?php the_excerpt(); ?>
            </div>
          </div>


            <?php else : ?>


          <div class="col-md-6 float-right">
            <div class="post-entry mb-4">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="text-muted mb-3 text-uppercase small"><span><?php the_time('F jS, Y'); ?></span> by <a href="<?php the_permalink(); ?>" class="by"><?php the_author( ', ' ); ?></a></p>
            </div>
          </div>



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

          <?php endif; wp_reset_postdata(); ?>


        </div>
    </div>

Any help would be greatly appreciated. Thank you.

1

Try this

<div class="row">

      <?php 

      $args = array(
        'post_type' => 'post',
        'posts_per_page' => 3
      );

      $counter = 0;


      $_posts = new WP_Query($args);

      ?>


      <?php  if( $_posts->have_posts() ) : ?>

      <?php while ( $_posts->have_posts() ) : $_posts->the_post();  $counter++ ?>

      <?php if ( $counter === 0 || $counter === 1) : ?>

      <div class="col-md-6 float-left">
        <div>
        <a href="<?php the_permalink(); ?>" class="mb-4 d-block"><?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
          the_post_thumbnail( 'full' );
        }
        ?></a>
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_excerpt(); ?>
        </div>
      </div>

      <div class="col-md-6 float-right">
        <?php else : ?>



        <div class="post-entry mb-4">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="text-muted mb-3 text-uppercase small"><span><?php the_time('F jS, Y'); ?></span> by <a href="<?php the_permalink(); ?>" class="by"><?php the_author( ', ' ); ?></a></p>
        </div>




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

      <?php endif; wp_reset_postdata(); ?>
      </div>

    </div>
</div>
|improve this answer|||||
  • Thank you so much. The way this code is structured was exactly what I was looking for. It worked like a charm. Aside from that, I learned how to do it the next time I am faced with this kind of challenge. Again, Thank You So Much! – Erik James Robles Nov 3 '19 at 2:23
0

Hope this code will helpfull for you, this code will print output in zig zag(ie. one post is left and next one left ) and so on.

<div class="row"><?php 
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 3
);
$counter = 1;
$_posts = new WP_Query($args);
if( $_posts->have_posts() ) : 
  while ( $_posts->have_posts() ) : $_posts->the_post();  
    if ( $counter%2 !=0) : ?>
      <div class="col-md-6 float-left">
        <div>
          <a href="<?php the_permalink(); ?>" class="mb-4 d-block"><?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail( 'full' );
          }
          ?></a>
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <?php the_excerpt(); ?>
        </div>
      </div><?php 
    else : ?>
      <div class="col-md-6 float-right">
        <div class="post-entry mb-4">
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="text-muted mb-3 text-uppercase small"><span><?php the_time('F jS, Y'); ?></span> by <a href="<?php the_permalink(); ?>" class="by"><?php the_author( ', ' ); ?></a></p>
        </div>
      </div><?php 
    endif;
    $counter++;
  endwhile; 
endif; 
wp_reset_postdata(); ?></div>
|improve this answer|||||

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