Select Page

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.

UPDATED 25 Sep 2012. Here is a link to Download the plugin.

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
[php]
<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>
[/php]

And at the bottom of the page you need to add this script.
[php]
<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>
[/php]

Here’s the original code for filtering (before I made it safe for WordPress)
[php]
// filter items when filter link is clicked
$(‘#filters a’).click(function(){
var selector = $(this).attr(‘data-filter’);
$container.isotope({ filter: selector });
return false;
});
[/php]

 

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.

Read previous post:
App Design: Make sure yours saves settings (MobileRSS)

Have you ever used an app, thought you saved the settings and then you check and nothing changes ... It...

Close