• 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

Using Masonry in Genesis With Different Sized Featured Images

This tutorial provides a file which you can use on any archive page in Genesis.

The template file includes all the code which removes the content and only displays the featured image.

The featured image can be any height however in this case, must be the same width.

Here’s one example of what this template generates when used as the front-page.php template on a default Genesis child theme.

masonry-featured-images

All you need to do is add featured images to each post.

Code Installation

There’s 3 simple steps:

  1. Using a code editor, create new file named front-page.php and add the PHP code to the start of the file.
  2. Add the CSS to the end of your child themes style.css file.
  3. Create a new file named masonry-options.js and add the jQuery to the file in your child themes js folder. Create a js folder if needed.

Here’s all the code:

Register for full access

Related Tutorials

  • Installing Masonry Cascading Grid Layout in Genesis

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.