Query Filter – Frontend Search Block

Thanks to the WP Interactivity API introduced in WordPress 6.5.2, we’re excited to unveil our latest development at CTLT, the “WP Query Block Extension – Frontend Search Filter” plugin.

This feature enables you to refine your search within a Query Loop block by using specific keywords, allowing you to pinpoint exactly what you need.

* WordPress block editor is required.

Table of Contents

How to activate this feature on my website.

  1. Log in to your site’s Dashboard and navigate to the plugins page. Search for and activate ‘WP Query Block Extension – Frontend Search Filter‘ plugin.
  2. Add a Query Loop block to the page and configure the settings accordingly to include all the posts/pages that need to be displayed. It’s crucial to ensure that the Query Loop block effectively showcases all the relevant posts/pages before any filters are applied. If you would like to integrate the filters with an existing Query Loop block, you can skip this step.
  3. In the Query Loop block settings, ensure ‘Force page reload’ is turned off. This is an essential step to enable WP Interactivity API on the Query Loop block at the moment.
  4. Find the “Query Filter – Search” block and place it within the Query Loop block.
  5. Adjust the settings on the ‘Query Filter – Search’ block and you’re ready to go. Details regarding the settings will be covered in the next section.

Settings

Placeholder

This setting allows you to set the default text displayed in the search field on the frontend before any keywords are entered.

URL Query Parameters

In the page frontend, the state of the selected value in each filter dropdown is tracked within URL as Query Parameters. This makes sure each combination of selections has a unique URL where you can directly share with others.

Code

This is currently an internal project and is only available to UBC CTLT. Once we have decided to make it public, we will update this section accordingly.

Back to List of Blocks