{"id":35956,"date":"2023-02-15T13:13:51","date_gmt":"2023-02-15T13:13:51","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=35956"},"modified":"2023-08-17T15:04:25","modified_gmt":"2023-08-17T15:04:25","slug":"repeater-custom-meta-field-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/repeater-custom-meta-field-overview\/","title":{"rendered":"Repeater Custom Field Overview"},"content":{"rendered":"\n

The JetEngine<\/strong><\/em> plugin provides tools for displaying dynamic content in Elementor and Gutenberg.<\/p>\n\n\n\n

Imagine adding 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 post may have a different number of authors?<\/p>\n\n\n\n

To do so, you will need to create a meta field of Repeater <\/strong>type, set several subfields, and apply it to the specific post type. Using the JetEngine Dynamic Repeater<\/strong><\/a> widget, you can display dynamic repeaters set for custom post types and taxonomies.<\/p>\n\n\n\n

Creating a Repeater<\/h2>\n\n\n\n
\n

Create a Meta Box<\/h3>\n\n\n\n

Log in to the WordPress Dashboard and navigate to the JetEngine > Meta Boxes<\/em><\/strong> tab.<\/p>\n\n\n\n

Click the “Add New<\/strong>” button at the very top, and you’ll be redirected to the Add New Meta Box<\/strong> window. Provide a new meta box with the Title<\/strong>, pick the needed option in the Meta Box for<\/strong> field, apply it to the specific post type (e.g., Posts) or taxonomy, and scroll the page down to the Meta Field<\/strong> block. <\/p>\n\n\n\n\"adding\n\n\n\n

Add the Repeater meta field<\/h3>\n\n\n\n

Click the “New Meta Field<\/strong>” button below to create the Repeater<\/strong> meta field.<\/p>\n\n\n\n

Fill in the label for a new meta field in the Label <\/strong>field (let it be “Repeater”) and add an ID in the Name\/ID<\/strong> empty field, and set the “Repeater” <\/strong>type in the Field Type<\/strong> drop-down list. <\/p>\n\n\n\n\"repeater\n\n\n\n

After you have specified the “Repeater” Field Type<\/strong>, you will see the “New Repeater Field<\/strong>” button. Click it to add a new field and provide it with the Label<\/strong> and Name\/ID<\/strong>.<\/p>\n\n\n\n

Set the specific type in the Type <\/strong>drop-down (e.g., if you want to enable adding images, select the “Media” Type<\/strong>, etc.). Add as many subfields as you need.<\/p>\n\n\n\n\"repeater\n\n\n\n

Then, click the “Add Meta Box<\/strong>” button to save the meta box with repeater meta fields.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

You\u2019ll need the names\/IDs<\/strong> of each of these fields when adding a dynamic repeater to the pages. So, memorize them or don\u2019t close this tab.<\/p><\/div><\/div>\n<\/div><\/div>\n\n\n\n

Adding Metadata to the Post<\/h2>\n\n\n\n
\n

Go back to the WordPress Dashboard<\/strong> and navigate to the Posts<\/strong> tab (or the specific post type for which you’ve set the Repeater<\/strong> 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<\/strong>” button. When you’re done with all settings, click the “Update<\/strong>” button. <\/p>\n\n\n\n\"repeater\n<\/div><\/div>\n\n\n\n

Displaying the Repeater<\/h2>\n\n\n\n
\n

Open the page template with either Elementor or Gutenberg editor. Drag and drop the Dynamic Repeater<\/strong> widget\/block to the page canvas.<\/p>\n\n\n\n

The settings are the same in Elementor and Gutenberg. Choose the source from the Source <\/strong>drop-down list (find the name of the Repeater<\/strong> meta field you’ve just created) and input the needed macros into the Item format<\/strong> field. The complete macros list you can find in this JetEngine Macros Guide<\/strong><\/a>. <\/p>\n\n\n\n

In Elementor, it will look like that:<\/p>\n\n\n\n\"customizing\n\n\n\n

In Gutenberg, it looks like that:<\/p>\n\n\n\n\"dynamic\n\n\n\n

Other features:<\/p>\n\n\n\n