The Repeater field acts as a table of data where you can define the columns (sub fields) and add infinite rows. This field is useful for image galleries, lists of data and even advanced content layouts.

Creating a repeater field

The repeater field contains options to customize your field:

• Repeater Fields: Here you can create you sub fields much like creating normal fields.
• Row Limit: Limit the rows of data by adding a number to this field. This is useful when you only want 1 or x rows of data.
• Layout: Table is the default layout (as seen below in the edit screen image). Row layout will not use columns, instead all sub fields are added underneath each other (good when you have too many sub fields to fit next to each other)

Edit screen

Template usage

To interact with the repeater field, you may use either:

• get_field: this will return a multidimensional array holding the rows of data.
• has_sub_field: this will instantiate the flexible content field object with which you can use get_row_layout, get_sub_field and the_sub_field to interact with.

Using the has_sub_field loop

This example shows how to loop through and display data with the has_sub_field + the_sub_field functions

Source code

<?php if(get_field('repeater_field_name')): ?>
 
	<ul>
 
	<?php while(has_sub_field('repeater_field_name')): ?>
 
		<li>sub_field_1 = <?php the_sub_field('sub_field_1'); ?>, sub_field_2 = <?php the_sub_field('sub_field_2'); ?>, etc</li>
 
	<?php endwhile; ?>
 
	</ul>
 
<?php endif; ?>

Using get_sub_field within the has_sub_field loop

This example shows how to loop through and display data with the has_sub_field + get_sub_field functions

Source code

<?php 
 
if(get_field('repeater_field_name'))
{
	echo '<ul>';
 
	while(has_sub_field('repeater_field_name'))
	{
		echo '<li>sub_field_1 = ' . get_sub_field('sub_field_1') . ', sub_field_2 = ' . get_sub_field('sub_field_2') .', etc</li>';
	}
 
	echo '</ul>';
}
 
?>

Taking a more basic PHP aproach

This example shows how you can use get_field to return all the row data for a repeater field. This is useful for querying the data for a specific row.

Source code

<?php 
 
$rows = get_field('repeater_field_name');
if($rows)
{
	echo '<ul>';
 
	foreach($rows as $row)
	{
		echo '<li>sub_field_1 = ' . $row['sub_field_1'] . ', sub_field_2 = ' . $row['sub_field_2'] .', etc</li>';
	}
 
	echo '</ul>';
}

Get the first row from a repeater

This example shows how to find the first row from a repeater and display an image found in that row.

Source code

<?php
 
$rows = get_field('repeater_field_name' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['sub_field_name' ]; // get the sub field value 
 
// Note
// $first_row_image = 123 (image ID)
 
$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />

Get a random row from a repeater

This example shows how to find a random row from a repeater and display an image found in that row.

Source code

<?php 
 
$rows = get_field('repeater_field_name' ); // get all the rows
$rand_row = array_rand( $rows ); // get the first row
$rand_row_image = $rand_row['sub_field_name' ]; // get the sub field value 
 
// Note
// $first_row_image = 123 (image ID)
 
$image = wp_get_attachment_image_src( $rand_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />

How is the data saved?

The repeater field saves all it’s data in the wp_postmeta table.

If your repeater field is called “gallery” and contains 2 sub fields called “image” and “description”, this would be the database structure of 2 rows of data:

Source code

// meta_key                  meta_value
gallery                      2                 // number of rows
gallery_0_image              6                 // sub field value
gallery_0_description        "some text"       // sub field value
gallery_1_image              7                 // sub field value
gallery_1_description        "some text"       // sub field value