Question
How to display an icon from the Repeater field in the widgets that support the Dynamic Settings?
Tutorial requirements:
- JetEngine installed and activated;
- JetElements or JetTabs plugin installed and activated;
- Dynamic Data addon installed and activated;
- A Repeater meta field created.
Answer
Such widgets as Tabs, Classic Accordion, Slider, etc., allow us to set a custom icon right from the Iconpicker field of the Repeater meta field. But to display such an icon, we should use a particular macro – render_fa_icon.
Creating an Iconpicker field within the Repeater meta field
If you haven’t created an Iconpicker field to store your icon yet, this would be the first thing to do. Find your Repeater meta field’s settings by going to WordPress Dashboard > JetEngine > Meta Boxes or WordPress Dashboard > JetEngine > Post Types (depending on the Repeater’s location).
Click on “Edit” the needed Custom Post Type or Meta Box. Once you are in, scroll down to the Meta Fields block, open it and find your Repeater meta field.
Within the Repeater meta field, add a new Iconpicker field. To do so, click on the “New Repeater Meta Field” button and fill in the Label and Name. Then find the “Iconpicker” option in the Type drop-down menu.
If you plan on using two icons – one for the active state of the widget and one for the closed state – add another Iconpicker field below and stick to the same routine.
Once you are done, hit the “Update Post Type” button to save the changes.
Filling Repeater fields with icons
The next thing you need to do is to set the icons for each post. On the left sidebar of the WordPress Dashboard, find your Custom Post Type and open the main directory. You will see the list of all created posts. Click the “Edit” button under the needed post.
Now, scroll down to your meta box and find the Repeater meta field. For each Repeater item, set the desired icons. Update the post.
Placing the widget
Open the page in Elementor, where you will showcase the content using repeater values. If you use a Single Post Template, open it in the Elementor editor.
Find the Classic Accordion widget or any other that supports Dynamic data addon and place it on the page. Open the settings of the widget and unfold the Dynamic Settings tab.
Displaying the icon
Now that you have enabled Dynamic Settings, it is time to showcase the previously added icons.
In the Icon and Active Icon fields, insert the iconpicker_field|render_fa_icon macro, where the iconpicker_field part stands for the name of the Iconpicker field.
For example, the name of our first Iconpicker field is icon_accordion, as you can see in the following screenshot:
Therefore, the needed macro in our case will look like this: icon-accordion|render_fa_icon. Substitute the name of the Iconpicker field with your own.
In this way, you can set your custom icons for each item in the Classic Accordion widget.
Configure the rest of the settings as per guidelines in our main tutorial on the Dynamic Data addon – JetElements: How to Use Dynamic Values in Widgets.