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.
Check out this post to filter posts with ACF plugin features.

    Accessibility for post grid widget

    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

    9 thoughts on “How to create advanced queries for the component Post Grid”

    1. i’d like to click the feature image to open the linked post, instead of doing the “Read More” button. is this possble? how to achive this, please? Thanks very much

      Reply
      • Hello thanks for using our plugin
        Your requested feature will be imlemented in the next release (1.8.0) which will be published around the 15th of this month
        You will be able to Show/Hide the ‘Read more’ button
        These features will be found under the ‘Content’ tab / ‘Content’ section.
        Rgds Team EAC

        Reply
    2. Very impressed. Is there any way to change the style/size of the filter text? It’s quite small. Thank you!

      Reply
      • Hi Patrick.
        Thank you for using our plugin, but for now you cannot directly change the style / size of the filter.
        This will be included in the next release (1.8.4)
        For the moment the workaround is to edit the component then Advanced tab / EAC custom CSS and enter for example:

        selector .al-filters__wrapper .al-filters__item, selector .al-filters__wrapper .al-filters__item a {
        font-size: .9em;
        color: yourpreferredcolor;
        font-weight: 600;
        }

        Rgds EAC Team

        Reply
    3. Hi! Is there any way that one of the styles works like the image gallery overlays? I mean , I want to show only the featured image, and everything else selected in settings as an overlay…
      thanks

      Reply
      • Hi Fernando,
        This is not on our roadmap because we are working on our plugin to make your site more accessible to people with disabilities
        and overlay on widgets is strongly discouraged by the WCAG standard.
        For backwards compatibility reasons we keep the overlay for the image grid but we will not deploy it for the other grids.
        Rgds

        Reply
    4. i’d like to click the feature image to open the linked post, instead of linking to the image source. is this possble? how to achive this, please? Thanks very much

      Reply
      • Hi Don,
        We have revamped the interface and and have not yet updated the documentation
        For that you have to open the section ‘Content’, ‘Links’ part and disable ‘Lightbox on image’ option and finaly enable ‘Post link on picture’ option.
        Rgds

        Reply

    Leave a Comment