How to Create Listing Template Using Repeater Meta Field

The “Repeater” field can be created with the JetEngine or ACF plugin.

It can be adjusted for Custom Post Types (CPTs), Custom Content Types (CCTs), custom taxonomies, Meta Boxes, and Options Pages.

As an example, we’ll create a “Medical Conferences” CPT with a “Speakers” repeater field.

Create CPT and Repeater meta field

First, you need to create a CPT and fulfill all the needed values. You can find the needed information in the How to Create a Custom Post Type tutorial.

Once you prepared your CPT, it’s time to create a “Repeater” meta field.

We push the “New Meta Field” button, fill in the Label and Name/ID, and choose the “Repeater” Field type.

By clicking the “New Repeater Field” button, we add four fields within the repeater: “Speaker Name” text field, “Specialization” text field, “Presentation Topic” text field, and “Profile Photo” media field.

After that, the “Add/Update Post Type” button can be pressed. 

Fill the fields within posts

Go to the CPT tab on the WordPress Dashboard, edit each needed post, and add the needed information to the repeater fields. Remember to save updates.

Create a new listing

Go to WordPress Dashboard > JetEngine > Listings/Components and click the “Add New Item” button.

Choose the “Repeater Field” as the Listing source. Pay attention to the following parameters you should set:

• From post type — is a CPT you created the repeater field for;
• Repeater source — contains two options: “JetEngine” and “ACF,” — if you created a “Repeater” meta field either via JetEngine or ACF, use the corresponding source;
• Repeater field — specify the name of the “Repeater” meta field;
• Repeater option — if you created a “Repeater” for the Options Page, select the required field from this dropdown instead;
• Listing item name — give a name to the Listing;
• Listing view — select the editor for Listing. It can be “Elementor,” “Bricks,” “Timber/Twig,” or “Blocks (Gutenberg)”.

In our example, we selected the Elementor page builder. By pressing the “gear” icon in the editor, you can open and adjust the Listing Item Settings.

Listing setup

In the editor layout,  you should use the Dynamic Widgets to display the repeater items dynamically. We add a Dynamic Field widget and duplicate it several times.

Here, in the Source field, you should choose the “Repeater Field” option. After this, you should input the meta field name from the “Repeater” to the Object field / Meta field / Repeater key / Component prop field.

Other widget settings can be customized, e.g., we enable the Customize field output and add a text before the ‘%s’ value in the Field format.

To display the “Media” field value (image), we enable the Filter field output toggle and pick the “Get image by ID” Callback.

You can adjust the content and style settings for the Listing and push the “Publish” button.

Apply the Listing Grid

After you prepared your Listing Template, you can display it with the Listing Grid widget. Use the Single Post template functionality available in JetThemeCore, Elementor Pro, etc. For example, we open the Single Post template created with JetThemeCore in Elementor and drop the Listing Grid widget.

Select the Listing you previously created for the “Repeater” meta field, and find those repeater items you added to your post on the backend, which are displayed in the form of a grid.