How to create advanced queries for the component Post Grid

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

The purpose of this documentation is to let you to create, organize and place your posts in any place with multiple instances.

After that you can Query and filters posts or Custom Post Type by authors, Custom Fields and their related values.

Customize the posts with advanced sorting options, add filters and apply some skins.

The Post grid builder makes intensive use of Dynamic Tags to select Authors and Custom Fields Keys/Values entered in each post.

You can view the result by following this link.

how to activate the post grid component

The ‘Elementor‘ plugin is installed and active.

The ‘EAC components‘ plugin is installed and active.
From the panel settings you have to drag & drop the ‘Post Grid’ icon on the panel preview.

Post gris icon
Post Grid component

select the source of post types, taxonomies and tags

Content tab / Query filter section / Post type tab.

  • From ‘Post type tab‘ you can choose the ‘Source’ of your query from where the contents will be retrieved and displayed
  • First of all, to build an advanced query, you must select the Post type (Post, Page, CPT)
  • You can add the Taxonomies associated with the post type but they are not mandatory. (Category, post_tag, Categories of the CPT)
  • You can add the Tags associated with the taxonomies but they are not mandatory
  • You can enable/disable filters.
Query filter Post type
Select Post type Filter
Query filter Taxonomy
Select associated Taxonomies Filter
Query filter Tags
Select associated Tags Filter

create your queries to filter the posts

Content tab / Query filter section / Queries tab.

Here you will find all the fields you have to use to build a complete and inovative query

  • Select authors to filter the posts by the authors names
  • With the Queries repeater, you will select the Custom Fields Key and their related values
  • Toggle the OR/AND switcher to apply a Relation between queries
  • Toggle the OR/AND switcher to watch the content of the generated query
Query filter Post Tab Query
Fields for building the queries

how to filter the posts by authors

Adding an Author filter with the plugin is quite easy. Two ways to select the authors names.

First

  • Click on the wrench icon to open the Dynamic Tags list and select Post/Authors
  • Choose one or more authors names to filter the posts

Second

  • You can enter in the field the ID of the authors with comma as separator without space (1,2,3,4)

Enjoy the result !

Query filter Dynamic Tag Authors
Dynamic Tag Post/Authors
Query filter selected authors
The posts filtered by authors

how to filter the posts with custom fields keys

You should be familiar with the concept of WordPress Custom Fields.

This tutorial does not describe how to create and value the key/value pair in an article.

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 Post/Custom fields keys
  • In the popup you must select the source of the keys according the selected post type (Post, Custom post, Page, Post + CPT)
  • And choose only ONE key within the list

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

Fields for building one Query
Fields for building one Query
Query filter custom fields keys
Dynamic Tag Post/Custom fields keys
Query filter select post origine
The source for Custom fields keys according the selected post type
Choose one key within the list

how to filter the posts with custom fields values

The 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 Post/Custom fields values
  • In the popup you must select the source of the values according the selected post type (Post, Custom post, Page, Post + CPT)
  • And choose one or more values  within the list

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

Query filter custom fields values
Dynamic Tag Post/Custom fields values
Query filter select values origine
The source for Custom fields values according the selected post type
Query filter select values
Choose the values within the list

Select custom fields data type and operator

Pay attention: The Custom Fields values are saved to the database as ‘String‘ and the expected format for a date is ‘Y-m-d

You do not have to change the saved date values because the component converts the date to the correct format according to “Settings/General/Date Format”

However one restriction

  • The date must not include a full or short text representation of a month or day in a format other than English (en-US) like “23 Juillet 1985” –  “Mardi 31 Décembre 1968”

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 date formated like this ‘Y-m-d’ , ‘Y/m/d’ , ‘Ymd’

Query filter select data type
Meta query Data type

You can enter in the field the following keywords
Muliple keywords with pipe ‘|’ as separator

  • today for the current date
  • today-1m current date minus one month
  • today-1q current date minus one quarter
  • today-1y current date minus one year
  • today+1m current date plus one month
  • today+1q current date plus one quarter
  • today+1y current date plus one year
Query filter date between
Comparison between two keywords date

For the ‘Comparison operator‘ you have to choose

 

IN, NOT IN‘ multiple values for all Data types

 

BETWEEN, NOT BETWEEN‘ two values for all Data types

 

LIKE, NOT LIKE‘ one single value that you can directly enter in the field without using dynamic tags

 

REGEXP, NOT REGEXP‘ multiple values that you can directly enter in the field without using dynamic tags. Use pipe ‘|’ as separator

 

Other operators: one single value for numeric Data type

Meta query Comparison operator
Meta query 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 all Director AND Actor IN (...) */
  'meta_query' => 
  array (
    0 => 
    array (
      'key' => 'Director',
      'type' => 'CHAR',
    ),
    1 => 
    array (
      'key' => 'Actor',
      'type' => 'CHAR',
      'value' => 
      array (
        0 => 'Alane Delhaye',
        1 => 'Colin Farrell',
        2 => 'Nikolaj Lie Kaas',
      ),
      'compare' => 'IN',
    ),
    'relation' => 'AND',
  ),
  'paged' => 1,
);

Source code generated by the builder

how to configure global settings

Settings section

Enable ‘Display IDs’ to prepend the ID of each post.

And add the id of the posts you don’t want to display.
ID separated by comma without space.

Post count

Set the posts count you want to display.

Enable/Disable the paging.

Sorted by

Choose the sort type from the list.
Special entry ‘Numeric meta value‘ which allows you to sort on the numeric data type values ​​of the query.

Settings exclude post ID
Exclude some posts by their ID
Select the post count to be displayed
Select the kind of sort

how to configure content and layout

Content section

You can use the toggle to display or hide ‘Title’, ‘Excerpt’, ‘Tags’, ‘Author’, ‘Date’, Number of ‘Comments’, ‘Author avatar’ and ‘Featured image’

Note that, the ‘Lightbox‘ is visible when the ‘Featured image’ is enable

Layout section

You can choose from the ‘Masonry Layout’ or the ‘Grid Layout’ mode

Select the columns count and if the featured image is displayed, choose between Left/Right to display the excerpt text

Settings post content
Select the content for the posts
Select layout type column number
Display Layout type and column count

how to style the post grid

Switch to the ‘Style’ tab to style all the features of Post Grid and get your desired result.

 

Global section

  • Select the desired style who will be applied to the posts
  • Set the margin between posts
  • Set the background color

Title section

  • Select the heading (H2 default)
  • Change font size and font color

Image section

  • Apply a border radius to images
  • ‘Grid layout’ mode selected ? Apply a ratio and center the images

Excerpt section

  • Change the number of words who will be displayed
  • Change font size and font color

Pictograms section

  • Change the pictograms color
Settings style
Settings styles

final outcome

If you followed the explanation, you should get one result of this type.

  • Custom Post Type ‘series-tv’ selected
  • Query on ‘Director’ with Dynamic Tag Keys
  • AND ‘Production date’ key is after Dynamic Tag Value ‘2017-09-23’
Post gris final outcome
Final outcome

Leave a Comment