Masonry in Genesis – Basic Example

This tutorial shows you how to use Dave Desandro’s masonry with the Genesis Sample themes home page.

This solution is the most basic compared to others i’ve seen and only uses a few lines of jQuery.

The width is handled by CSS and the height varies which is the main feature of masonry.

Here’s a archive without masonry.

And here’s the same archive which includes the masonry effect:

If you don’t include featured images, masonry loads consistently.

Here’s all the code which is very minimal and easy to install.

1. 1st step is to create a home.php file or any other archive.

Add the following PHP code to the file and upload to your child themes root directory.

Reader Interactions