Foundation 5 with JQuery Masonry in WordPress

Share to:

foundation5masonrywordpress-smFoundation 5 is by far my favorite framework to build sites. I’ve built my business site with it, and I’ve built several client sites with it since I learned about it a while back.

This is a similar framework to Bootstrap, and some would say that Foundation and Bootstrap are really two different sides of the same coin.

Be that as it may, my preference is Foundation – I appreciate the logic behind it, and its power.

This isn’t about Foundation per se, I’ll post more about the specifics of Foundation later. This is about finding ways to make Foundation work with other tools to build awesome websites.

One of the things I needed to do recently was make Foundation and the Masonry grid layout JQuery library to cooperate with each other, all inside a WordPress site. I’ve been doing a lot of in-depth custom theming in WordPress lately, and I’m one for making note of things for future reference so here is what created:

It works. You’ll need to make sure you’re initializing it with JQuery, or JavaScript, and there are a ton of customization options available.

No doubt you may want to dig deeper in to all the things you can do with masonry and customize it to fit your needs so make sure you check out the creator’s site – masonry.desandro.com.