Integrate Isotope with WordPress, Part 2 (Categories)

A few months ago I wrote a post on how to integrate Isotope with WordPress. Since then, I’ve received some requests on showing how to limit it to one category. In this tutorial I will show how to add the Isotope code and scripts to a  template, filtering the posts that belong to one category by it’s sub-categories.

You will notice that most steps are the same as with the original tutorial, but I have left them here, so people won’t have to go back and forth between articles. I’ll highlight the lines of code that differ from the first article.

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 sub-categories of  my category 37 (here’s a tutorial on how to find the ID for your category). This list will serve as filters (following the filtering instructions in istotope):
   
   HTML

   <ul id="filters"> <li><a href="#" data-filter="*">Everything</a></li> <?php $terms = get_terms('category', array('parent' => 37)); // you can use any taxonomy, instead of just 'category' $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>

   1. <ul id="filters">

   2.     <li><a href="#" data-filter="*">Everything</a></li>

   3. 	<?php 

   4. 		$terms = get_terms('category', array('parent' => 37)); // you can use any taxonomy, instead of just 'category'

   5. 		$count = count($terms); //How many are they?

   6. 		if ( $count > 0 ){  //If there are more than 0 terms

   7. 			foreach ( $terms as $term ) {  //for each term:

   8. 				echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";

   9. 				//create a list item with the current term slug for sorting, and name for label

   10. 			}

   11. 		} 

   12. 	?>

   13. </ul>

3. Make a custom  loop to load all the posts that match the sub-categories. 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):
   
   HTML

   <?php $terms_ID_array = array(); foreach ($terms as $term) { $terms_ID_array[] = $term->term_id; // Add each term's ID to an array } $terms_ID_string = implode(',', $terms_ID_array); // Create a string with all the IDs, separated by commas $the_query = new WP_Query( 'posts_per_page=50&cat='.$terms_ID_string ); // Display 50 posts that belong to the categories in the string ?> <?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; ?>

   1. <?php 

   2.      $terms_ID_array = array();

   3.      foreach ($terms as $term)

   4.      {

   5.          $terms_ID_array[] = $term->term_id; // Add each term's ID to an array

   6.      }

   7.      $terms_ID_string = implode(',', $terms_ID_array); // Create a string with all the IDs, separated by commas

   8.      $the_query = new WP_Query( 'posts_per_page=50&cat='.$terms_ID_string ); // Display 50 posts that belong to the categories in the string 

   9. ?>

   10. <?php if ( $the_query->have_posts() ) : ?>

   11.     <div id="isotope-list">

   12.     <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 

   13. 	$termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item

   14. 	$termsString = ""; //initialize the string that will contain the terms

   15. 		foreach ( $termsArray as $term ) { // for each term 

   16. 			$termsString .= $term->slug.' '; //create a string that has all the slugs 

   17. 		}

   18. 	?> 

   19. 	<div class="<?php echo $termsString; ?> item"> <?php // 'item' is used as an identifier (see Setp 5, line 6) ?>

   20. 		<h3><?php the_title(); ?></h3>

   21. 	        <?php if ( has_post_thumbnail() ) { 

   22.                       the_post_thumbnail();

   23.                 } ?>

   24. 	</div> <!-- end item -->

   25.     <?php endwhile;  ?>

   26.     </div> <!-- end isotope-list -->

   27. <?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):
   
   JavaScript

   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; }); });

   1. jQuery(function ($) {

   3. 	var $container = $('#isotope-list'); //The ID for the list with all the blog posts

   4. 	$container.isotope({ //Isotope options, 'item' matches the class in the PHP

   5. 		itemSelector : '.item', 

   6.   		layoutMode : 'masonry'

   7. 	});

   9. 	//Add the class selected to the item that is clicked, and remove from the others

   10. 	var $optionSets = $('#filters'),

   11. 	$optionLinks = $optionSets.find('a');

   13. 	$optionLinks.click(function(){

   14. 	var $this = $(this);

   15. 	// don't proceed if already selected

   16. 	if ( $this.hasClass('selected') ) {

   17. 	  return false;

   18. 	}

   19. 	var $optionSet = $this.parents('#filters');

   20. 	$optionSets.find('.selected').removeClass('selected');

   21. 	$this.addClass('selected');

   23. 	//When an item is clicked, sort the items.

   24. 	 var selector = $(this).attr('data-filter');

   25. 	$container.isotope({ filter: selector });

   27. 	return false;

   28. 	});

   30. });

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:
   
   CSS

   /* 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 */

   1. /* Start: Recommended Isotope styles */

   3. /**** Isotope Filtering ****/

   5. .isotope-item {

   6.   z-index: 2;

   7. }

   9. .isotope-hidden.isotope-item {

   10.   pointer-events: none;

   11.   z-index: 1;

   12. }

   14. /**** Isotope CSS3 transitions ****/

   16. .isotope,

   17. .isotope .isotope-item {

   18.   -webkit-transition-duration: 0.8s;

   19.      -moz-transition-duration: 0.8s;

   20.       -ms-transition-duration: 0.8s;

   21.        -o-transition-duration: 0.8s;

   22.           transition-duration: 0.8s;

   23. }

   25. .isotope {

   26.   -webkit-transition-property: height, width;

   27.      -moz-transition-property: height, width;

   28.       -ms-transition-property: height, width;

   29.        -o-transition-property: height, width;

   30.           transition-property: height, width;

   31. }

   33. .isotope .isotope-item {

   34.   -webkit-transition-property: -webkit-transform, opacity;

   35.      -moz-transition-property:    -moz-transform, opacity;

   36.       -ms-transition-property:     -ms-transform, opacity;

   37.        -o-transition-property:      -o-transform, opacity;

   38.           transition-property:         transform, opacity;

   39. }

   41. /**** disabling Isotope CSS3 transitions ****/

   43. .isotope.no-transition,

   44. .isotope.no-transition .isotope-item,

   45. .isotope .isotope-item.no-transition {

   46.   -webkit-transition-duration: 0s;

   47.      -moz-transition-duration: 0s;

   48.       -ms-transition-duration: 0s;

   49.        -o-transition-duration: 0s;

   50.           transition-duration: 0s;

   51. }

   53. /* End: Recommended Isotope styles */

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

   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' );

   1. function add_isotope() {

   2.     wp_register_script( 'isotope', get_template_directory_uri().'/js/libs/jquery.isotope.min.js', array('jquery'),  true );

   3.     wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );

   4.     wp_register_style( 'isotope-css', get_stylesheet_directory_uri() . '/css/isotope.css' );

   6.     wp_enqueue_script('isotope-init');

   7.     wp_enqueue_style('isotope-css');

   8. }

   10. add_action( 'wp_enqueue_scripts', 'add_isotope' );

That’s it!