Home › Forums › Add-ons › Repeater Field › How to loop repeater rows so 3 in a div and then next 3 more in a div, etc
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(); ?>
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;
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!
The topic ‘How to loop repeater rows so 3 in a div and then next 3 more in a div, etc’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.