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.


  1. k on March 22, 2022 at 2:51 pm

    slug .’ ‘; }; ?>”>

    slug can’t display in class.

  2. Steve on October 20, 2020 at 8:02 pm

    Why is it so hard to have a link to a Demo?

  3. Aj on March 24, 2020 at 9:31 am

    is this line correct:


    because it seems that class=”active” is not removed when clicking around in filter. I tried to change it to .parent(‘li’) but that does not work either.

Leave all Comment