Back to contents

JetEngine: How to Create a Listing Template Using Repeater Meta Field

Find an easy way to showcase your posts on a Single Post page in a form of a grid using Repeater meta fields.

This feature allows building a fully-fledged listing template with JetEngine plugin. The main feature of this listing template is that it’s done using a dynamic repeater field. Let’s overview the entire process.

Backend preparations

1 Step — Creating a CPT

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

2 Step — Creating a Repeater meta field for CPT

Once you prepared your CPT, it’s time to create a Repeater meta field. To see the most full information, take a look at this tutorial.

On this step, we’ll create a new Repeater meta field for our CPT called “Countries”.

repeater field

For our tutorial, we’ll showcase the countries’ cities and images via Repeater meta fields, and then display them in a Listing Grid.

jetengine repeater

3 Step — Complete the fields within the posts

Go to each post of your CPT, and add the needed information to the Repeater fields.
Here’s what we’ve got in our example:

jetengine repeater fields

Working with Listing Template

1 Step — Create a new listing

Go to JetEngine> Listing

jetengine listing

and click Add New button

listing item

In the Listing Source, you need to select the Repeater Field

listing item

Pay attention to the following parameters you need to set:

listing template

where:

  • “from Post type” is a CPT you created the repeater filed 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 your Repeater meta field;
  • Listing Item Name — give a name to a Listing;
  • Listing View — select either to operate with the listing in Elementor or Blocks editor (Gutenberg).

In our example, we selected the Elementor page Builder.

Adjust the Settings.

listing setup

2 Step — Elementor Setup

Once a Listing for Repeater is created you will be transferred to Elementor editor page.
Here, you need to use the Dynamic widgets by analogy with Listing for Posts/Terms/Users.

Let’s add a Dynamic Field widget.

dynamic field

Here, in the Source field, you need to choose the Repeater Field. After this, you’ll need to input the Repeater Field Key manually. In our example, we displayed the “City” repeater key.

Let’s add one more, “Image” which we created previously.

Add a Dynamic Image widget, and use the repeater key in the corresponding field, as shown below:

dynamic image

Just as usual, you can style up the Dynamic Widgets values according to your tastes and needs.

dynamic image

3 Step — Adjusting the Listing Grid widget

ATTENTION!
Listing Grid with the Repeater listing template can be displayed only on Single Post page

After you prepared your Listing Template, you need to display it in the Listing Grid widget. Use the Single template functionality available either in JetThemeCore or in Elementor Pro.

Open the Single Post template in Elementor and drop the Listing Grid widget.

listing grid

Select the Listing you previously created for the Repeater meta field and find those repeater items you added to your post on the backend (cities and their images) are displayed in the form of a grid.

listing grid

Set up Listing Grid parameters just as for regular listing for posts or taxonomies: Posts Query, Terms Query, Style block, etc.

As you can see, it’s pretty much easy to create a listing template for the repeater meta field.