How to Display Dynamic Repeater Field Data in WordPress?

Are you looking to show repeater field data from ACF (Pro), SCF or Jet Engine to any page or post in your WordPress site?

With the Repeater block from Nexter Blocks, you can easily show repeater field data from ACF (Pro), SCF or Jet Engine to any page or post in your WordPress site.  

Required Setup

• Make sure the default WordPress Block editor is active. 
• You need to have the Nexter Blocks plugin installed and activated.

• This is a premium block, you need the PRO version of the Nexter Blocks.
• Make sure the Repeater block is activated, to verify this visit Nexter Blocks → Blocks → and Search for Repeater and activate.
• Make sure you have created a repeater field using ACF (Pro), SCF or Jet Engine.

How to Activate the Repeater Block?

Go to 

• Nexter Blocks → Blocks 
• Search the block name and turn on the toggle then click Save Settings.

Key Features

• Multiple Plugin Support  – You can create a repeater field using ACF (Pro), SCF or Jet Engine.
• Multiple Layouts – You can select from multiple layouts to display the repeater data.
• Multiple Block Support – You can use multiple blocks from Nexter Blocks to show the repeater data.

How to Use the Repeater Block?

To use the Repeater block, you have to add a repeater custom field using ACF (Pro), SCF or Jet Engine.

You can use any of these plugins. Here we are using the SCF (Secure Custom Fields) plugin. For other plugins, the UI might be different, but the process will be similar.

Create a Repeater Field

For example, we will be creating a repeater field called “Steps List” with the following sub fields – 

• Step Title (Text) 
• Description (Textarea) 
• Step Image (Image)

1. In the New Field Group page, add the field group name.

2. Then select the Field Type as Repeater.

3. After that, add the Field Label.

4. Then add the sub fields as per your requirements, for instance, we will be adding Step Title as text, Description as a textarea and Step Image as an image field.

5. After that, set the rules where you want to add these fields, for instance, we’ll be adding them to the blog posts.

Add Data to Repeater Fields

Now you have to add data in the repeater fields.

So, edit one of the posts from the post type to which you have assigned the repeater fields, in our case, it is blog posts.

Display Repeater Data with the Repeater Block

Add the Repeater block to the page or post where you want to show the repeater data, then follow the steps – 

1. From the Source dropdown, you have to select the post type to which you’ve added the repeater fields; in our case, it is Posts.

2. Then, from the Repeater Field dropdown, you have to select the appropriate repeater field; in our case, it is Steps List.

3. After that, from the third dropdown, you have to select the post where you’ve added the repeater data.

4. On the next screen, you can select a predefined layout or click the Skip button to create a custom layout using different blocks from Nexter Blocks.

For instance, let’s select Standard (Visual + Text) layout. This will create the layout using the Image, Heading and Dynamic HTML blocks from Nexter Blocks.

From the Content tab, you can change the Post Type, Repeater Field and Post.

From the Extra Options tab, you can adjust padding, no of columns, column gap and row gap. 

5. To show the image, click on the Image block and click on the Dynamic Field option, then select the appropriate field name from the Dynamic URL dropdown; in our case, it is Step Image.

Now you’ll see the image dynamically.

6. Then, for the text, click on the Heading block and click on the Dynamic Field option, then select the appropriate field name from the Dynamic Field dropdown; in our case, it is Step Title.

7. Now for the text area data, click on the Dynamic HTML block and click on the Dynamic Field option, then select the appropriate field name from the Dynamic Field dropdown; in our case, it is Description.

Note: To show the text area data, you have to use the Dynamic HTML block.

As per our settings, now all the repeater data will show dynamically.

Here is the list of blocks that you can use inside the Repeater block to show the data.

Free Blocks

• Core Heading 
• Core Button
• Advanced Button
• Blockquote
• Core Image
• Info Box
• Pricing List
• Message box
• Paragraph
• Advanced Heading

Pro Blocks

• CTA Banner
• Pro Button
• Advanced Image
• Expand
• Heading Animation
• Pricing Table

Note: To show the text area data, you have to use the Dynamic HTML block.