{"id":30123,"date":"2022-11-04T10:14:15","date_gmt":"2022-11-04T10:14:15","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/"},"modified":"2024-12-20T11:49:04","modified_gmt":"2024-12-20T11:49:04","slug":"displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/","title":{"rendered":"Displaying Icon from the Repeater Field Using the Dynamic Data Addon"},"content":{"rendered":"\n

Create an Iconpicker Field <\/strong>W<\/strong>ithin the Repeater Meta Field<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > JetEngine > Meta Boxes<\/em><\/strong> or WordPress Dashboard > JetEngine > Post Types<\/em><\/strong> (depending on the \u201cRepeater<\/a>\u201d meta field location). For instance, we intend to add the \u201cRepeater<\/a>\u201d meta field to the \u201cPopular Tours\u201d Custom Post Type <\/strong>(CPT<\/strong>).<\/p>\n\n\n\n

In this case, we typed the \u201cDays\u201d text into the Label<\/strong> field, and the Name<\/strong> field was automatically filled with the \u201cdays\u201d text. Here, the Repeater <\/strong>meta field will include two \u201cText\u201d and two \u201cIconpicker\u201d fields (the \u201cActive Icon\u201d field for the active widget and the \u201cIcon\u201d field \u4e00 for the unrolled widget).<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Once you are done, hit the \u201cUpdate Post Type<\/strong>\u201d button to save the changes.<\/p>\n<\/div><\/div>\n\n\n\n

Fill the Repeater Fields With Icons<\/h2>\n\n\n\n
\n

The next thing you need to do is to set the icons for each post. <\/p>\n\n\n\n

Open the CPT<\/strong> post you need, scroll down to your meta box, and find the \u201cRepeater\u201d meta field. For each Repeater<\/strong> item, set the desired icons. Update the post.<\/p>\n\n\n\n

In this case, we opened the \u201cWonderful Poland\u201d post of the \u201cPopular Tours\u201d CPT<\/strong>, inserted data into the \u201cDay\u201d and \u201cDescription\u201d fields, and then selected the icons for the \u201cActive icon\u201d and \u201cIcon\u201d fields. Finally, we saved the changes.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Place the Widget<\/strong><\/h2>\n\n\n\n
\n

Open the previously created Single Post Template<\/strong> for this CPT<\/strong>. Customize the page as needed.<\/p>\n\n\n\n

Find the Classic Accordion<\/strong> or any other widget that supports Dynamic data addon<\/strong> and add it to the page. Then, open the widget settings and expand the Dynamic Settings<\/strong> tab.<\/p>\n\n\n\n

Read more about the widget\u2019s settings in the How to Use Accordion Layout to Display Content in Tabs<\/a> tutorial.<\/p>\n\n\n\n

First, enable the Enable dynamic data<\/strong> toggle. After that, set the following settings in the newly-appeared fields.<\/p>\n\n\n\n

Leave the \u201cPost Meta\u201d option in the Source<\/strong> drop-down list selected and add the \u201cRepeater\u201d meta field\u2019s name in the Repeater field name<\/strong> field (here, we typed the \u201cdays\u201d text). <\/p>\n\n\n\n

Then, if you have two icons (one for the active widget and the second one \u2015 for the unrolled widget), type the \u201cyes\u201d text in the Active (yes or empty string)<\/strong> field; otherwise, leave this field empty.<\/p>\n\n\n\n

After that, insert the names of these fields into the Icon<\/strong> and Active Icon<\/strong> fields (the \u201cicon\u201d and \u201cactive-icon\u201d values, respectively).<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

You can keep the Icon<\/strong> and Active Icon<\/strong> fields empty to display no icons via the widget. Also, you can use a macro to display the custom icons in the Icon and Active Icon fields. In particular, insert the \u201ciconpicker_field|render_fa_icon\u201d macro text, where the \u201ciconpicker_field\u201d part stands for the name of the \u201cIconpicker\u201d field. For example, if the name of our first \u201cIconpicker\u201d field is \u201cicon,\u201d insert the following \u201cicon|render_fa_icon\u201d value.<\/p><\/div><\/div>\n\n\n\n

In the last step, fill out the Label<\/strong> field \u4e00 here, we inserted the name of the \u201cDay\u201d meta field (in particular, the \u201cday\u201d text).\u00a0<\/p>\n\n\n\n

Type the \u201ceditor\u201d text in the Content type (editor or template)<\/strong> field. Next, insert the name of the meta field that includes the data to be displayed in the active widget into the Editor Content<\/strong> field (the \u201cdescription\u201d text in this case).<\/p>\n\n\n\n

Finally, press the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

Navigate to the front end to observe if the widget works correctly.<\/p>\n\n\n\n

\"mobile<\/a><\/div>\n<\/div><\/div>\n\n\n\n

That’s it. Now you know how to display custom icons from the \u201cRepeater\u201d meta fields in the Accordion <\/strong>widget with the JetEngine<\/em> and JetTabs<\/em> plugins for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to use the widgets, such as Tabs, Classic Accordion, Slider, etc., of the JetElements or JetTabs plugins to set a custom icon right from the Iconpicker field of the Repeater meta field<\/p>\n","protected":false},"author":17,"featured_media":0,"template":"","format":"standard","tipstricks-tags":[562,359,380],"yoast_head":"\nDisplaying Icon from the Repeater Field Using Dynamic Data Addon \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying Icon from the Repeater Field Using Dynamic Data Addon \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-20T11:49:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/repeater-with-the-inserted-field-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/\",\"name\":\"Displaying Icon from the Repeater Field Using Dynamic Data Addon \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2022-11-04T10:14:15+00:00\",\"dateModified\":\"2024-12-20T11:49:04+00:00\",\"description\":\"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & tricks\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Displaying Icon from the Repeater Field Using the Dynamic Data Addon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Displaying Icon from the Repeater Field Using Dynamic Data Addon \u2014 JetEngine | Crocoblock","description":"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/","og_locale":"en_US","og_type":"article","og_title":"Displaying Icon from the Repeater Field Using Dynamic Data Addon \u2014 JetEngine | Crocoblock","og_description":"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/","og_site_name":"Help Center","article_modified_time":"2024-12-20T11:49:04+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/11\/repeater-with-the-inserted-field-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/","url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/","name":"Displaying Icon from the Repeater Field Using Dynamic Data Addon \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2022-11-04T10:14:15+00:00","dateModified":"2024-12-20T11:49:04+00:00","description":"Display custom repeater fields in the Accordion widget with the JetEngine and JetTabs plugins. Find out how to easily create a repeating block set and display the needed information.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/displaying-icon-from-the-repeater-field-using-the-dynamic-data-addon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Tips & tricks","item":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/"},{"@type":"ListItem","position":3,"name":"Displaying Icon from the Repeater Field Using the Dynamic Data Addon"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks\/30123"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/tips-and-tricks"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/17"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=30123"}],"wp:term":[{"taxonomy":"tipstricks-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tipstricks-tags?post=30123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}