Filter CPT Archive by Custom Taxonomy with Isotope

The Isotope JS library allows for some instant filtering of posts from a taxonomy without page reloading. Below is a template file which uses a CPT Archive page and a Custom Taxonomy called ‘my_category‘.

Since it’s a CPT Archive page it uses WordPress native loop, there is some specific CSS class markup for the posts that is used and in this instance it uses ‘cpt‘.

The Isoptope library is loaded to the archive page as well as an isotope-init file and also imagesloaded is called which comes bundled with WordPress.

Lot of stuff going on, the custom taxonomy ‘my_category‘ has its terms output in a loop which will serve as the links to filter the CPTs, then the native loop is run with another ‘my_category’ loop that outputs the name of the term as a CSS class in the posts class attribute values. This does the filtering Isotope, then the rest of the loop – in this case just the featured image and the title of the post.

And then isotope-init.js file which does its magic, read up on the parameters and values here.