Documentation
HomeForumHelpYouTube
Search
⌃K
Links

Repeater

Basics

A repeater is a list of items such as text, images, links, buttons, that have the same design and layout but have different content that is individually customisable.
The Repeater block will not activate until you add some items. Remember to update the page after adding items.
Add
If you want to add a repeater block outside any other block on the page:
  1. 1.
    Click on the ➕ ​​icon to open the Inserter Panel
  2. 2.
    Search for the
    repeater block
  3. 3.
    Click on the
    repeater block to insert it into your page
If you want to add a repeater block inside a parent block:
  1. 1.
    Open the Quick Insert panel in the parent block
  2. 2.
    Search for the
    repeater block
  3. 3.
    Click on the
    repeater block to insert it into your parent block
TTD #18 - Repeater

Repeater Block Placeholder

When you add a repeater block, a Placeholder will appear.
This will give you the choice to set your Source or, if you haven't already set up your ACF repeater, to do so first.

Set Source

Set Source will take you to the Source tab in the Primary tab where you can choose the required ACF group in the dropdown.

Create ACF Repeater

Create ACF Repeater will take you directly to the Custom Fields tab in the Dashboard where you can set up a new ACF field group.
  • Click on "Add Field Group" to create a new Field Group.

ACF Group

  • The ACF Group allows you to select a list of items to use in your repeater.
To create a new list, navigate to the custom fields menu in the Wordpress dashboard and add a new field group. (Set the field type to repeater)
  • When you click Field Type, it will open a dropdown.
  • Select the Repeater type.
  • Input Field Label, which is the name of your repeater.
  • Click "+Add Field".
  • Select the Field Type you require in the dropdown: Text, Image, Gallery etc.
  • Input the Field Label (what you want to call it).
  • Click "+Add Field" to add a new Field.
  • Repeat the process for the different field types you want in your repeater.
  • When you have completed all your Fields, click "Save Changes".
For more detail please visit:

ACF Field

An ACF Field allows you to group personalised information about a specific content, such as title, description, image.
To select an ACF field, first select an ACF group in the source tab of the Primary tab.
Then chose the ACF field in the ACF field dropdown.
​
​

Repeater Field in Editor

  • The Repeater field can be found in the editor at the bottom of the page.
  • Click on the arrow to open the Repeater window.
  • The window will show the field types you have already set up.
  • Click "Add Row" to add the first row to your repeater.
  • Input the fields you created previously, for instance Title, Name, Image etc.
  • Click "Add Row" to create a new row.
  • Input as before and continue until you have filled in all the rows you. require.

Remove Repeater Row in Editor

  • To remove a row, hover over the row and click the - (minus) button.
Remember to refresh the page for the input data to appear.
  • Your repeater fields in the editor should look something like this.

Layout

The Layout tab allows you to modify how your Items are displayed in your Repeater block. This includes Display, Grid Type, Auto Grid, Auto Template as well as Height, Column and Row Gap.
Open the Layout tab in the Primary tab and set the required layout.
See Query Template Layout (they work in a similar way).
​
​

Colours

The Colours tab allows you to modify the Colours of the content in your Repeater block, including Text colour, Link colour, Background colour.
Modify
  1. 1.
    Select a repeater block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary tab
  4. 4.
    Open the Colours tab
  5. 5.
    Modify the Colours of your text, link, background
Reset
  1. 1.
    Select a repeater block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary tab
  4. 4.
    Open the Colours tab
  5. 5.
    Click required dot(s) to remove modifications to the Colours of your text, link, background
​
​

Grid Editor

The Grid Editor tab allows you to visually edit & design your Repeater Grid layout.
The Grid Editor is enabled in the Layout tab by selecting the grid layout.
See Query Template Grid Editor (they work in a similar way).
​
​

Location ID

The Location parameter allows you to set the source for your Repeater. This can be a Specific Post ID or an Options page (in preparation for nested repeaters).

Post ID

This allows you to set the source for your Repeater using a Specific Post ID
​
​
Select
  1. 1.
    Select a repeater block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary tab
  4. 4.
    Open the Source tab
  5. 5.
    Find Location ID
  6. 6.
    Select Post ID in dropdown
  7. 7.
    Input ID
Reset
  1. 1.
    Select a repeater block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary tab
  4. 4.
    Open the Source tab
  5. 5.
    Find Post ID
  6. 6.
    Click dot to reset

Options Page

This will allow you to choose the source for your repeater if you have created an Options Page.
​
​
Select
  1. 1.
    Select a repeater block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary tab
  4. 4.
    Open the Source tab
  5. 5.
    Find Location ID
  6. 6.
    Select Options Page in dropdown
Reset
  1. 1.
    Select a repeater block
  2. 2.
    Open the Block Inspector
  3. 3.
    Navigate to the Primary tab
  4. 4.
    Open the Source tab
  5. 5.
    Find Options Page
  6. 6.
    Click dot to reset
Previous
Grid editor
Next
Nested Repeater
Last modified 5mo ago