Filtering Taxonomy Terms by a Custom Field using Isotope

This members-only tutorial provides the steps to filter terms of a specified taxonomy by a Checkbox-type of custom ACF field using Isotope.

We shall

• create a field group with location set to a "Series" taxonomy of a "Lessons" CPT.
• add a Checkbox-type "Genres" custom field in the field group having a few value : label choices.
• edit a static Page with Oxygen and add the code to
  • loop through the custom field's choices and output them as filter buttons
  • loop through the taxonomy terms and for each term output term image, term name, term description all wrapped inside an anchor tag that links to the term archive page
  • add space-separated custom field values to each item as classes
• load and initialize Isotope.

Step 1

To follow along with the rest of this tutorial create lesson CPT with an associated series taxonomy using a plugin like CPT UI.

Step 2

Create an Advanced Custom Fields field group having a Checkbox-type of field.

I entered the choices like so:

blues : Blues
country : Country
guitar : Guitar
jazz : Jazz
metal : Metal
rock-and-soul : Rock & Soul

Set the Return value to Both (Array) since we need both the labels and values to work with.

Step 3

Install and activate WP Term Images plugin. This is for attaching an image to each of our taxonomy terms. You may alternately use ACF for this. In this tutorial we shall use WP Term Images.

Edit your terms and enter description, set an image and tick the corresponding genres.

Step 4

Create a Page called say, "Series" and edit it with Oxygen.

Add a Section.

Text Color: #eeeeee
Background Color: #262525
Section Container Width: full-width

Add a Code Block.

Set its width to 100%.

PHP & HTML: