1. How to use
  2. Examples
  3. 1. Search filter in custom loops
  4. 2. Search and taxonomy filters

How to Add a Search Filter to Your WordPress Site?

The plugin usage doesn’t require any specific knowledge, and you can use it like pretty much any other Gutenberg block. However, if you’re struggling to find it in your Gutenberg inserter or don’t know where exactly you need to insert it, I will describe everything step by step below.

First of all, let’s double-check the WordPress version you’re currently using. It should be at least version 6.5 or higher. Once that is out of the way, let’s activate the plugin from the Plugins > All plugins page in the WordPress admin dashboard.

Then, let’s navigate to the page where you’re intended to use the Search Filter block. It can be:

  • Any template from Appearance > Editor,
  • Any regular WordPress page from Pages > All Pages.

On this page, we need to find a “Query Loop” block, navigate to it, and then we can add the “Search Filter” inside:

If you can not find the “Search Filter” block in the inserter, most likely you’re just trying to add it outside of the “Query Loop” block. Once again, guys, it is only available inside the “Query Loop”, I hope the screenshot below will clear up the picture a little bit.

What to do if the “Search Filter” block doesn’t work without a page refresh? Easy – all we need is to check the “Query Loop” block settings and to make sure that this toggle is unselected:

AJAX Search Filter Examples

1. Add the “Search Filter” block to a custom “Query Loop” block

First of all, I would like to highlight the moment that you may use as many search filter blocks on your page as you want. You can use them for both main and additional queries on a page.

For example, let’s say that we have an additional query which allows us to display posts of a custom type, and it has the following settings:

We can easily add the search filter block to it, and on the site front-end, it will look and work similarly to what you can see on the video below:

2. Using search filters together with taxonomy filters

As I already mentioned before multiple times, the search filter block can be used together with other WordPress interactive blocks, for example, with my Simple Taxonomy Filter Block.

In the “Document Overview,” these blocks may be added in the following way:

Taxonomy filter and search filter blocks

And this is how it is going to work on our website: