WordPress and isotope filtering

by

Im trying to use Isotope(http://isotope.metafizzy.co/) to filter my WordPress posts,
http://i44.tinypic.com/fco55k.jpg this is how my site looks like, i would like to filter posts depending on a post category so i need to add a class name to each post and then filter it using isotope

  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".design">design</a></li>
  <li><a href="#" data-filter=".typo">typography</a></li>

those are the names of my categories, and then i would like to add class name of a post depending on a category he is in.

<div id="main">
          <?php
          $args = array('orderby' => 'rand' );
          $random = new WP_Query($args); ?>
          <?php if(have_posts()) : ?><?php while($random->have_posts()) : $random->the_post(); ?>
         <a href="https://wordpress.stackexchange.com/questions/44963/<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); 
                echo $category[0]->cat_name; ?>">
            <?php 
                the_post_thumbnail();?>

            <h1><?php the_title(); ?></h1>
</div></a>

and javascript im using

    <script type="text/javascript">
jQuery(window).load(function(){
jQuery('#main').isotope({
  masonry: {
    columnWidth: 20
  },

});
$('#filters a').click(function(event){
  var selector = $(this).attr('data-filter');
  $('#main').isotope({ filter: selector });
  return false;
});
});

</script>

5 Answers
5

Not sure you got Isotope and filters working yet ??

There are 2 things I think you missed

  1. the Filters need to be wrapped in a class (so that the jquery can be actioned by the click on the a links) like so:

    <ul id="options">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".web">web</a></li>
<li><a href="#" data-filter=".mobile">mobile</a></li>
</ul>

NB the data-filter are CaSe sensitive (so they won’t work if they don’t match your WordPress categories or whatever you use.

  1. The isotope jquery needs to be made safe for WordPress – to run in no-conflict mode

Here’s the original code from Isotope documentation

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

Here’s the code changed for WordPress

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

NB put this in after the rest of your isotope script
and note that #options is the class from your filter list in the HTML 🙂

You can see it working at damien.co/isotope

Hope that helped you?

Leave a Comment