Create advanced queries with ACF for the component Post Grid

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.

Table of Contents

Overview of the ACF features

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.

$acf_field_types = array(
	'text',
	'textarea',
	'wysiwyg',
	'select',
	'radio',
	'date_picker',
	'number',
	'true_false',
	'range',
	'checkbox',
);

How to filter posts with acf field keys

First you have to expand the Query repeater 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‘.

How to filter posts with acf field values

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

Select acf fields data type and operator

ACF data types

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

The data type ‘Char‘ is devoted to string data

‘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

ACF comparison operators

For fields that accept multiple selections such 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.

Change the relation between queries

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

AND means 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’.

Display the queries content according the selected ACF field/values

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.

Query Args =
array (
  'post_type' => 
  array (
    0 => 'post',
  ),
  'posts_per_page' => -1,
  'orderby' => 'title',
  'order' => 'asc',
  'ignore_sticky_posts' => 1,
  'no_found_rows' => true,
  'post_parent' => 0,
  'tax_query' => 
  array (
    0 => 
    array (
      'taxonomy' => 'category',
      'field' => 'slug',
      'terms' => 
      array (
        0 => 'chaises',
        1 => 'fauteuils',
      ),
    ),
  ),
  'meta_query' => 
  array (
    0 => 
    array (
      'key' => 'meubles',
      'type' => 'CHAR',
      'value' => '(Chaise|Fauteuil)+',
      'compare' => 'REGEXP',
    ),
    1 => 
    array (
      'key' => 'date_de_la_collection',
      'type' => 'DATE',
      'value' => '2018-09-21',
      'compare' => '>',
    ),
    'relation' => 'AND',
  ),
);

Source code generated by the builder