How to loop repeater rows so 3 in a div and then next 3 more in a div, etc

• discoparrot

• August 28, 2015 at 11:54 pm

Hi, ACF community!

I’m coding a yoga studio staff page where there are three floated repeater row divs per containing div. Teacher, teacher, teacher in a containing div and then teacher, teacher, teacher in a containing div below that and so on.

This code makes it so there is one teacher per div, but I can’t figure out how to code 3 teachers per div. (I can get it so there’s one div containing all the teachers, but they’re floated and different lengths so they hit each other, so I want each 3 in a containing div.)

Here’s my code (thank you!):

<?php /* Template Name: Teachers */ ?>

<?php get_header(); ?>

<div class="wrapper">

    <h2><?php the_title(); ?></h2>
    
    <?php while ( have_posts() ) : the_post(); ?> 
        
        <?php

		// check if the repeater field has rows of data
		if( have_rows('teachers') ):

 		// loop through the rows of data
    	while ( have_rows('teachers') ) : the_row(); 
		
		// vars
		$teacher_bio = get_sub_field('teacher_bio');
		$teacher_name = get_sub_field('teacher_name');
		$teacher_image = get_sub_field('teacher_photo');

        // display a sub field value ?>
        
        <div id="teachers" class="cf">
        
            <div class="teacher">
            
            <img src="<?php the_sub_field('teacher_photo'); ?>" />
            
            <p> <?php echo $teacher_name; ?> </p>
            
            <?php echo $teacher_bio; ?>
            
            </div> <!-- .teacher -->
        
        </div> <!-- #teachers -->

    	<?php endwhile;

		else :

   		// no rows found

		endif;

		?>

	<?php endwhile; ?>

</div> <!-- .wrapper -->      
    
<?php get_footer(); ?>

• John Huebner

• August 29, 2015 at 2:20 am

This is just your row loop with some additions. I also modified and id of a div so that you don’t repeat id values, you should probably use a class of “teachers” rather than an id.

// check if the repeater field has rows of data
if( have_rows('teachers') ):
  // loop through the rows of data

  // add a counter
  $count = 0;
  $group = 0;
  
  while ( have_rows('teachers') ) : the_row(); 
    // vars
    $teacher_bio = get_sub_field('teacher_bio');
    $teacher_name = get_sub_field('teacher_name');
    $teacher_image = get_sub_field('teacher_photo');
    if ($count % 3 == 0) {
      $group++;
      ?>
        <div id="teachers-<?php echo $group; ?>" class="cf group-<?php echo $group; ?>">
      <?php 
    }
    ?>
    <div class="teacher">
      <img src="<?php the_sub_field('teacher_photo'); ?>" />
      <p><?php echo $teacher_name; ?></p>
      <?php echo $teacher_bio; ?>
    </div><!-- .teacher -->
    <?php 
      if ($count % 3 == 2) {
        ?>
          </div><!-- #teachers -->
        <?php 
      }
      $count++;
    endwhile;
else :
  // no rows found
endif;

• discoparrot

• August 29, 2015 at 12:00 pm

Oh, wow — I want to jump through the screen and hug you! I’m going to pick that apart and study what you did.

And thanks for pointing out that the div should have a class not an id. Left in from when I only had one div containing it all. Thank you!