WordPress and isotope filtering

by

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