Back to contents

JetEngine: How to Use a Dynamic Repeater Widget/Block


In this tutorial, we’ll take a closer look at the process of creating a dynamic repeater with JetEngine plugin, which a part of huge Jet plugins family.

JetEngine plugin is a top-notch addon made for Elementor editor which provides the user with all the needed tools for displaying dynamic content.

But before we start, let’s see some examples of Repeater usage.

Let’s imagine that you need to add some information about the post author to the page: the author’s name, surname, and photo. If there’s only one author, you will be good with a simple meta box and 3 meta fields of text and media types. But what if we need to add several authors at once, and each of the posts may have a different number of authors?

To do so, you will need to create a meta field of Repeater type, set several subfields, and apply it to the specific post type using the JetEngine plugin.

Creating a repeater

1 Step — Create a Meta Box

Log in to the WordPress Dashboard and navigate to the JetEngine > Meta Boxes tab.

Click the “Add New” button at the very top and you’ll be redirected to the Add New Meta Box window. Provide a new meta box with the title, apply it for the specific post type (E.g. Posts, etc.), and then scroll the page down to the Meta Field block.

adding new meta box

2 Step — Add Repeater Meta Field

Click the “New Meta Field” button below in order to create a meta field of a repeater type.

Fill in the label for a new meta field in the Label field ( let it be “Repeater”) and add an ID in the Name/ID empty field and set the Repeater type in the Field Type dropdown list.

repeater meta field

After you have specified the Repeater field type, you will see the “New Repeater Field” button. Click it in order to add a new field and provide it with the label and name/ID.

Set the certain type in the Type dropdown (e.g. if you want to enable adding images, select the Media type, etc.). Such field types as Radio, Checkbox, Select, or Number are also available. Add as many subfields as you need.

repeater name meta field

Then, click the “Add Meta Box” button to save the meta box with repeater meta fields.

Adding metadata to the post

Go back to the Dashboard and navigate to the Post tab (or the specific post type for which you’ve set the repeater meta field). Open the specific post and there you will see a custom field below the content. Fill the fields that are available with the required content. If you need one more meta field with more subfields, click the “Add Item” button.

repeater meta field

Displaying the Repeater

1 Step — Add the Dynamic Repeater widget

Open the page’s template with the Elementor or Gutenberg editor. Drag-and-drop Dynamic Repeater widget/block to the page’s canvas.

The settings are the same in Elementor and Gutenberg. Choose the source from the Source drop-down list (find the name of the repeater meta field you’ve just created) and input the needed macros into the Item format field. The full macros list you can find in this JetEngine Macros Guide.

In Elementor it will look like that:

customizing Dynamic Repeater widget

In Gutenberg it looks like that:

dynamic repeater block settings

Other features:

  • Item HTML tag – allows you to choose the HTML wrapping for your repeater. If you choose the “tr” – the repeater will have a table layout, and “li” sorts the items as a list.
  • Items delimiter – here you can define what will be placed between the items in the row. It could be, literally, any character or letter.
  • Before item markup – type the text into the bar and it will be shown before every shown item.
  • After items markup – type the text into the bar and it will be shown after every shown item.
  • Add counter to repeater items – if you turn this option on, the items will be shown with sequential numbers in front of them.
  • Hide if value is empty – this one is obvious, it allows you to hide the field if it is not filled with some value.

After setting the features, customize the appearance of dynamic content in the Style or Block Style (appears if you have JetStyleManager free plugin installed) and sections. When the customization is over, click the “Update” button.

That’s all. Now you can add dynamic content to the website with a little coding with the help of JetEngine plugin.