Want to make it easier for your visitors to find what they’re looking for on your website? Letting them filter search results gives them all the tools they need to drill into your content and find what they want.
In this post, I’ll show you how to create a custom search form that lets visitors search and filter any content on your site. You’ll be able to do this with zero code required thanks to a combination of Toolset and Elementor (but mostly via Toolset! The Elementor part is optional).
Specifically, I’ll show you how to build a search form that lets visitors search and filter local tennis courts. However, you can apply the same principles that you learn to literally any type of content. Just a few examples of what you can create custom search and filter forms for are:
- People/service providers
- Real estate listings
- Job listings
- Event listings
Or, you can also just use these tactics to create a custom search and filter form for your regular blog posts. You could give readers the ability to filter search results by category/tag, author, and more.
Basically, this is a really flexible method that you can apply in lots of different ways – let’s dig in!
What You Need to Filter Search Results in WordPress
To set up this functionality without needing any code, you’ll need the help of two plugins:
Toolset is what you’ll rely on the most because it’s what powers the search and filter. It’s a set of components that help you work with custom content on your WordPress site. Across the components, you’ll get tools to help you:
- Create custom post types, custom fields, and custom taxonomies to store information
- Control the templates for how your custom content displays
- Query your content in different ways (like a custom search form)
- Restrict access to content
- …plus a lot more!
Specifically for this tutorial, you’ll need two of Toolset’s five components – Toolset Blocks and Toolset Types.
If you want to learn more, check out our introduction to Toolset or head to the Toolset website. Toolset is a premium plugin, but WP Mayor readers can get a 20% discount by clicking this link.
Elementor, on the other hand, is the most popular WordPress page builder plugin. It lets you create amazing designs using a simple visual, drag-and-drop interface.
While Toolset can also help you create custom designs using the native WordPress block editor, Elementor gives you more design flexibility, which is why it makes such a good option to pair with Toolset for code-free WordPress builds.
You can follow this tutorial using the free version of Elementor, but upgrading to Elementor Pro will give you a little more control over your templates.
Tutorial: How to Filter Search Results With Elementor and Toolset
Now, let’s get into the tutorial. For this example, I’ll help you
This article was written by Colin Newcomer and originally published on WP Mayor.