• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

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.

Register for full access

Related Posts

  • Genesis Masonry Template
  • Using Masonry in Genesis With Different Sized Featured Images On Archive Page
  • Display Posts In Columns On Genesis Archive Pages

Masonry

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.