Loop repeating design pattern

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; ?>

Read more here: Loop repeating design pattern

Leave a Reply

Your email address will not be published. Required fields are marked *