Top

firefox_isotope.png

Using Isotope & masonry with WordPress

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.

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

Using jQuery instead of $ for javascript

The basic script for isotope is …

[php]
<script type="text/javascript">
$(function(){

var $container = $(‘#container’);

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

});
</script>
[/php]

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

[php]
<script type="text/javascript">
jQuery(document).ready(function() {

var mycontainer = jQuery(‘#isocontent’);

mycontainer.isotope({
itemSelector: ‘.box’
});
});
</script>
[/php]

, ,

4 Responses to Using Isotope & masonry with WordPress

  1. Tom Auger April 26, 2012 at 2:56 pm #

    If you still like working with the ‘$’ alias, you don’t have to give it up because of WordPress. WordPress just operates in jQuery no-conflict mode, so you just need to remember to re-alias ‘$’ once safely within the scope of your own function block, like so:

    (function($){
    // $ works here!!! eg:
    $(document).ready(function(){

    }
    )(jQuery);

    Just note the outer brackets. They look strange but they’re necessary.

    You can get more info about this from the WordPress Codex here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    • Damien Saunders April 26, 2012 at 9:29 pm #

      Hi Tom

      Thanks for the reminder. It’s great that WordPress works in no-conflict mode which is what I’ve tried to do.

      People searching on how to make Isotope or Masonry work with WordPress usually stumble on to my short post after copying the sample code into a PHP file only to find it only partially works.

      Myself – I’m a WordPress / Marketing consultant so at best I’ve cobbled together bits of code. Could you suggest a ‘re-write’ of how the short piece of jQuery could be written to re-alias the $ ?

      Cheers

      Damien

  2. Uriel Castillo August 20, 2012 at 4:19 pm #

    jQuery(document).ready(function(h) {

    var mycontainer = h(‘#isocontent’);

    mycontainer.isotope({
    itemSelector: ‘.box’
    });
    });

    this is the way to use an alias in jQuery…
    see the first time you call it, you are using ‘jQuery(document)…’ so it doesnt conflict, and then, inside the function being executed, you call it with the alias you want to use (yes, you can use ‘$’ as alias so you can copy&paste code from somewhere else and it will still work).
    In this case, i’ve used ‘h’ as my alias, so instead of $(‘#someId’) you need to use h(‘#someId’)

    hope i was clear 😉

    • Damien Saunders August 25, 2012 at 9:33 am #

      Your method does also work — I’m just following the WordPress guide for jQuery. Cheers for the comment

Leave a Reply

Read previous post:
Drive e-mail marketing opt-in with WordPress Mailchimp and a nice overlay pop-up

When you start seriously blogging, the first thing you should do is to integrate WordPress with your e-mail marketing activities. This forms...

Close