0

Im trying to figure out how to keep while loop going for posts on another section in bootstrap columns or is there way to "break it" and then keep it going where it remained? First picture shows the while loop showing 5 posts the way i want. Picture below shows how i want the next 6 posts keep going vertically. Now im getting the posts to show but it starts from the first post and just duplicates them. enter image description hereenter image description here

  <div class="container">
  <div class="row">
  <?php

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

   $blogposts = new WP_Query($args);

  $i = 0;
   while($blogposts->have_posts()) {
   $blogposts->the_post();

   if ($i < 2) :
   ?>
   <div class="col-md-6">
   <?php else : ?>
   <div class="col-md-4">
   <?php endif; ?>
  <a href="<?php the_permalink(); ?>">
    <div class="card border-0">
      <div class="card-picture">

        <img class="card-img" src="<?php echo 
      get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card image">

        <div class="card-img-overlay d-flex flex-column">
          <h5 class="card-title font-weight-bold"><?php the_title(); ?></h5>
          <div class="mt-auto"><?php the_author(); ?> - <i class="fas fa- 
      clock"></i> - <?php the_time('d/m/Y')?></div>
        </div>
      </div>
    </div>
     </a>
   </div>

    <?php
     wp_reset_query();
   $i++;
    }

   ?>



    <div class="container">
      <div class="row">

        <div class="col-md-8">
        <?php
$args = array(
    'post-type' => 'post',
    'posts_per_page' => 6,
);

$blogposts = new WP_Query($args);

while($blogposts->have_posts()) {
    $blogposts->the_post();


     ?>
          <div class="card-3">
            <div class="row no-gutters">
              <div class="col-md-5">
                <a href="<?php the_permalink(); ?>">
                <img class="card-3-img" src="<?php echo 
    get_the_post_thumbnail_url(get_the_ID()); ?>" 
    class="card-img-top h-100" 
    alt="...">
              </div>
              <div class="col-md-7">
                <div class="card-body">
                  <h5 class="card-title-3"><?php the_title(); ?></h5>
                </a>
                  <p class="card-text"><?php the_excerpt(); ?></p>
                  <div class="mt-auto"><?php the_author(); ?> - <i class="fas 
 fa-clock"></i> - <?php the_time('d/m/Y')?></div>
                </div>
              </div>
            </div>
          </div>

          <?php }
wp_reset_query(); ?>
1

'break' is the right keyword... code structure below, no custom query needed if used in a standard template.

        <?php

    $posts_per_first_section = 6; //how many posts you want to show in the first section//

    if ( have_posts() ) :
        ?>

        <!-- opening html for first loop -->

        <?php
        /* Start the Loop */
        while ( have_posts() ) :
            the_post();

            //your output per post in the first section//
            //for example//
            get_template_part( 'template-parts/post/content', get_post_format() );

        //check for 'break' out of first loop//
        if( $wp_query->current_post+1 == $posts_per_first_section ) break; 

        endwhile; ?>

        <!-- closing html for first loop -->

        <?php //checking if there are more posts to show in second loop
        if( $wp_query->current_post > 0 && $wp_query->current_post+1 < $wp_query->found_posts ) : ?>

        <!-- opening html for second loop -->

        <?php while ( have_posts() ) :
            the_post();

            //your output per post in the second section//
            //for example//
            get_template_part( 'template-parts/post/content', get_post_format() );

        endwhile; ?>

        <!-- closing html for second loop --> 

        <?php endif; //end checking if there are more posts to show in second loop

    else :

        echo 'no posts found';

    endif;
    ?>
3
  • Im sorry, looks like im too novice to add this in my code. Tried numerous times but can't figure this out even when i have the answer in front of me. – Miikinki Feb 25 '20 at 12:45
  • the suggested solution integrated into your code = pastebin.com/cehGM14e – Michael Feb 25 '20 at 17:55
  • Thank you very much for your time and help!! – Miikinki Feb 26 '20 at 12:09

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.