{"id":1624449,"date":"2020-05-14T14:39:39","date_gmt":"2020-05-14T14:39:39","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1624449"},"modified":"2020-12-09T12:59:12","modified_gmt":"2020-12-09T12:59:12","slug":"creating-and-displaying-repeatable-field-groups","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/creating-and-displaying-repeatable-field-groups\/","title":{"rendered":"Creating and Displaying Repeatable Field Groups"},"content":{"rendered":"\n

The best way to understand what Repeatable Field Groups are and how to use, is via an example. We\u2019ll look at a gyms directory site<\/strong>. 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<\/a>.<\/p>\n\n\n\n

In our repeatable group, we can repeat days and each day can have a field for the day\u2019s name and day\u2019s opening hours.<\/p>\n\n\n\n

\n
\n
\"Repeatable<\/a>
Repeatable field group when editing a post<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\"Gym<\/a>
Repeatable field group on the front-end<\/figcaption><\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Creating Repeatable Field Groups<\/h2>\n\n\n\n

Follow these steps to add a repeatable field group to a post-type:<\/p>\n\n\n\n

  1. Go to the Toolset <\/strong>\u2192 Custom Fields<\/strong> page and click on\u00a0 Add New<\/strong> custom fields group.<\/li>
  2. Select to create a post field group.<\/li>
  3. Name your main field group and save it.<\/li>
  4. To be able to insert a repeatable group of fields, your main group needs to be assigned to a single post type<\/a>. Click on the Edit<\/strong> button in the Where to include this Field Group<\/strong> section and select one post type.<\/li>
  5. Click on the Add New Repeatable Group<\/strong> button and give a name to the repeatable group.<\/li>
  6. You can now use the Add New Field<\/strong> button inside the repeatable group to add fields to it.<\/li><\/ol>\n\n\n
    \n
    \"Repeatable<\/a>
    Repeatable Field Group<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

    Editing Content that has Repeatable Field Groups<\/h2>\n\n\n\n

    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.<\/p>\n\n\n\n

    Click on the Add new…<\/strong> button at the bottom right to add another set of fields.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    Displaying Repeatable Field Groups<\/h2>\n\n\n\n

    To display a repeatable field group, you need to use a View<\/a><\/span>. 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.<\/span><\/p><\/div>\n\n\n\n

    To create a View, you need to be familiar with the WordPress Block Editor.<\/p>\n\n\n\n

    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<\/a> for displaying single posts of that post type and add a View that lists the repeatable fields of that particular type (i.e. gyms).<\/p>\n\n\n\n

    Use the following steps to display repeatable field groups.<\/p>\n\n\n\n

    1. Edit the Content Template for single posts of the related post type.<\/li>
    2. Insert a View <\/strong>block, give it a name, and select the design options.<\/li>
    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 <\/strong>sub-section. <\/li><\/ol>\n\n\n
      \n
      \"\"<\/a>
      Selecting the repeatable field group in the View creation wizard<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n
      1. Finally, add Toolset blocks to display fields coming from your repeatable field group.<\/li><\/ol>\n\n\n\n

        In our example, we added two Single Field <\/strong>blocks. One to display the custom field for the name of the day and another to display a custom field for the opening hours.<\/p>\n\n\n\n

        And that\u2019s it! Now, when you visit your custom posts on the front-end, you will also see the list of repeatable fields.<\/p>\n\n\n

        \n
        \"Gym<\/a>
        Gym opening hours displayed on the front-end using a repeatable field group<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

        Displaying Repeatable Field Groups in Custom Order<\/h3>\n\n\n\n

        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.<\/p>\n\n\n\n

        To list items in a custom order, select the main View <\/strong>block and in the right sidebar, expand the Ordering Settings <\/strong>section. In the Sort By <\/strong>dropdown, select the Field \u2013 toolset-post-sortorder <\/strong>option. Also, select the order to be Ascending.<\/strong><\/p>\n\n\n

        \n
        \"Displaying
        Displaying the list of repeatable field groups in the custom order<\/figcaption><\/div><\/figure>\n<\/div>","protected":false},"author":4341,"featured_media":1625901,"template":"","related-lesson":[8427],"class_list":["post-1624449","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-post-templates"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1624449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1624449\/revisions"}],"predecessor-version":[{"id":1870223,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1624449\/revisions\/1870223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/1625901"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=1624449"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=1624449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}