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‘.

Query filter global ACF
Fields for building the Query
Query filter Select Fields Wrench ACF
Dynamic Tag ACF/ACF fields keys
Query filter Select key ACF
The source for the key according the selected post type
Query filter Select Field ACF
Choose one key within the list

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

Dynamic Tag ACF/ACF fields values
Query filter Select value ACF
The source for the values according the selected post type
Query filter Select The Values ACF
Choose the values within the list

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 Data type

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.

Query filter select ACF comparison
ACF Comparison operator

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

Toggle the Relation between queries

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

Final outcome

Query filter ACF result

Leave a Comment