How to add filters and search to the WordPress Query Loop Block

It has been a pain to add filters and search to your feeds in Gutenberg. You either have to add custom code, or use a legacy plugin. Fortunately, there’s now a seamless and efficient solution available. In this article, we will guide you on how to easily integrate filters for any taxonomy and a search feature into your Gutenberg feeds using the Filter Query Block Pro. We started using it here on wpblockz.com start page!

An example screen of a filtered and searchable feed.

Share

We will cover, step by step

  1. Understanding the Query Loop Block
  2. Installing the Filter Query Loop Block
  3. Setting Up Filters
  4. Adjusting the Query Loop Block
  5. Adding Search Functionality
  6. Customization and Styling
  7. Conclusion

1. Understanding the Query Loop Block

The Query Loop Block in WordPress is a versatile tool that allows you to display posts based on specific criteria. It’s highly customizable and works well with dynamic content filters.

2. Installing Filter Query Block Pro

To get started, you need to install and activate the Filter Query Block Pro Plugin.

Steps:

  1. Go to filterqueryblock.com and get the plugin and license (9 USD/month).
  2. Navigate to Plugins > Add New in your WordPress dashboard.
  3. Click in the button “Upload plugin” at the top of the page.
  4. Click “Install Now” and then “Activate”.

Find the block in the list.

3. Setting Up Filters

  1. Add the ‘Filter Query Loop’ block wherever you want to use it in the block editor.
  2. You can have multiple feeds on the same page.
  3. The block automatically adds a Query Loop block as a child element to the Filters.

4. Adjusting the Query Loop Block

  1. Select the Query Loop Block within the Filter block.
  2. Configure the Block Settings, including the number of items per page and other display options, to suit your preferences.
  3. Select the Post Template Block inside the Query Loop Block and design it with blocks as you wish.

5. Add search functionality

Simply turn on the toggle ‘Show search box’ to enable search in the Block settings for the Filter Query Loop block.

6. Customizing and styling

  1. Pick a theme and layout from the settings of the main block.
  2. If you need even more styling, check out the css variables available.

7. Conclusion

And there you have it! No more fumbling with custom code or outdated plugins—the Filter Query Pro streamlines the process, giving you more time to focus on creating amazing content.

Life just got a whole lot easier (and a lot more fun) for developers using the Gutenberg editor. Enjoy the new possibilities!🚀

Get the plugin: filterqueryblock.com

More tutorials

Stay updated with the latest from WpBlockz

* indicates required