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 :
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
You can change the action hooks in the
front-page.php
file to change the position of each element like this :To add the excerpts, use code in the front page template like this :