ACF Repeater Field: A Complete Guide - Elementor Addons

ACF Repeater Field: A Complete Guide

ACF Repeater Field Banner

ACF Repeaters are a great way to organize multiple instances of the same data. They can be a powerful field type when the subfields repeat often. In addition, it offers flexibility and versatility, as any field type is possible within a repeater, and there is no limit to the number of repeats either.

To understand repeaters better, let us explore a use case. For example, say I want to have some client testimonials on my website. As many of the same fields are repeated, adding those same fields inside a Repeater Field makes sense, so the repeating content is organized neatly.

Setting Up ACF Repeater Field Type

With the ACF Pro Setup ready, head over to your WordPress admin dashboard to create a field group; you can skip the first step if you have already created the field group.

Step 1: Create a new Field Group   

To add a field group, go to Custom Field>> Add New. Give a suitable title to the field group.

ACF Repeater

Step 2: Creating a Repeater Field   

Now you need to create an ACF Repeater field that will hold other repeating subfields. For this, click on the Add Field button.

ACF Repeater 1

Checkout: How To Create team member section using ACF Repeater Field?

Step 3: Adding Repeater Sub Fields.  

To create subfields inside the Repeater field, click on the Add Field button and start adding fields.

ACF Repeater 2

Since we are creating Testimonial sections, I have added the fields needed to create a Testimonial layout like Client Name, Image, and Description.

Step 4: Configuring the other settings:  

Once the subfields have been added to the repeater field, you can configure a few additional settings related to how it appears when viewed in the Admin area.

ACF Repeater 3
  • Collapsed: Select a sub field to be displayed when each field row is collapsed.
ACF Repeater 4
  • Minimum Rows: Sets a limit on how many rows of data are required.
  • Maximum Rows: Sets a limit on how many rows of data are allowed.
  • Layout: The layout label will let you define the layout style of the appearance of the sub fields.

1: Table: Subfields are displayed in a table format. Labels will appear in the table header.

ACF Repeater 5

2: Block: Subfields are displayed in blocks, one after the other.

ACF Repeater 6

3: Row: Subfields are displayed on a two-column table. Where Labels appear in the first column.

ACF Repeater 7
  • Button Label: The text is shown in the ‘Add Row’ button at the front end.

Step 5: Configure the Location  

When setting up where and how fields show up, you have the choice to decide what rules make sense for your website. Of course, if you’ve already set the field locations, then you can skip this process.

Go to the Location panel.

ACF Repeater 8

For example, for my testimonial section, I have assigned the repeater fields to a Page. If you create repeaters for a specific post type, you can associate the custom field group to that custom post type.

Once you are done, hit the publish button and make your ACF Repeater Field live.

Template usage    

The ACF Repeater field will return an array of rows, where each row is an array containing sub-field values.

For the best developer experience, ACF has created some extra functions specifically for looping over rows and accessing sub-field values. These are the have_rows, the_row, get_sub_field, and the_sub_field functions.

Basic loop  

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

<?php

// Check rows exists.
if( have_rows('testimonial_section') ):

    // Loop through rows.
    while( have_rows('testimonial_section') ) : the_row();

        // Load sub field value.
        $name = get_sub_field('client_name');
        $image = get_sub_field('client_image');
        $text = get_sub_field('comment');
        // Do something...

    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;

Checkout: How To Create a FAQ section using ACF Repeater Field?

Leave a Comment

Your email address will not be published.

Scroll to Top