Taxonomy Query Filter
This Query Filter is a simple UI improvement for Query Loops that enable users to filter the Query by taxonomy.
Users can filter a list of Posts (including Custom Post Types, Products, Posts, etc) by any option. Things like tags or categories (the default taxonomies) or even custom taxonomies.
Style the filter with a Select (drop down) or radio buttons. The markup is clean and easy to style for any website!
Features
Zero configuration required. Drop it in and start letting users filter content immediately, even with Custom Post Types and Taxonomies.
Drop-in Compatibility
Works with any Query Loop Blockuu003cbru003eAutomattic Detection of Taxonomiesu003cbru003eCompatible with any theme.
Performance Focused
Clean Semantic HTMLu003cbru003eLightweight and Fastu003cbru003eSupports Full Page reload or Content Swapping
Developer Friendly
Easy Styling with CSSu003cbru003eWorks with any Custom Post Typeuu003cbru003eAccessibility friendly markup
Documentation
What you need to know to use the Taxonomy Query Filter
Installation & Setup
You have a few options to install the plugin, all of them pretty simple:
WordPress.org: Download the plugin from WordPress.org either from the website or directly in WordPress by going to Plugins > Add New and searching for ‘Taxonomy Query Filter’.
Github: You can also download the plugin directly from the Github repository and upload it to your WordPress instance (or any of the other methods you can use to install a plugin straight from Github).
Basic Usage
Just add the new block to any Query Loop. The taxonomies associated with the Post Type selected for the Query Loop Block will be available to choose. (For example ‘Categories’ or any custom Taxonomy.)
You can also select the ‘Taxonomy Query Filter – Radio’ Block and the ‘Radio Button’ version of the filter will be rendered instead of the default Select (dropdown) element.
When the page renders a user will be able to select any of the ‘terms’ (for example the individual categories) and only the terms that match that taxonomy will be in the Query Loop.
Customizing the Design
You can target the class .wp-block-twentybellows-taxonomy-query-filter to apply custom CSS to the select or radio button elements. The style is limited to what you can achieve with CSS. It is possible to enhance the select elements in your WordPress application using tools like select2 but that’s outside of the scope of this document.
Filter posts without reloading the whole page (Enhanced Pagination)
By default Query Loops reload the entire page when you change their content (like using the pagination buttons). This is also true for the Taxonomy Query Filter. However you can make a small change to your Query Loop Block so that those content changes (pagination buttons, this filter, etc) reload only the content in the Query loop.
To do that select the Query Loop Block that the Taxonomy Query Filter is in and go to the Advanced section of the Block Details panel. You will see an option ‘Reload Full Page‘. If you unselect that option then the content of the Query Loop will be replaced instead of a full page reload.
Interested in Contributing?
Looking for the code? Or for more detailed documentation? Want to report a bug or contribute to make the project better?