Istope Visual Layouts
First Published: Saturday, Apr 7, 2012 Last updated: Mar 15, 2022 1 minute read

So I have been using Isotope for sometime on my website - I was recently asked why I had stopped using Isotope at which point I discovered that it had stopped working when I changed my theme.

Using jQuery instead of $ for javascript

The basic script for isotope is …

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script type=&quot;text/javascript&quot;>
$(function(){

var $container = $('#container');

$container.isotope({
itemSelector: '.box'
});

});
</script>

However, WordPress reserves the use of $ so you need to change your script to

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script type=&quot;text/javascript&quot;>
jQuery(document).ready(function() {

var mycontainer = jQuery('#isocontent');

mycontainer.isotope({
itemSelector: '.box'
});
});
</script>
Tags: Isotope lite, jQuery, masonry

Read more from my blog for an introduction and quick tips on developing in Hugo or UCTD.

Meet the author

Photo for Damien Saunders
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.