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

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

* 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 Taxonomy Filters’ 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 – Taxonomy” 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 – Taxonomy’ block and you’re ready to go. Details regarding the settings will be covered in the next section.

Settings

Taxonomy Type

This block is meant to handle both category and tag filters, but only one of them is supported in each block instance.

Categories/Tags

Depending on the Taxonomy Type you choose, a text field will be displayed for either Categories or Tags. This field has an autocomplete feature, allowing you to begin typing to search for the term you want. You can input multiple terms.

Child Categories Only

This setting is only available if “Category” is selected as the Taxonomy Type. It allows you to include only the child categories of the selected categories in the filter dropdown. This is beneficial if you have organized your categories in a hierarchy and would like to filter based solely on the child categories.

Default Label

Configure the text for the dropdown if nothing is selected. The default value is ‘All’.

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