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
Tab / Shift-Tab keyboard keys to navigate between filter labels
Enter / Space keyboard keys to activate a filter
aria-label text 'Filter results by + filter label'
Tab / Shift-Tab keyboard keys to navigate between links
Enter / Space keyboard keys to open link
Home keyboard key move focus to the first link
End keyboard key move focus to the last link
Escape keyboard key exit the grid
aria-label text 'View post + post title' on each 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.
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.
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
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 !
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‘.
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.
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’
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
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
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 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.
How to configure layout and content
Layout section
You can choose from the Masonry, Grid or Slider Layout mode.
For the Slider mode you will find in this post the description of the elements and their behavior.
You can select the ‘Equal height‘ option for grid mode so that each row has the same height.
Select the columns count and if the featured image, excerpt are displayed, choose between Left/Right to display side by side image and excerpt text.
Content section
You can use the toggle to display or hide ‘Title’, ‘Excerpt’, ‘Read more button’, ‘Tags’, ‘Author’, ‘Date’, Number of ‘Comments’, ‘Author avatar’ and ‘Featured image’
Note that, the ‘Lightbox‘ and ‘Post link on picture‘ are visible when the ‘Featured image’ is enable and they are exclusive.
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
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’
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
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
Impressed. thanks very much for your reply and contribution. look forward to that.
Very impressed. Is there any way to change the style/size of the filter text? It’s quite small. Thank you!
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
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
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
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
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