Question

This is my first post and I am fairly new to WordPress so please go easy on me for asking stupid questions.

Currently I am attempting to install Masonry http://masonry.desandro.com/ into a child theme based off of the standard Twenty Eleven theme that comes with WordPress.

I have followed directions from about 20 different tutorials and have no clue why I can not get it to work. I am specifically trying to get it to work for dev project http://www.ct-social.com/ctsdev/aff/our-trips/

Any advice that could lead me in the correct direction. Maybe someone can actually tell me what I am doing wrong.

Update 11/30/12
I have changed the scrip to the following:

<script type="text/javascript">
jQuery(document).ready(function($){
  var $container = $('.container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector : '.featured',
      singleMode:true
    });
  });
});
</script>

and the html is structured as such:

<div class="container">
  <div class="featured">
      Stuff inside
  </div>
</div>

Still no luck. Any Ideas?

Answer 1

You are using this

var $container = $('#container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector : '.item',
      columnWidth : 240
    });
  });

which fails because your “tiles” all use container as an id and $('#container') expects to only find one element. You should not have multiple elements with the same id on the same page.

If you look at the Masonry tutorial example markup

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

there is one div with the id container and each item has the same class.

You need to put all of your items inside a div with the id “container” and add the “featured” class to all the elements you’d like Masonry to tile.