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
- Businesses
- Real estate listings
- Job listings
- Event listings
- Etc.
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 build a searchable directory of tennis courts. Visitors will be able to filter by criteria such as:
- Surface – e.g. hard court, clay, grass
- Whether or not it has a roof
- Price
While I’ve chosen this specific example, the concepts that you’ll learn will work with literally anything. Again, you can use these concepts to let visitors search and filter things like:
- Blog posts
- Real estate listings
- Humans – e.g. help people find personal trainers, music teachers, therapists, etc.
- Businesses – e.g. help people find a dentist, a plumber, etc.
- …anything!
Before we begin, I’ll assume that you’ve already installed:
- Toolset Types
- Toolset Blocks
- Elementor (free core version)
- Elementor Pro (optional)
Let’s get started!
1. Create Your Custom Post Type
Your post type controls the high-level type of content that people will filter. For this example, that’s a “Tennis Court” custom post type.
Learn more about custom post types
To create your custom post type, go to Toolset → Post Types → Add New and fill out the information:
2. Add Custom Fields
Custom fields help you store additional information about your custom post type. For this example, we need custom fields to store details like:
- The surface of the tennis court
- The price to rent it
- Whether it has a roof
To add these, go to the main Toolset dashboard and click Add custom fields for your custom post type:
Then, add as many fields as needed:
3. Populate Your Custom Post Type
Now, you need to populate your custom post type with information. To do that, go to [Post Type] → Add New and fill out the editor and any custom fields that you’ve added:
4. Create the Search Form/Results
Once you have your content, you need to create two things for your custom search to work:
- The layout of your search results page which will list all the items that meet a person’s search filters.
- The search form itself, including any filters that you want to offer.
With Toolset Blocks, you can do both of these at the same time.
To get started, create a regular WordPress page (Pages → Add New). Then, add a View block and give it a name:
Then, choose how you want your search results page to look and which layout you want to use. Since you’re creating a search results page, make sure to enable the Search option as well:
On the next screen, choose your custom post type – “Tennis Courts” in this case.
Now, you’ll be able to control the design/layout of both your search form and the search results:
Search Form
To create your search filter options, click the Add Search Field button. This will open all the options. You’ll see that you can add both a generic text search, as well as filters for all of the custom fields that you added in Step #2 (and plenty of other options):
Repeat the process to add other search fields.
Each field is a regular WordPress block, which means you can also mix-and-match other blocks (like creating a multi-column design).
You can also configure each individual search field using the Block sidebar. For example, when editing the price field, I can give people an option to search for values between a minimum and maximum price:
Make sure to also add a search button. Then, you’re finished!
Search Results Page
Next, scroll down to design your search results page.
Here, you’ll add Toolset blocks for each piece of content that you want to display. When you add a block, you’ll be able to dynamically link it to regular WordPress content (like the post title) or the custom fields that you’ve added.
For example, to add the featured image, you add a Toolset Image block and use the Dynamic Image Source feature to link it to the featured image:
As you add blocks, Toolset will automatically populate them with real information from your custom post type.
Repeat the process to add other text content. To pull in information from custom fields, you’ll usually want to use the Single Field block. Or, you can also use the Fields + Text block to add your own text alongside the field information.
Here’s a simple layout that includes the:
- Title
- Featured image
- Price per hour
You can also add sorting options if desired.
Test!
To make sure everything is working how you want it to, you can preview the page just like you would a regular WordPress page.
This will let you test the search form and make sure you like how the results look.
5. Add Your Search Form to Elementor
To finish things out, you need to add your custom search form to Elementor.
To get started, create your page with Elementor just like you would any other Elementor design. Then, when you’re ready to add your search form, add a new Toolset View widget to Elementor.
Once you select the View that you created in the previous step, you should see a live preview of your custom search form and results in the Elementor interface:
If you want to adjust basic layout and positioning settings, you can go to the Advanced tab in the Elementor interface.
For additional custom style changes, you can easily add your own custom CSS using Elementor’s CSS feature.
Create Your Custom WordPress Search Filters Today
With Toolset, you can easily create custom WordPress search forms and give your visitors as many filters as needed to help them find what they’re looking for.
While we’ve shown you an example using Toolset Types to create a custom content type (“Tennis Courts”), you can apply these exact same techniques to any type of WordPress content, even including regular blog posts.
Thanks to Toolset’s Elementor integration, you can also easily use your custom search/filter form in your Elementor designs (or several other popular page builder plugins, too).
About Colin Newcomer
Colin Newcomer is a freelance blogger for hire with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about digital marketing, WordPress, and B2B topics.
Related Articles
-
Many themes come with their own sliders. There are also great plugins that create slides out of anything. Still, in many cases, creating your own slider is the best solution.…
-
Have you ever wondered how WordPress loads all those small goodies that enable you to run a complete site off it?
-
If you are a WordPress developer or a WordPress user you’ve spent time looking for plugins. We are familiar with the Plugin Directory at WordPress.org, the go-to directory for free…
-
WordPress’ search function has always suffered to keep up with the rest of the developments in WP, so the use of a search plugin is absolutely necessary. Here’s a list…
Keep reading the article at WP Mayor. The article was originally written by Colin Newcomer on 2020-10-28 07:00:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.