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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems