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(); |
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'); | |
| }); | |
| }); |
3 comments
k
slug .’ ‘; }; ?>”>
slug can’t display in class.
Steve
Why is it so hard to have a link to a Demo?
Aj
is this line correct:
$(this).parent(‘div’).find(‘a’).removeClass(‘active’);
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.