How to Filter Search Results in WordPress With Toolset

Written by Colin Newcomer
Written by Colin Newcomer

Table of Contents

Full disclosure: If you purchase through a link on our site, we may earn a commission. Here’s why you can trust us.

🚩 This article was written a while ago. If you find any outdated references, Please request an update →

AD

How to Filter Search Results in WordPress

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 head to the Toolset website. 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:

Custom post type

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:

Add custom fields

Then, add as many fields as needed:

Custom fields examples

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:

Add data

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:

Add View block

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:

Enable search

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:

Build your custom search and filter form

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):

Add filters

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:

Configure filter fields

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:

Build search results layout

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
Add custom fields to search results

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 head to the Toolset website. Toolset is a premium plugin, but WP Mayor readers can get a 20% discount by clicking this link.

This article was filed in our archives.
Article by
Colin Newcomer
Colin has been using WordPress for over a decade and is on a quest to test all 60,000+ plugins at WordPress.org. He has been a Writer and Product Review Expert for WP Mayor since 2017, testing well over 150 products and services throughout that time.

CHECK OUT OUR PARTNERS

BionicWP

Recommendations

Discover More

Share Your Thoughts

Your email address will not be published. Required fields are marked *

New discoveries, every week.
Join thousands of designers, developers, and builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email, once a week.
WP Mayor Newsletter

Unlock higher conversions and a better user experience 🚀

Download our FREE 60/30/10 guide to web design.

By downloading this guide, you are opting in to our email list. You may unsubscribe any time.

What's missing?