Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetEngine: Dynamic Repeater Widget Overview & Creation Process

 

This tutorial will explain what a Dynamic Repeater is and how to create it using the JetEngine plugin functionalities.

JetEngine is a top-notch plugin, which provides the user with all the needed tools for displaying dynamic content in Elementor and Gutenberg.

Imagine adding 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 three meta fields of text and media types. But what if you 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. Using the JetEngineDynamic Repeater widget, you can further display dynamic repeaters set for custom post types and taxonomies. From this tutorial, you will learn how to create and use a Dynamic Repeater.

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, pick the needed option in the Meta Box for field, apply it to the specific post type (e.g., Posts, etc.), and 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 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 drop-down list.

repeater meta field

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

Set the specific type in the Type drop-down (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.

knowledge base information iconNOTE
You’ll need the names/IDs of each of these fields when adding a dynamic repeater to the pages. So, memorize them or don’t close this tab.

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 particular post, and there, you will see a custom field below the content. Fill in the fields that are available with the required content. If you need one more meta field with more subfields, click the “Add Item” button. When you’re done with all settings, click on the “Update” button.

repeater meta field

Displaying the Repeater

1 Step — Add the Dynamic Repeater widget

Open the page template with either Elementor or Gutenberg editor. Drag-and-drop the 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 complete 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 select “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.

The last thing to do is to change the appearance of the Dynamic Repeater items. You can customize them in the Style or Block Style (which appears if you have JetStyleManager free plugin installed) sections. 

The General tab contains settings to change the Direction of value in the Dynamic Repeater fields: to show them horizontally or vertically. Next, you can change the Alignment – make them display on the left, center, or right. Also, you can apply some Typography characteristics.

In the Items tab, you can enable the Fixed item size. Also, you can set the color, border characteristics, padding, and margin both for Normal and Hover appearance.

The Delimiter tab allows you to change the color and margin for the delimiter.

When the customization is over, click the “Update” button.

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