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.
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 and give a name to the repeatable group.
- You can now use the Add New Field button inside the repeatable group to add fields to it.
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.
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.
- Finally, add Toolset blocks to display fields coming from your repeatable field group.
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.
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.
Erstellen Sie benutzerdefinierte Beitragslisten
- Styling Single-post Templates
- Assigning Templates to Posts Conditionally
- Display Dynamic Sources Inside all Text Blocks
- YouTube Videos with Advanced Options
- Show all related topics...
- Displaying Form Data
- Creating templates to display members-only content
- Displaying a Map on A Single Post Template
- Creating Templates to Display Custom Posts
- Creating Responsive Columns and Grids
- Display Content Conditionally