Query Filter – Custom Field 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 Custom Field Filter” plugin.

This extension empowers you to create frontend filters with ease. Filtering Query Loop block by custom fields to find exactly what you’re looking for.

* WordPress block editor is required.

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 Custom Field 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 – Custom Field” block and place it within the Query Loop block. Multiple instances of this block can work together with ‘AND’ relationship to further optimize the result.
  5. Adjust the settings on the ‘Query Filter – Custom Field’ block and you’re ready to go. Details regarding the settings will be covered in the next section.

Settings

Custom Field Name

By selecting from one of the existing custom field metakeys on your site, all the distinct values associated with that metakey will be included in the filter dropdown on the frontend.


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.