Back to contents

JetEngine: How to Use a Dynamic Repeater Widget

Creating a repeater
1 Step – Create a Meta Box
2 Step – Add Repeater Meta Field

Adding metadata to the post

Displaying the Repeater
1 Step – Add the Dynamic Repeater widget
2 Step – Define the features

 

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 his 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 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.

add a 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”).

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.

enrich the meta fields with content

Displaying the Repeater

1 Step — Add the Dynamic Repeater widget

Open the page’s template with the Elementor editor. Drag-and-drop Dynamic Repeater to the page’s canvas.

2 Step — Define the features

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.

customizing Dynamic Repeater widget

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.
repeater features

After setting the features, customize the appearance of dynamic content in the Style and Advanced 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.