Wrap every 4 posts in a custom wordpress loop with a div

Question

    <?php
      $args = array(
      'post_type' => 'college',
      'posts_per_page' => -1,
      'order' => 'DESC',
      'orderby' => 'menu_order'
      );

      $the_query = new WP_Query( $args );
      if ( $the_query->have_posts() ) :
      while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <div class="col-3">
        <?php the_title(); ?>
      </div>

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

Hi, I've never done this before. I'm trying to wrap every 4 posts in the loop above inside a <div class="row"></div>

Community · Accepted Answer · 2017-05-23 11:50:31Z

9

This should sort you out

$args = array(
    'post_type' => 'college',
    'posts_per_page' => -1,
    'order' => 'DESC',
    'orderby' => 'menu_order'
);

$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
    $counter = 0;
    while ($the_query->have_posts()) : $the_query->the_post();
        if ($counter % 4 == 0) :
            echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
            echo "<div class='row'>";
        endif;
        ?>
        <div class="col-3">
            <?php the_title(); ?>
        </div>
        <?php
        $counter++;

    endwhile;
endif;
wp_reset_postdata();
?>

Adapted from Wrapping a div around every third item in a foreach loop PHP

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 21, 2016 at 22:46

chapskev

9929 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chapskev Over a year ago

Great :) it was a nice challege, had me scribbling a few stuff

Đinh Tiến Vũ · Accepted Answer · 2022-12-12 13:16:32Z

1

You can follow my code, post of @chapskev is good but missing a closing div after end if

<?php $counter = 0; // 4  per list ?>
<?php foreach ($arr as $key => $value) {
  if ($counter % 4 == 0) :
    echo $counter > 0 ? "</div>" : ""; // close div if it's not the first
    echo "<div class='group'>";
  endif;
  echo 
  <<<TEXT
  <span>content</span>
  TEXT;
  $counter++;
  }
  echo "</div>";
?>

answered Dec 12, 2022 at 13:16

Đinh Tiến Vũ

1,1617 silver badges9 bronze badges

Collectives™ on Stack Overflow

Wrap every 4 posts in a custom wordpress loop with a div

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related