Question

I’m trying to implement masonry to my new blog theme I’m making but the masonry is only being applied to the first div class ‘post’. You can see it here http://mhutchinson.me.uk/.

My code for the masonry is

        $('#wrapper').masonry({ itemSelector: '.post',  columnWidth: 300});

As you can see if you inspect the elements the first div class is only getting the additional positioning of masonry . Does anyone know how to solve this?

Thanks!

Answer 1

Take a look at your source – you have included the masonry Javascript and the

$('#wrapper').masonry({ itemSelector: '.post',  columnWidth: 300});

inside the loop so it is being included and called multiple times.

Place it in your footer.php instead just before the body tag. Better still, take a look at implementing imagesLoaded() on $(window).load() instead. The reason I’m saying this is that you might get problems with your masonry properly positioning the content if you have a lot of posts full of images. Some links here might help;

http://masonry.desandro.com/demos/images.html

jQuery masonry with WordPress and imagesLoaded