Filtering content within the Query Loop block is a common need for many WordPress users. Whether you’re showcasing recipes, travel blogs, or a mix of post types, having an easy way to sort and filter content makes for a better user experience. That’s why we’ve created the Query Loop Filter plugin – a simple yet powerful way to bring dynamic filtering to your WordPress site.
Human Made Product Engineer Rob O’Rourke gives us the lowdown 👇
What is the Query Loop Filter plugin?
The Query Loop Filter plugin allows you to add filtering functionality to your Query Loop block effortlessly. Want to filter by taxonomy, content type, or even perform a search? This plugin enables you to do it all – and it’s built on WordPress’s Interactivity API to ensure a seamless, dynamic experience.
Here’s the magic: it works directly within the Query Loop block, dynamically updating the content displayed and even modifying the URL without requiring a full page reload.
Setting up filters: A quick walkthrough
Adding a taxonomy filter
Imagine you’re managing a blog with categories like “Recipes” and “Travel.” With the Query Loop Filter plugin, you can add a taxonomy filter to let users narrow down content by category.
- Edit the template: Start by editing your Query Loop block.
- Add the filter: Search for “Taxonomy Filter” in the block inserter and drop it into your layout. Position it wherever you’d like – for instance, on the side for a clean look.
- Configure options: Customise the filter label, choose the taxonomies to display, and save your changes.
Now, when you visit your site, users can filter posts dynamically by category, and the Query Loop block updates in real time.
Search and content type filters
Want to take it a step further? Combine search functionality with a content type filter for more granular control.
- Dynamic search: Place a search block inside the Query Loop. This ensures search results update inline without reloading the page.
- Filter by content type: Add a “Post Type Filter” block to allow users to filter results by posts, pages, or other custom post types.
These filters can be used together for a powerful combination. For instance, users could search for “pasta” and then narrow results to recipes or blog posts.
Why build on the Interactivity API?
The Interactivity API is a game-changer for WordPress. It lets your site perform dynamic actions – like filtering and searching – without requiring full page reloads. This creates a smoother and faster experience for users. With the Query Loop Filter plugin, this cutting-edge functionality is baked right in.
Real-world use cases
Here’s how you might use the Query Loop Filter plugin:
- Blogs: Enable readers to sort posts by category or tag dynamically.
- E-commerce: Let shoppers filter products by type, category, or price range.
- Directories: Allow users to refine results by location, type, or other criteria.
Future enhancements
We’ve designed the Query Loop Filter plugin with extensibility in mind. While it currently supports taxonomy, content type, and search filters, we’re exploring additional filter options to make it even more versatile.
Get Started with the Query Loop Filter plugin
Whether you’re building a blog, e-commerce store, or a complex directory, the Query Loop Filter plugin simplifies filtering for both you and your users. It’s easy to set up, integrates seamlessly with the Query Loop block, and leverages the power of the Interactivity API to deliver a modern WordPress experience. Find it on GitHub now.
Give it a try and let us know what you think!