WordPress Isotope Filtering Dynamically with Categories

This will create a filter system with Isotope automatically with your Post and Categories, or a Custom Post Type and a Custom Taxonomy. You’ll just have to fill in YOUR_CUSTOM_POSTTYPE and YOUR_CUSTOM_TAX. This also assumes you have Isotope pulling in correctly.

First, Start the Query:

<?php

        $customPostType = 'YOUR_CUSTOM_POSTTYPE';
        $customTax = 'YOUR_CUSTOM_TAX';
	$wp_query = new WP_Query();
	$wp_query->query(array(
	   'post_type'=> $customPostType,
	   'posts_per_page' => 10,
	   'paged' => $paged,
));
	if ($wp_query->have_posts()) : ?>

 

The filter:

// Create Filter buttons from all Categories that have posts 
		
		// create an array
		$filterLinks = array();
		// an empty array to add to our previous array
		$newarray = array();
		// Starter "Show All' Array
		$starter = array('name'=>'show all','slug'=>'*');
		// put it into our array
		$filterLinks[] = $starter;
		
		 $taxterms = get_terms( $customTax );
		 // loop through terms if not empty
		 if ( ! empty( $taxterms ) && ! is_wp_error( $taxterms ) ){
		
			 foreach ( $taxterms as $taxterm ) {
			  	// show all is a little different, so we add a "." to the others
				$datafilter = '.' . $taxterm->slug;
				// create some 
				  $newarray = array(
						'name' => $taxterm->name,
						'slug' => $datafilter,
				  );
				 // load it up 
				  $filterLinks[] = $newarray;
				
			 } // endforeach
			
		 } // if not empty
 
	// Filter Buttons output
	echo '<div id="filters" class="button-group">' ."\n";
	// Create filter buttons from terms
		foreach ($filterLinks as $links) {
			echo '<div class="button" data-filter="' . $links['slug'] . '">' . $links['name'] . '</button>'."\n";
		}
	echo '</div><!-- isotope filters -->';

Then, you can do your isotopes (your div items).

<div id="container">
<?php while ($wp_query->have_posts()) : ?>
<?php $wp_query->the_post(); ?>
	
<?php
// Get the terms with each post
$terms = get_the_terms( $post->ID, $customTax );
						
if ( $terms && ! is_wp_error( $terms ) ) : 

	$cat_links = array();

	foreach ( $terms as $term ) {
		$cat_links[] = $term->slug;
	}
						
	$mycats = join( " ", $cat_links );
?>


<?php endif; ?>
    <div class="item newsblock <?php echo $mycats; ?>">
        <a href="<?php the_permalink(); ?>">
        <?php if ( has_post_thumbnail() ) {
						the_post_thumbnail();
					} ?>
            <div class="news-content">
                <div class="entry-content">
                    <h2><?php the_title(); ?></h2>
                        <?php the_excerpt(); ?>
                </div><!-- entry content -->
                <div class="readmore">keep reading</div>
             </div><!-- news content -->
        </a>
    </div><!-- item -->
    
    
    <?php endwhile; ?>
    </div><!-- container -->
    
  
    
    <?php endif; ?>

Finally the jQuery to control the filter:

//Isotope with images loaded ...
	var $container = $('#container').imagesLoaded( function() {
  	$container.isotope({
    // options

	 itemSelector: '.item',
		  masonry: {
			gutter: 30
			}
 		 });
	});
	
	// filter functions
  var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };
  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });
  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

 

2 thoughts on “WordPress Isotope Filtering Dynamically with Categories

  1. Pingback: traiteur rabat

Leave a Reply

Your email address will not be published. Required fields are marked *

66 + = 68