Skip to content

Instantly share code, notes, and snippets.

@neilgee neilgee/isotope-init.js
Last active Mar 19, 2019

Embed
What would you like to do?
Isotope Filter Custom Taxonomy on CPT Archive Page
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');
});
});
<?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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.