Loop repeating design pattern

Question

Seems like a simple problem but I'm having issues dealing with it.

Here's the layout I need

loop one

Feature

loop two

Secondary

tert - tert - tert

Secondary

tert - tert - tert

Secondary

etc

Easy enough to do feature as a separate loop. But I want to repeat the 1 col (secondary) 3 (tert) col layout. The problem is the container(s) around the tert elements, and closing them at the right stage as the loop could feasibly end at a single or two terts or after a Secondary. Here's what I have so far.

<?php 

$args = array(
'post_type' => 'advice',
'offset'=>1
);
$counter = 0;
$offset = 2;
// the query
$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>
  <?php echo '<div class="clearfix">'; ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
      <?php 

      if ($counter % 4 == 0) {


        get_template_part('templates/content', 'advice-secondary');
        $offset++;
        $counter++;

      } else {
            if ( $offset % 3 == 0 ){
               echo '</div>';
               echo '<div class="three-split-bg bg-light">';
               echo '<div class="container wrap">';

             }
             get_template_part('templates/content', 'advice-tert');
               $offset++;
               $counter++;

      }?>


  <?php endwhile; ?>
  <?php echo '</div>'; ?>
  <?php else : ?>

  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

  <?php endif; ?>

Answer 1

You could use 3 separate loops, and break out of each loop early once you've got enough posts.

For example, here is a 2 column grid with a single query:

$q = new WP_Query( ... );

if ( $q->have_posts() ) {
    ?>
    <div class="columns">
        <div>
            <?php
            $counter = 0;
            while( $q->have_posts() ) {
                $q->the_post();
                the_title();
                $counter++;
                if ( $counter === $q->post_count/2 ) {
                    break;
                }
            }
            ?>
        </div>
        <div>
            <?php
            $counter = 0;
            while( $q->have_posts() ) {
                $q->the_post();
                the_title();
                $counter++;
                if ( $counter === $q->post_count/2 ) {
                    break;
                }
            }
            ?>
        </div>
    </div>
    <?php
} else {
    echo 'No posts found';
}

Notice how I counted each post as it was displayed, then exited the loop early when the counter was halfway through?

Arbitrary Columns

Note that here the columns are all of the same design, and the conditional check has been changed.

$q = new WP_Query( ... );

if ( $q->have_posts() ) {
    ?>
    <div class="columns">
        <?php
        $columns = 2;
        for ( $i = 1; $i < $columns; $i++ ) {
            echo '<div>';
            $counter = 0;
            while ( $q->have_posts() ) {
                $q->the_post();
                get_template_part( 'column','post' );
                $counter++;
                if ( $counter > $q->post_count/$columns ) {
                    break;
                }
            }
            echo '</div>';
        }
        ?>
    </div>
    <?php
} else {
    echo 'No posts found';
}

Note the get_template_part call, simplifying the template.

With these 2 examples, and some basic math you can turn these into any combination of columns

Alternatively, have rows of posts floated to the left and make each post 50% width or fixed width, using CSS to avoid PHP entirely

Answer 2

OK I found a solution. It is far from an elegant one though, I feel like my conditional statements could be improved greatly if anyone could help me with that:

....
while ( $the_query->have_posts() ) : $the_query->the_post();
if($counter == 0):
        get_template_part('templates/content', 'advice-secondary');
        $counter++;


    else:
            if($counter == 1){
              echo '<div class="three-split-bg bg-light">
                      <div class="container wrap">
                        <div class="row">';
            };

            echo '<div class="text-left col-xs-6 col-md-4 content">';
              get_template_part('templates/content', 'advice-tert');
            echo '</div>';
            $counter++;

            if ($the_query->current_post +1 == $the_query->found_posts || $counter % 4 == 0) {
               $counter = 0;

              echo      '</div>
                      </div>
                  </div>';
            };

    endif;
endwhile;
...

Answer 3

Do you really need multiple loops? Are you getting different content for each section? If not you can manage with one single loop and display differently with flexbox.

.parent {
   display: flex;
   flex-direction; row;
   flex-wrap: wrap;
}

.children {
   flex: 1 1 33,33%;
}

.children:nth-child(1),
.children:nth-child(5) {
   flex-basis: 100%;
}

Something like that would help. You can create more complex child selectors for more repetition.