How to loop a while statement in PHP displaying WordPress posts?

Question

I've created a PHP while statement that displays 8 posts from WordPress in a particular layout. Now I would like to keep running this loop until all the posts are displayed. So what I've done is created a variable called posts_displayed, and I'm using that to set the post_offset and incrementing it each time a post is displayed. The original code worked as expected, but when I added the additional while statement around it, no posts are displayed.

I've updated the code such that there is one main query and loop with four different queries and loops within. The problem I am encountering now is on line 131, where I am getting an unexpected endwhile error.

    <?php $posts_displayed = 0; ?>

<?php 
   $main_query = new WP_Query( array(
     'category_name' => 'Travel',
   )); 
?>

<?php if ( $main_query->have_posts() ) : ?>
  <?php while ( $posts_displayed < ($main_query->post_count)  ) ?>

<?php 
   $first_query = new WP_Query( array(
     'category_name' => 'Travel',
      'posts_per_page' => 2,
      'offset' => $posts_displayed,
   )); 
?>

<div class="row row__padding--bottom homepage__row--one">

<?php if ( $first_query->have_posts() ) : ?>
  <?php while ( $first_query->have_posts() ) : $first_query->the_post(); ?>

    <div class="col-sm-12 col-md-6">
        <div class="journal__latest" style="background: url(<?php echo get_the_post_thumbnail_url( $post_id, 'large' ); ?>) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;">

        </div>
        <div class="post__info--container">
          <a href="<?php echo esc_url( get_permalink()); ?>"><h4><?php the_title(); ?></h4></a>
        </div>
   </div>

  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php endif; ?>

</div>

<?php 
   $second_query = new WP_Query( array(
     'category_name' => 'Travel',
      'posts_per_page' => 3,
       'offset' => posts_displayed,
   )); 
?>

<div class="row row__padding--bottom">

<?php if ( $second_query->have_posts() ) : ?>
  <?php while ( $second_query->have_posts() ) : $second_query->the_post(); ?>


    <div class="col-12 col-md-4">
        <div class="portfolio__featured" style="background: url(<?php echo get_the_post_thumbnail_url( $post_id, 'large' ); ?>) !important; !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;">

        </div>
        <div class="post__info--container">
          <a href="<?php echo esc_url( get_permalink()); ?>"><h4><?php the_title(); ?></h4></a>
       </div>
    </div>

  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php endif; ?>

</div>

<?php 
   // the query
   $third_query = new WP_Query( array(
     'category_name' => 'Travel',
      'posts_per_page' => 1,
     'offset' => posts_displayed,
   )); 
?>

<div class="row row__padding--bottom">

<?php if ( $third_query->have_posts() ) : ?>
  <?php while ( $third_query->have_posts() ) : $third_query->the_post(); ?>

    <div class="col-12">
        <div class="journal__featured" style="background: url(<?php echo get_the_post_thumbnail_url( $post_id, 'large' ); ?>) !important; !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;">

        </div>
        <div class="post__info--container">
            <a href="<?php echo esc_url( get_permalink()); ?>"><h4><?php the_title(); ?></h4></a>
        </div>
    </div>

  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php endif; ?>

</div>

<?php 
   // the query
   $fourth_query = new WP_Query( array(
     'category_name' => 'Travel',
      'posts_per_page' => 2,
     'offset' => posts_displayed,
   )); 
?>

<div class="row row__padding--bottom">

<?php if ( $fourth_query->have_posts() ) : ?>
  <?php while ( $fourth_query->have_posts() ) : $fourth_query->the_post(); ?>

    <div class="col-sm-12 col-md-6">
        <div class="journal__featured" style="background: url(<?php echo get_the_post_thumbnail_url( $post_id, 'large' ); ?>) !important; !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;">

        </div>
        <div class="post__info--container">
            <a href="<?php echo esc_url( get_permalink()); ?>"><h4><?php the_title(); ?></h4></a>
        </div>
    </div>

  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php endif; ?>

</div>

<?php endwhile; ?>

<?php else : ?>
  <p><?php __('No News'); ?></p>
<?php endif; ?>

Answer 1

I see that your code has a few issues. First of all in your first if

if ( $the_query->have_posts() )

$the_query is still undefined, as a result it does not have posts, you are defining $the_query a few lines of code below as an Instance of the WP_Query class .

Secondly you call wp_reset_postdata() conditionally, meaning that if the query did not have posts post data would not be reset.

And of course you are querying your database too many times which I don't see why you would need it.

I did some quick corrections (notice the below code is untested, I just applied quick solution I could think of)

<?php
$the_query = new WP_Query(
    array(
        'category_name'  => 'Travel',
        'posts_per_page' => 64,
    )
);
?>
<div class="row row__padding--bottom">
    <?php
    if ( $the_query->have_posts() ) :
        $i         = 0;
        $class_map = [
            0 => 'col-md-6',
            1 => 'col-md-6',
            6 => 'col-md-6',
            7 => 'col-md-6',
            2 => 'col-md-4',
            3 => 'col-md-4',
            4 => 'col-md-4',
            5 => 'col-md-12',
        ];
        while ( $the_query->have_posts() ) :
            $the_query->the_post();
            ?>
            <div class="col-sm-12 <?php echo esc_attr( $class_map[ $i % 8 ] ); ?>">
                <div class="journal__featured" style="background: url(<?php the_post_thumbnail_url( 'large' ); ?>) !important; !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;">
                </div>
                <div class="post__info--container">
                    <a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?></h4></a>
                </div>
            </div>
            <?php
            if ( 1 === ($i % 8) || 4 === ($i % 8) || 5 === ($i % 8) ) {
                echo '</div><div class="row row__padding--bottom">';
            }
            $i++;
        endwhile;
    else :
        echo '<p>' . esc_html( __( 'No News' ) ) . '</p>';
    endif;
    wp_reset_postdata();
    ?>
</div>
<?php

Hope it works for you!

Cheers!