Integrating Isotope with WordPress

Isotope is a very powerful jQuery plugin that allows you to create sortable, filterable (I’m sure that’s a word) masonry layouts (although you can have other layouts as well). Isotope is free for personal use (a commercial license costs $25, and an organizational license $90).

In this tutorial I will show how to add the Isotope code and scripts to a  template. In my example, I will use the categories to filter a list of posts.

Update: I wrote a part 2 for this tutorial that shows how to use one category’s subcategories to filter posts.

1. Download the script from the Isotope repository, and upload it to your theme’s folder (for example /js/libs/jquery.isotope.min.js)
2. Add a list of categories that will serve as filters (following the filtering instructions in istotope):
   

   <ul id="filters">
       <li><a href="#" data-filter="*" class="selected">Everything</a></li>
   	<?php 
   		$terms = get_terms("category"); // get all categories, but you can use any taxonomy
   		$count = count($terms); //How many are they?
   		if ( $count > 0 ){  //If there are more than 0 terms
   			foreach ( $terms as $term ) {  //for each term:
   				echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
   				//create a list item with the current term slug for sorting, and name for label
   			}
   		} 
   	?>
   </ul>

3. Make a custom  loop to load a bunch of blog post. Each blog posts must share a class (in my case, I used ‘item’), and additional classes to filter (from the list of categories from Setp 2):
   

   <?php $the_query = new WP_Query( 'posts_per_page=50' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
   <?php if ( $the_query->have_posts() ) : ?>
       <div id="isotope-list">
       <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
   	$termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item
   	$termsString = ""; //initialize the string that will contain the terms
   		foreach ( $termsArray as $term ) { // for each term 
   			$termsString .= $term->slug.' '; //create a string that has all the slugs 
   		}
   	?> 
   	<div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
   		<h3><?php the_title(); ?></h3>
   	        <?php if ( has_post_thumbnail() ) { 
                         the_post_thumbnail();
                   } ?>
   	</div> <!-- end item -->
       <?php endwhile;  ?>
       </div> <!-- end isotope-list -->
   <?php endif; ?>

4. Go check. At this point your page should have a list with all your categories, and a bunch of posts. View the page source to make sure the blog posts have the proper classes (‘item’, plus all the categories it belongs to).
5. Create a file with the necessary JavaScript to launch and set up Isotope, and place it in your theme folder (for example, /js/isotope.js):
   

   jQuery(function ($) {
   
   	var $container = $('#isotope-list'); //The ID for the list with all the blog posts
   	$container.isotope({ //Isotope options, 'item' matches the class in the PHP
   		itemSelector : '.item', 
     		layoutMode : 'masonry'
   	});
   
   	//Add the class selected to the item that is clicked, and remove from the others
   	var $optionSets = $('#filters'),
   	$optionLinks = $optionSets.find('a');
   
   	$optionLinks.click(function(){
   	var $this = $(this);
   	// don't proceed if already selected
   	if ( $this.hasClass('selected') ) {
   	  return false;
   	}
   	var $optionSet = $this.parents('#filters');
   	$optionSets.find('.selected').removeClass('selected');
   	$this.addClass('selected');
   
   	//When an item is clicked, sort the items.
   	 var selector = $(this).attr('data-filter');
   	$container.isotope({ filter: selector });
   
   	return false;
   	});
   
   });

6. There is some optional, but recommended CSS that you should add to animate the filtering. Place a CSS file with the code in your theme folder (for example,  /css/isotope.css). Feel free to add additional styles to make your posts look nice:
   

   /* Start: Recommended Isotope styles */
   
   /**** Isotope Filtering ****/
   
   .isotope-item {
     z-index: 2;
   }
   
   .isotope-hidden.isotope-item {
     pointer-events: none;
     z-index: 1;
   }
   
   /**** Isotope CSS3 transitions ****/
   
   .isotope,
   .isotope .isotope-item {
     -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
         -ms-transition-duration: 0.8s;
          -o-transition-duration: 0.8s;
             transition-duration: 0.8s;
   }
   
   .isotope {
     -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
         -ms-transition-property: height, width;
          -o-transition-property: height, width;
             transition-property: height, width;
   }
   
   .isotope .isotope-item {
     -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property:    -moz-transform, opacity;
         -ms-transition-property:     -ms-transform, opacity;
          -o-transition-property:      -o-transform, opacity;
             transition-property:         transform, opacity;
   }
   
   /**** disabling Isotope CSS3 transitions ****/
   
   .isotope.no-transition,
   .isotope.no-transition .isotope-item,
   .isotope .isotope-item.no-transition {
     -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
         -ms-transition-duration: 0s;
          -o-transition-duration: 0s;
             transition-duration: 0s;
   }
   
   /* End: Recommended Isotope styles */

7. In functions.php, load the scripts and CSS:
   

   function add_isotope() {
       wp_register_script( 'isotope', get_template_directory_uri().'/js/libs/jquery.isotope.min.js', array('jquery'),  true );
       wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
       wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/css/isotope.css' );
   
       wp_enqueue_script('isotope-init');
       wp_enqueue_style('isotope-css');
   }
   
   add_action( 'wp_enqueue_scripts', 'add_isotope' );

That’s it!