WordPress Isotope - Filtering by Categories

Isotope is an ’exquisite jQuery plugin for magical layouts’ which basically means it works wonders on responsive layouts. I’ve created a WordPress plugin for Isotope and just updated this to add Filtering by Categories.

How do you add Filtering for Isotope to WordPress?

WordPress uses jQuery in no conflict mode. so you just need to modify the Isotope example code

You’ll need to create your own custom WordPress template with its own WPQuery loop

Above your Loop you’ll need to add your filter buttons like this

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

And at the bottom of the page you need to add this script.

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

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

Here’s the original code for filtering (before I made it safe for WordPress)

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

Linkage

Damien’s Bitbucket Project Repo

Notes on Isotope Licensing

Commercial use of Isotope requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money — portfolio sites, premium templates, etc. Commercial licenses may be purchased at metafizzy.co.

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.