Using Masonry in Genesis for a Pinterest like layout

Did you know that jQuery Masonry script comes in-built with WordPress? We just need to enqueue to use it. In this article I explain the steps to implement jQuery Masonry script to display Posts in Posts page and archives similar to Pinterest.

Live Demo

Note: I have tested this in Genesis Sample child theme and the process should work in any other Genesis child theme with minor adjustments.

Screenshot:

Masonry-Demo-Pinterest-layout-in-Genesis-no-infinite-scroll

Set excerpts to be shown

At Genesis > Theme Settings > Content Archives select Display post excerpts.

Screen Shot 2013-09-15 at 7.36.10 PM

Prepare for jQuery Masonry initialization

Place the following in a file named say, masonry-init.js under js (create, if it does not exist) directory in active theme:

To view the full content, sign up for the membership.

Already a member? Log in here.