How to filter custom post types by taxonomy and custom fields
Views plugin lets you display lists of posts on a site’s front-end. These can be posts, pages, and posts based on your Custom Post Type. Further, you can add front-end filters to your post lists to allow visitors to see only posts that match the filter.
In this tutorial, we show you how to add front-end filters to WordPress Archives and Views that you create with Toolset plugins.
Examples for front-end filters:
You can set up your own practice site, or use the Toolset training site that we created for you (and has everything installed and ready).
Example 1 – An archive, filtered by taxonomy terms
We add a filter to the consultant archive page so your visitors can see consultants that speak a specific foreign language. The Foreign language is a custom taxonomy.
Our example includes:
- Consultant – a Custom Post Type (CPT)
- Foreign languages – a custom taxonomy for the Consultant CPT
- Chinese, French, Spanish – terms of the Foreign languages taxonomy
Filterable archive – Steps to follow
Steps in a nutshell (see the video for complete instructions)
- Create a WordPress Archive for your Custom Post Type.
Use the Screen Options to enable the Filter section.
Scroll down the screen to the Custom Search Settings section and choose AJAX results update when visitors change any filter values.
In the Filter Editor, include your taxonomies as filters – Use the New Filter button (see the screenshot for details)
Turn your radio box into a “flat” list of options.
- Wrap your filter into an additional div tag, for example:div to add
- Open the CSS Editor below and insert the following code:
- Wrap your filter into an additional div tag, for example:
- Stroll down to the Loop Output Editor. Design your output the way you like. In our example, we used the table-grid option and we included the post title as a link and the Consultant image field.
- Save your changes and visit your archive on the front-end.
Your filter should work now. Choose a language and click on it. Your list will then show only consultants speaking that language.
Example 2 – How to build a list of posts filtered by a custom field
We will create a View that displays services in a grid. Visitors will be able to filter the list of services using a drop-down that lists “target group” options.
In our example, we will use the following data:
- Service – a custom post type (CPT)
- Customers – a custom field representing customer groups as a list of checkboxes
If a group has been checked, it means that this service is available for that group of customers.
Filterable list of posts – Steps to follow
- Create a View that lists posts from your custom post type (in our example, services).
- Use the Screen Options to enable the Filter section.
- In the Custom Search Settings section, choose AJAX results update when visitors change any filter values.
- In the Filter Editor, include your custom field – Customers in our case. Check dropdown as your Input type.
- Design your output the way you like. In our example, we used the table-grid option and we included the post title as a link and the Service image field.
- Save your View.
- Add your View to a page and test it.
By default, it should display all your services. If you select a different value from your dropdown, your grid should immediately update to limit the results to only posts from that group.
Check the complete version of our training site to compare your results.
Share your filterable list with us
Do you have a filterable list working? We would love to see it.
If you have used our training site to test the feature, please share a link. If you have your own site with a filterable list, even better!
The one on the left is from our Toolset Starter theme.