Unable to make Isotope Filter/Sort Posts in WP

Question

I am working on a site and I am trying to use Isotope (http://isotope.metafizzy.co/docs/filtering.html) to filter/sort posts on my taxonomy page. However for some reason I am unable to make it work regardless of what I do. I need some urgent help with this. Here is what my coding looks like - First I have this in my themes functions.php to generate the list of categories

function isotope_categories() {

        $terms = get_terms('videoscategory');

        $html = '<ul class="filters option-set" data-option-key="filter">';
        $html .= '<li><a href="#" data-option-value="*" class="selected">All items</a></li>';

        foreach ($terms as $term) {


            $html .= "<li><a href='#filter' data-filter='.boxes {$term->name}'>{$term->name}</a></li>";   
        }

        $html .= '</ul>';

        echo $html;
    }

Then on my taxonomy page I call it like so -

<nav id="options" class="option-set filter" data-option-key="filter">                       
    <?php isotope_categories() ?>
</nav>  

The category links are generated, but they do not function like they are suppose to. This is my loop for the page -

<div id="content">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


 <?php $terms = get_the_terms( $post->ID, 'videoscategory' ); ?>


<div class="boxes <?php foreach( $terms as $term ) echo ' ' . $term->name; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;">

// MY POST CONTENT AND DIVS

</div>
<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>
<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>
</div>

And the js under it -

<script type="text/javascript">
   jQuery(document).ready(function(){
     var mycontainer = jQuery('#content');
     mycontainer.isotope({
     itemSelector: '.boxes'
     });

   // filter items when filter link is clicked
jQuery('#options a').click(function(){
  var selector = jQuery(this).attr('data-filter');
  mycontainer.isotope({ filter: selector });
  return false;  
  });

});
 </script>

I can not get it to work at all though, I've tried a few ways to get it to work but I guess I'm missing something or just doing it all wrong. What do I have to fix or change so that the filtering works??

Any help is very much appreciated. Thanks.

EDIT:

By using the chrome debug console I was able to see this error - Uncaught TypeError: Object [object Object] has no method 'isotope' - Im not sure what it means though.

Answer 1

Ok, I was able to get it to work and filter, except there are a few more things I have to work out to get it working the way I want. As far as the functionality of it though, I did manage to get it to work. In case anyone else is interested - here's what I did

1. First I went through my themes functions.php and my header to make sure the latest jquery was included and the correct scripts included, I also made sure it wasn't included multiple times and they were in the right order (jquery script first then isotope script.)

   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/lib/jquery.isotope.min.js'></script>

2. Next I made sure the CSS for isotope was in my style sheet.

   .isotope-item {
     z-index: 2;
   }
   
   .isotope-hidden.isotope-item {
     pointer-events: none;
     z-index: 1;
   }
   
   .isotope,
   .isotope .isotope-item {
     /* change duration value to whatever you like */
     -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
             transition-duration: 0.8s;
   }
   
   .isotope {
     -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
             transition-property: height, width;
   }
   
   .isotope .isotope-item {
     -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property:    -moz-transform, opacity;
             transition-property:         transform, opacity;
   }
   

3. After that I edited the code in my functions for the filter list ( you can see the original in my question )

       function isotope_categories() {
   
       $terms = get_terms('videoscategory');
   
       $html = '<ul id="options">';
       $html .= '<li><a href="#" data-option-value="*" data-filter="*" class="selected">All items</a></li>';
   
       foreach ($terms as $term) {
   
   
           $html .= "<li><a href='#' data-filter='.{$term->slug}' class='current'>{$term->name}</a></li>";   
       }
   
       $html .= '</ul>';
   
       echo $html;
   }
   

4. Next I altered my coding for my loop -

      <div id="content" style="width: 94%;">
      <div id="isocontent">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   
      <?php $terms = get_the_terms( $post->ID, 'videoscategory' ); ?>
   
      <div class="box<?php foreach( $terms as $term ) echo ' ' . $term->slug; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;">
   
      //MY DIVS AND CONTENT
   
      </div>
   
      <?php endwhile; else: ?>
   
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
   
      <?php endif; ?>
      <div style="position:absolute;">
      <?php if (function_exists("pagination")) {
   pagination($additional_loop->max_num_pages);
      } ?>
      </div></div></div>
   

5. Then I edited the javascript code under it -

      <script type="text/javascript">
      $(document).ready(function(){
      var mycontainer = $('#isocontent');
    mycontainer.isotope({
    itemSelector: '.box'
    });
   
      // filter items when filter link is clicked
      $('#options a').click(function(){
      var selector = jQuery(this).attr('data-filter');
      mycontainer.isotope({ filter: selector });
      return false;  
      });
   
      });
      </script>
   

After doing all this, I was finally able to get isotope to work. I still have some things to fix so that I can get it to work exactly how I want it but as far as getting it to function properly, this is what worked for me.