ACF Repeater Field Tutorial

ACF Repeater Field Tutorial

Posted on Latest In Blogs

ACF Repeater

The Advanced Custom Fields (ACF) Repeater field allows you to create and manage repeating content in WordPress. It returns an array of rows, where each row is an array containing sub-field values. For a seamless developer experience, ACF provides functions like have_rows, the_row, get_sub_field, and the_sub_field.

Basic Loop

This example demonstrates how to loop through a Repeater field and load a sub-field value.

php

<?php
// Check if rows exist.
if( have_rows(‘repeater_field_name’) ):
// Loop through rows.
while( have_rows(‘repeater_field_name’) ) : the_row();
// Load sub-field value.
$sub_value = get_sub_field(‘sub_field’);
// Do something, but make sure you escape the value if outputting directly…
// End loop.
endwhile;
// No value.
else :
// Do something…
endif;
?>

Display a Slider

This example demonstrates how to loop through a Repeater field and generate the HTML for a basic image slider.

php
<?php if( have_rows('slides') ): ?>
<ul class="slides">
<?php while( have_rows('slides') ): the_row();
$image = get_sub_field('image');
?>
<li>
<?php echo wp_get_attachment_image( $image, 'full' ); ?>
<p><?php echo acf_esc_html( get_sub_field('caption') ); ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

Foreach Loop

This example demonstrates how you can manually loop over a Repeater field value using a foreach loop.

php

<?php
$rows = get_field('repeater_field_name');
if( $rows ) {
echo '<ul class="slides">';
foreach( $rows as $row ) {
$image = $row['image'];
echo '<li>';
echo wp_get_attachment_image( $image, 'full' );
echo wp_kses_post( wpautop( $row['caption'] ) );
echo '</li>';
}
echo '</ul>';
}
?>

Nested Loops

This example demonstrates how to loop through a nested Repeater field and load a sub-sub field value.

php
<?php
/**
* Field Structure:
*
* - parent_repeater (Repeater)
* - parent_title (Text)
* - child_repeater (Repeater)
* - child_title (Text)
*/
if( have_rows('parent_repeater') ):
while( have_rows('parent_repeater') ) : the_row();
// Get parent value.
$parent_title = get_sub_field('parent_title');
while( have_rows('child_repeater') ) : the_row();
// Get sub value. $child_title = get_sub_field('child_title'); endwhile; endif; endwhile; endif; ?>

Accessing First Row Values

This example demonstrates how to load a sub-field value from the first row of a Repeater field.

php

<?php
$rows = get_field('repeater_field_name' );
if( $rows ) {
$first_row = $rows[0];
$first_row_title = $first_row['title'];
// Do something...
}?>

You may also use the break statement within a have_rows() loop to step out at any time.

php
<?php
if( have_rows('repeater_field_name') ) {
while( have_rows('repeater_field_name') ) {
the_row();
$first_row_title = get_sub_field('title');
// Do something...
break;
}
}
?>

Accessing Random Row Values

This example demonstrates how to load a sub-field value from a random row of a Repeater field.

php
<?php
$rows = get_field('repeater_field_name' );
if( $rows ) {
$index = array_rand( $rows );
$rand_row = $rows[ $index ];
$rand_row_title = $rand_row['title'];
// Do something...
}
?>

Using ACF Repeater fields allows you to create dynamic and flexible content structures within your WordPress site. By utilizing the provided functions, you can efficiently loop through and access sub-field values, enabling you to create rich and interactive web experiences.