Sauter la navigation
Acheter
Accueil » Cours » WordPress Real Estate Sites » Designing Custom Templates for Properties and Agents in Real Estate Sites » Creating and Displaying Repeatable Field Groups dans WordPress

Creating and Displaying Repeatable Field Groups dans WordPress

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.

Repeatable field groups when editing a post
Repeatable field group when editing a post

Gym opening hours displayed on the front-end using a repeatable field group
Repeatable field group on the front-end

Creating Repeatable Field Groups

Follow these steps to add a repeatable field group to a post-type:

  1. Go to the Toolset → Custom Fields page and click on  Add New custom fields group.
  2. Select to create a post field group.
  3. Name your main field group and save it.
  4. 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.
  5. Click on the Add New Repeatable Group button and give a name to the repeatable group.
  6. You can now use the Add New Field button inside the repeatable group to add fields to it.
Repeatable Field Group
Repeatable Field Group

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.

  1. Edit the Content Template for single posts of the related post type.
  2. Insert a View block, give it a name, and select the design options.
  3. 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.
Selecting the repeatable field group in the View creation wizard
  1. 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.

Gym opening hours displayed on the front-end using a repeatable field group
Gym opening hours displayed on the front-end using a repeatable field group

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.

Displaying the list of repeatable field groups in the custom order
Displaying the list of repeatable field groups in the custom order
Passer à l'étape suivante

Main Toolset Block Used in this Lesson

View

Créez des listes de publication personnalisées

Dario
Updated
décembre 9, 2020
Envoyez vos commentaires à notre équipe de documentation