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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Genesis Masonry Template

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

Masonry

Reader Interactions

Comments

  1. Tim Baggaley says

    November 3, 2021 at 8:29 pm

    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

    Log in to Reply
    • Brad Dalton says

      November 4, 2021 at 8:06 am

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

      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' );

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

      add_filter( 'genesis_pre_get_option_content_archive','set_content' );
      function set_content() {
      	return 'excerpts';
      }
      Log in to Reply

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.