WP SITES

Log in

Genesis Masonry Template

—

by

Brad Dalton

A genesis front page template which displays your posts using a Masonry layout.

Video Demo

Shows the use of jQuery Masonry to display posts with different sized featured images on the front page archive page in the Genesis Sample child theme by StudioPress.

If your featured images are the same height, you might want to consider using CSS grid.

Simple Installation

There’s 2 simple steps :

Step 1 : From the download folder, upload the folder named masonry to your child theme folder.

Step 2 : From the download folder, upload the file named front-page.php to your child theme folder.

Clear caching and you’re good to go!

Tested using the Genesis Sample child theme by StudioPress. May require CSS modifications for use in other Genesis child themes.

Register or login to access the files for members only :

Register for full access

Comments

2 responses to “Genesis Masonry Template”

  1. Tim Baggaley Avatar
    Tim Baggaley

    Hello Brad,
    I do like the look of this masonry archive. I’m trying it out and tweaking it to suit my own project, you can see my test at: https://timbaggaley.co.uk/demo/

    There are two things I can’t change that I’d like to:

    > Put the entry header above the featured image, and
    > Pull in the manual excerpt rather than the auto-generated one for the content

    Please could you advise?
    Thanks, Tim

    1. Brad Dalton Avatar
      Brad Dalton

      You can change the action hooks in the front-page.php file to change the position of each element like this :

      [code]
      remove_action( ‘genesis_entry_header’, ‘genesis_post_info’, 12 );
      remove_action( ‘genesis_entry_footer’, ‘genesis_post_meta’ );

      add_action( ‘genesis_entry_header’, ‘genesis_post_info’, 1 );
      add_action( ‘genesis_entry_footer’, ‘genesis_post_meta’ );
      [/code]

      To add the excerpts, use code in the front page template like this :

      [code]
      add_filter( ‘genesis_pre_get_option_content_archive’,’set_content’ );
      function set_content() {
      return ‘excerpts’;
      }
      [/code]

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.