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.

<?php
// https://github.com/metafizzy/isotope/releases/latest
wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery','imagesloaded'), '3.0.6', true);
wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotope-init.js', array('isotope'), '3.0.6', true);
get_header();
?>
<style>
.cpt-item {
width: 25%;
}
@media (max-width: 1023px) {
.cpt-item {
width: 33.333%;
}
}
@media (max-width: 767px) {
.cpt-item {
width: 50%;
}
}
</style>
<div class="container">
<div class="row">
<div class="fl-content col-lg-12">
<?php $terms = get_terms( 'my_category' ); ?>
<?php if( $terms ) {
?>
<ul id="my-category" class="filter clearfix">
<li><a href="#" class="active" data-filter="*"><span>All</span></a></li>
<?php foreach( $terms as $term ){
echo "<li><a href='#' data-filter='.$term->slug'><span>$term->name</span></a></li>";
} ?>
</ul><!-- /my-category -->
<?php }
if( have_posts() ) { ?>
<div id="cpt-wrap" class="clearfix filterable-cpt grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>
<div class="cpt-content">
<?php while( have_posts() ): the_post(); ?>
<?php $terms = get_the_terms( get_the_ID(), 'my_category' ); ?>
<?php
global $post; ?>
<article class="grid-item cpt-item <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug .' '; }; ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php
if ( has_post_thumbnail($post->ID) ) {
echo the_post_thumbnail();
} ?>
<h3><?php the_title(); ?></h3>
</a>
</article>
<?php endwhile; ?>
</div><!-- cpt-content -->
</div><!-- cpt-wrap -->
<?php } ?>
</div><!-- end of fl-content -->
</div><!-- end of row -->
</div> <!-- end of archive container -->
<?php
get_footer();
view raw template.php hosted with ❤ by GitHub

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.

jQuery(document).ready(function($){
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
layoutMode: 'fitRows',
});
// Layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// Filter items on button click
$('#my-category').on( 'click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$('#cpt-wrap').isotope({ filter: filterValue });
$(this).parent('div').find('a').removeClass('active');
$(this).addClass('active');
});
});
view raw isotope-init.js hosted with ❤ by GitHub

Leave a Comment