WP SITES

3082 Coded Tutorials & 284 Plugins

Masonry in Genesis – Basic Example – Free

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.

columns

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

masonry

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.

Related Posts

One response to “Masonry in Genesis – Basic Example – Free”

  1. Using Masonry in Genesis With Different Sized Featured Images On Archive Page

    […] Installing Masonry Cascading Grid Layout in Genesis […]

Leave a Reply

New Plugins