TUTORIAL
1. ADD THE WIDGETS
Add an Elementor PRO Form widget and a Posts archive widget, you can choose one from supported widgets:
– free e-addons Query Posts
– free e-addons Query Media
– Elementor PRO Posts
– Elementor PRO Archive Posts
2. CONFIGURE FORM FIELDS
Add to Form all fields as you need, each field can be filter.
Use Text, Radio, Select and Checkbox fields type to create your filters.
OPTIONAL
Add optionally a Reset field to reset filters after user use it.
Use optionally Query Field if you need to generate Options dynamically,
WARNING
Set each field Custom ID but pay attention not using WP reserved keys
3. CONFIGURE FORM ACTIONS
Add to Form “Actions After Submit” the “Query Posts Search & Filter” action, add extra actions only if needed
4. CONFIGURE FILTER ARGS
Add multiple query args to the archive widget, for each of them set a Key and a Value.
They will override the default one present on the original query.
Filter Keys are provided by the WP_Query class, most used are:
- Search, to search a text in post title, content and excerpt
- Tax Query, to filter posts based on related Terms
- Meta Query, to filter posts base a custom meta field value
- Date Query, to filter posts based on its own publication date
5. CONFIGURE ARCHIVE ELEMENT ID
Set the Archive Widget Elementor Element ID, this is a random string provided automatically by Elementor to any Widget
HOW TO
Install free “e-addons CopyPaste” plugin and simply do Right click on the Archive Widget and click on the # button next to the Copy entry
You can also obtain it without install any extra plugin, simply analyze HTML code and you will find it in the main Widget div wrapper.
OPTIONAL
Enable the Ajax update to a quicker search
WARNING
This is NOT the CSS ID
6. ADD EXTRA WIDGETS
if needed, the Filter action can manage in same search action multiple types of supported Widgets:
- other Archive Widgets (see point 1)
- Archive Order By Widget
- Archive Info Widget
- Archive Posts per Page Widget
- Active Search Filters Widget
You have to insert the Elementor Element ID of each extra Widget (see point 5)