Better Post And Filter Widgets
Requirements
Better Post & Filter Widgets works with the free version of Elementor. You don’t need Elementor Pro, but if you have it, the plugin can filter its widgets too.
Options:
| Requirement | Minimum |
|---|---|
| WordPress | 6.2 or later |
| PHP | 7.4 or later |
| Elementor (free) | 3.0 or later |
Note: If Elementor is missing, or its version or your PHP version is too old, the plugin shows a notice in the WordPress admin and stays inactive until you fix it.
Installation
- Make sure Elementor is installed and active.
- Go to Plugins > Add New, search for Better Post & Filter Widgets for Elementor, then click Install Now and Activate.
Tips:
- There is no settings page to configure. Everything is set up inside the Elementor editor.
- The widgets appear in the Elementor panel under BPFWE Widgets: Post Widget, Filter Widget, Search Bar Widget, Sorting Widget and Posts Found.
Build Your First Filtered Grid
This example builds a blog grid with a category filter. The same steps work for any post type, and for the search and sorting widgets.
1. Add a Post Widget
Open a page in Elementor and drag the Post Widget onto it. Details: Under Query, choose the post type to show. Under Layout, choose the skin and the number of columns. You can also use Elementor Pro’s Posts, Loop Grid or Loop Carousel widget instead. See Which Widgets Can Be Filtered.
2. Add a Filter Widget
Drag the Filter Widget onto the same page, usually in a column or sidebar next to the posts. Details: In Filter Content, set Post Type to Filter to the same post type as the Post Widget.
3. Connect the Filter to the Posts
In Filter Content, open Post Widget Target and choose the widget the filter should control. Details: The dropdown lists the post widgets on the page. Options:
| Setting | Description |
|---|---|
| Post Widget Target | Choose the widget from the list. This is the easiest way. |
| Custom Target Selector | Target a widget by its CSS ID or class instead, for example #my-grid. Separate several selectors with commas to control more than one widget. |
Tips:
- If you leave both empty and the page has only one post widget, the filter connects to it automatically.
- With more than one post widget on the page, always set a target.
4. Add Filter Items
Still in Filter Content, add an item for each group of options you want to show. Details: For each item, give it a Group Title, then choose a Data Source. For this example, choose Taxonomy and then Category. Options:
| Data Source | Use it for |
|---|---|
| Taxonomy | Categories, tags, product categories or any custom taxonomy. |
| Custom Field | Text values saved in a custom field or ACF field. |
| Custom Field (Numeric) | Numbers such as price, year or rating, shown as a range. |
| Relational Field | Posts linked through an ACF relationship or post object field. |
Each item also has a Field Type, such as checkboxes, radio buttons, labels, a dropdown or a range slider. See the Filter Widget page for every option.
5. Check the Result
Click Publish and view the page. Choose an option in the filter, and the posts update without reloading the page. Details: By default, results update as soon as an option changes. To apply the filters only when the visitor clicks a button, turn on Display Submit Button under Additional Options.
Add Search and Sorting
The Search Bar Widget and the Sorting Widget connect to a post widget the same way as the filter, through Post Widget Target. Details: They can share a target with the Filter Widget. A search, a sort and selected filters then combine into one set of results. Add the Posts Found widget to show how many results match.
Which Widgets Can Be Filtered
The Filter, Search Bar and Sorting widgets can control these widgets. Options:
| Widget | Plugin |
|---|---|
| Post Widget | Better Post & Filter Widgets |
| Posts | Elementor Pro |
| Loop Grid | Elementor Pro |
| Loop Carousel | Elementor Pro |
| Loop (V4 atomic) | Elementor |
Note: Developers can make other post widgets available with the
bpfwe/target_widget_classesfilter. See PHP Hooks.
Get Help
If something doesn’t work as expected, ask on the WordPress.org support forum. Details: Include a link to the page and the widgets you used. The plugin is free, and donations help keep it that way. For a feature built for your own project, you can hire the developer.
Next Steps
- Filter Widget: every data source, field type and option.
- Post Widget: layouts, carousels, loop templates and queries.
- Search Bar Widget and Sorting Widget: search and sort the results.
- Custom Query Guide and PHP Hooks: change queries and output with code.