In this article I will explain step by step how to add ACF (advanced custom fields) to and post list based widget. There are a couple of approaches to this using Unlimted Elements but the approach used in this article is for users with basic knowledge in HTML.
Create the ACF fileds and assign them
Create a new field group and add all the fields to that group. For example I have added a custom field called difficulty in the screenshot below.
Create rules to show the field group in certain posts. For example I will show the custom fields only in posts that are assign to the desserts category.
Don’t forget to publish and save.
Populate Post Custom Field
This step is super important. You need to now go to one of the posts and populate the new custom field you have just added with some data. Don’t forget the specific post name because we will need it later on in the process of adding the custom fields to the post widget.
Edit Post Widget
Now it is time to edit the post widget from the widget library. Navigate to the widget library and double click on the post widget to start editing it in the widget creator framework.
Edit Post List Attribute
Navigate to the attributes tab and click on the post list widget to edit.
Enable Custom Fields and Select a Post Example
In the popup dialog select an example post in the search – It is super important that you choose the same post that you populated earlier with the custom field you have added previously. Then enable using custom fields by marking the “Use Custom Fields” checkbox.
Edit Item HTML
Navigate to the HTML tab and scroll down to the Item HTML area. Then click on the item post list attribute on the sidebar. You will now see all fields which can be used in the HTML.
The custom fields will be available after selecting a special twig function:
