title: Combination filters Isotope Wordpress
body: <p>I use Isotope on my Wordpress Website to filter my custom post. I have a CPT Film (<code>production</code>) and multiple taxonomies : <code>type</code> (Animation / Horror...), <code>years</code> (2012 / 2013) and so on.</p>
  
  <p>For the moment I can sort by years and every things work fine with this code in my template page:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;ul id="filters"&gt;
          &lt;li&gt;Selectionner&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-filter="*" class="selected"&gt;Toutes les années&lt;/a&gt;&lt;/li&gt;
          &lt;?php 
              $terms = get_terms("annee"); // get all categories, but you can use any taxonomy
              $count = count($terms); //How many are they?
              if ( $count &gt; 0 ){  //If there are more than 0 terms
                  foreach ( $terms as $term ) {  //for each term:
                      echo "&lt;li&gt;&lt;a href='#' data-filter='.".$term-&gt;slug."'&gt;" . $term-&gt;name . "&lt;/a&gt;&lt;/li&gt;\n";
                      //create a list item with the current term slug for sorting, and name for label
                  }
              } 
          ?&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>After the list, the loop that show all post and sort by years:</p>
  
  <pre><code>&lt;?php 
  $the_query = new WP_Query( array(
       'posts_per_page' =&gt; 16,
       'post_type' =&gt; array( 'production' )
  )); //Check the WP_Query docs to see how you can limit which posts to display ?&gt;
  &lt;?php if ( $the_query-&gt;have_posts() ) : ?&gt;
      &lt;div id="isotope-list"&gt;
          &lt;?php while ( $the_query-&gt;have_posts() ) : $the_query-&gt;the_post(); 
              $termsArray = get_the_terms( $post-&gt;ID, "annee" );  //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-&gt;slug.' '; //create a string that has all the slugs 
                  }
              ?&gt; 
              &lt;div class="&lt;?php echo $termsString; ?&gt; item three columns gallery grid"&gt; &lt;?php // 'item' is used as an identifier (see Setp 5, line 6) ?&gt;
  
                     &lt;figure class="effect-ming"&gt;
                           &lt;?php the_post_thumbnail('miniature-film');  ?&gt;
                          &lt;figcaption&gt;
                              &lt;h2&gt;&lt;?php the_title('') ?&gt;&lt;/h2&gt;
                              &lt;p class="serif"&gt;&lt;?php the_field('realisation'); ?&gt;&lt;p&gt;
                          &lt;/figcaption&gt;       
  
                      &lt;/figure&gt;
              &lt;/div&gt; &lt;!-- end item --&gt;
          &lt;?php endwhile;  ?&gt;
  &lt;?php else : ?&gt;
  &lt;p&gt;Aucun résultat ne correspond à votre recherche &lt;/p&gt;
  &lt;a href="&lt;?php bloginfo('url'); ?&gt;/catalogue"&gt;Retour au catalogue&lt;/a&gt;
  &lt;/div&gt; &lt;!-- end isotope-list --&gt;
  &lt;?php endif; ?&gt;                 
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following javascript:</p>
  
  <pre><code>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;
      });
  
  });
  
  (function( $ ) {
      $( function() {
  
          var $container = $('.isotope').isotope({
              itemSelector: '.element-item',
              layoutMode: 'fitRows'
          });
  
          $('#filters').on( 'click', 'button', function() {
              var filterValue = $( this ).attr('data-filter');
              $container.isotope({ filter: filterValue });
          });
  
      });
  })(jQuery);
  </code></pre>
  
  <p>But <strong>I want to make multiple filters like years</strong> and use them at the same time, but I don't know how to do that. </p>
  
  <p>I have tried to duplicate the code I used  for <code>years</code> and change the slug by <code>"type"</code> but it didn't worked.</p>
  
  <p>Here is an example that show you what I want to do: <a href="http://codepen.io/desandro/pen/GFbAs" rel="nofollow">http://codepen.io/desandro/pen/GFbAs</a></p>
  
  <p>It iss made with isotope, not with Wordpress functions, so I don't know how to change it.</p>