Repeatable field groups allow you to repeat a group of custom fields as many times as needed. You will learn how to set-up a repeating fields group in the WordPress admin and how to display it on the front-end, using a View.
The best way to understand what Repeatable Field Groups are and how to use, is via an example. We’ll look at a gyms directory site. Each gym has a section about opening hours. Because opening hours are different for each gym we can add them as a repeatable group of custom fields.
In our repeatable group, we can repeat days and each day can have a field for the day’s name and day’s opening hours.
Creating Repeatable Field Groups
Follow these steps to add a repeatable field group to a post-type:
- Go to the Toolset → Custom Fields page and click on Add New custom fields group.
- Select to create a post field group.
- Name your main field group and save it.
- To be able to insert a repeatable group of fields, your main group needs to be assigned to a single post type. Click on the Edit button in the Where to include this Field Group section and select one post type.
- Click on the Add New Repeatable Group button, name the repeatable group, and start adding fields to it.
Editing Content that has Repeatable Field Groups
When you edit the related posts (in our example, gyms), you can add as many instances of repeatable fields as you need. You can also reorder and delete them.
Click on the Add new… button at the bottom right to add another set of fields.
Notice the button at the top-right of the repeating field group editor. This button allows you to switch between horizontal and vertical display for the fields. The horizontal display works like a table. It will show the different fields one next to the other. This layout is convenient for groups that have a few fields. The vertical display works like a list. It’s convenient for large groups of fields or fields that contain long texts.
Displaying Repeatable Field Groups
To display a repeatable field group, you need to use a View. The View will go through all the items in the repeating field group. You can set how it displays each item and the View will produce the required list.
To create a View, you need to be familiar with the WordPress Block Editor.
Repeatable field groups are related to a specific post type. In our example, we added them to gyms. This means that you need to edit a template for displaying single posts of that post type and add a View that lists the repeatable fields of that particular type (i.e. gyms).
Use the following steps to display repeatable field groups.
- Edit the Content Template for single posts of the related post type.
- Insert a View block, give it a name, and select the design options.
- In the third step of the View creation wizard, you select the content that this View will display. Select your repeatable field group, under the Repeatable field groups sub-section.
- In the Block Editor, click to select the main View block you just created. This is because when you create a View block, its inner View Loop block is selected by default.
- In the right sidebar, expand the Query Filter section and click the Add a filter button.
- In the dialog that appears, select the Post relationship or repeatable field groups owner option.
- In the right sidebar, use the Select items dropdown to select your repeatable field group and click the Save button.
You have now set up the View to display the repeatable field groups of your posts. All that is left to do is to add different blocks to output the fields from your repeatable groups. In our example, we added two Single Field blocks. One to display the custom field for the name of the day and another to display a custom field for the opening hours.
And that’s it! Now, when you visit your custom posts on the front-end, you will also see the list of repeatable fields.
Displaying Repeatable Field Groups in Custom Order
You can easily arrange the order of items in a repeatable field group by drag-and-dropping them. However, by default, the front-end output will not be in this order.
To list items in a custom order, select the main View block and in the right sidebar, expand the Ordering Settings section. In the Sort By dropdown, select the Field – toolset-post-sortorder option. Also, select the order to be Ascending.