Hunterza430

ACF Frontend for Elementor is your perfect solution! When you build a website for a client, you want to deliver an easily manageable system. Updating website content should not hold your clients back. Training clients to use their sites should not hold you back. The elementor post loop in Elementor pro is great for displaying and customizing the look of posts on your site. But the data the post loop can display are l.

Create a Post Grid with Advanced Custom Fields features for Elementor free version This tutorial will help you to create fully customizable Post Grid step by step without any coding.

After that you can Query and filters posts or Custom Post Type wiht ACF Fields and their related values.

The Post grid builder makes intensive use of Dynamic Tags to select ACF Fields Keys/Values saved for each post.

This tutorial complements the article dedicated for building the queries with Custom Fields (Read this link).

You should be familiar with the features of the plugin Advanced Custom Fields (ACF).

Here you have the list of fields supported by the Post Grid component.
As you can see, you can only filter your posts with these fields that you defined when configuring your ACF groups.

First you have to expand the Queryrepeater in which you will find a field for the key ‘Select ONE key’ and a second field ‘Select values’ for the values.

How to select the key

• Click on the wrench icon to open the Dynamic Tags list and select ACF/ACF fields keys
• Choose only ONE key from the list broken down by group

– You can enter le key name directely in the field but it is case sensitive.

– After that you get the list of all posts that meet your request.

– If you dont’t want to add values for the key, you have to select the right ‘Data type‘.

The next field ‘Select Values‘ is where you can query the posts using the specific values according the key you have already selected.

How to select the values

• Click on the wrench icon to open the Dynamic Tags list and select ACF/ACF fields values
• In the popup you must select the source of the values according the selected post type (Post, Page, Custom post)
• And choose one or more values within the list

– You can enter the value directely in the field

The values are selected, you have to choose the right ‘Data type‘.

The data type ‘Char‘ is devoted to string data

Elementor Acf Repeater

‘Numeric‘ for numbers without fractional part (2021)

‘Decimal‘ for numbers with fractional part (123.25) and a maximum of two digits after the point

‘Date‘ for formated date

For fields that accept multiple selectionssuch as ‘select, checkbox …’, ACF stores the data as a table (Serialized data) in the database. Therefore you cannot use standard operators like ‘IN, BETWEEN, >, =’ to filter properly your posts.

If you only want to compare a single value, you must use the ‘LIKE or NOT LIKE‘ operators and the ‘REGEXP or NOT REGEXP‘ operators to filter more than one value.

If you have at least two queries, don’t forget to change the relation between them (OR/AND).

ANDmeans that all conditions of the meta_query should be true.

You can see the result of a builded ‘meta_query’ with ‘key’, ‘type’, ‘value’, ‘compare’ and the ‘relation’.

Acf Elementor Field

Acf Front End Form

If you want to evaluate the query generated by the builder, you need to enable the toggle under the query repeater.
This feature is automatically disabled outside the editor.