Birthday Sale!

Days
Hours
Min
Sec

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Ajax Search for WooCommerce Products - Featured Blog
Add Schema Markup to WordPress
Pagination to Elementor Posts - Featured Blog

Using ACF Fields In Post List

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.

custom fields

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.

custom field location

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.

populate custom field

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 widget

Edit Post List Attribute

Navigate to the attributes tab and click on the post list widget to edit.

edit post list attribute

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.

enable using custom fields

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. 

post list fields

The custom fields will be available after selecting a special twig function:

put post meta instruction image
Replace the “metakey” placeholder with the custom field name “difficulty” and remove any unnecessary data. You can now use the field freely as you wish inside of the HTML:
put post meta instruction image2

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!