2 column recent post query not respecting float right

admin管理员组

文章数量:1410730

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

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:

What I am trying to achieve:

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.

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

Improve this question

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:

What I am trying to achieve:

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.

• wp-query
• recent-posts

Share Improve this question asked Nov 2, 2019 at 6:43 Erik James RoblesErik James Robles 10744 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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>

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>

本文标签： 2 column recent post query not respecting float right