How to Add a WordPress Taxonomy Filter to Your Site?

Using the WordPress taxonomy filter plugin is pretty straightforward and doesn’t require any complicated configuration or server requirements. Just make sure that your WordPress version is 6.5 or above. This is needed because the plugin uses the WordPress Interactivity API, which is the reason why it is so simple and fast.

First of all, let’s go ahead and go to Plugins > All plugins and activate the plugin.

1. Add the “Taxonomy Filter” block into a Query Loop

Since any filter we add to the page must be connected to a specific list of posts, we need to use the “Taxonomy Filter” block in the appropriate place.

  • Inside the “Query Loop” block – in most cases.
  • Inside the “Product Collection” block – for WooCommerce products.

If you’re trying to insert it somewhere else, outside of the mentioned blocks, then you probably won’t even find the block in the “Inserter”.

An example of a correct block structure is below:

Query loop block structure example
It is not necessary for a “Taxonomy Filter” block to be a direct child of “Query Loop”, there could also be “Group” blocks, etc.

2. Configure block settings

The block comes with a bunch of useful settings:

Taxonomy Filter block settings

Let’s dive a little bit more into each of them:

  • First of all, you can choose the block type between “Dropdown”, “Links”, and “Buttons”. The dropdown filters also come with the “Allow selecting multiple items” checkbox.
  • Show post counts – it is possible to display the total number of posts in each category (or a custom taxonomy) in the filter.
  • Taxonomy – choose from any registered taxonomy (available in the REST API).
  • All items text – by default, the plugin uses the all_items label, which is configured in taxonomy registration, but you can set any custom text for every filter individually.
  • Order by – for each filter on a page, you can set an individual term ordering. Three options are supported – by name, by total post count, and by term group, which basically allows you to set a custom term ordering.
  • Limit number of visible items – available in “Links” and “Buttons” filters. Allows you to hide a specific number of terms in the list under the “show more” link. Texts are customizable.

I’m also open to adding new useful block settings by your requests.

3. Taxonomy filter block styles

The plugin also allows you to customize the WordPress taxonomy filter styles:

  • Text color, hover text color, and active text color,
  • Background color, hover background color, and active background color,
  • Font size,
  • Margin and padding,
  • Border color, width, and radius.

You can see how it works in the video below:

Filter Examples

Let’s take a look at some WordPress taxonomy filter examples in order to get a clear understanding of how to configure it for certain scenarios.

Example 1. Creating a custom post type filter by taxonomy

In case you want to filter a custom post type by taxonomy, you need to keep in mind two things:

  1. Both custom post type and custom taxonomy should be allowed for the REST API,
  2. The custom taxonomy should be added for this specific custom post type (sounds obvious, but just in case).

For example, in my case, I want to filter regular WordPress posts by a custom taxonomy “Cities”, how can I do that?

First of all, let’s make sure that our custom taxonomy is allowed for the REST API. If you registered it in the code with the register_taxonomy() function, you need to use the following configuration:

register_taxonomy( 
	'city', 
	'post', // a post type name our custom taxonomy is added to
	array(
		...
		
		'show_in_rest' => true, // this parameter should be set to true
	)
);

But sometimes, when you’re registering a custom taxonomy with the help of another plugin (I think the most popular one is CPT UI), make sure to turn this option on:

Allow custom taxonomy for the REST API in order to make it work in the WordPress taxonomy filter block

That’s pretty much it, and now you can filter posts by a custom taxonomy “Cities”:

Example 2. Creating multiple taxonomy filters

My plugin also allows you to create multiple WordPress custom taxonomy filters on your website. Basically all you need to do is to add a “Taxonomy Filter” Gutenberg block two times to the same “Query Loop” block.

Please watch the video below, where I show how to create one: