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 using Toolset.
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 a 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 use Toolset to power the search and filter. You can also insert the search into any other page using the View block or widget.
Toolset is 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.
Toolset can also help you create custom designs using the native WordPress block editor, and it is compatible with page builders like Elementor to give you even more design flexibility.
If you want to learn more, check out our introduction to Toolset or Toolset. Toolset is a premium plugin, but WP Mayor readers can get a 20% discount by clicking this link.
Tutorial: How to Filter Search Results With 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
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.
Your search page is now ready to be used! You can also insert the search into any other page on your site using the View block or widget
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.
If you want to learn more, check out our introduction to Toolset or Toolset. Toolset is a premium plugin, but WP Mayor readers can get a 20% discount by clicking this link.
