A Masonry Style Custom Front Page Layout

A Masonry Style Custom Front Page Layout

Ever wanted to do a site that looked kind of like Pinterest? You know, where you didn’t have to worry about your content blocks being all exactly the same size so they’d line up just right? It’s a neat brick-like, or masonry effect, and, if you are willing to dig into your code a bit, not too difficult to do! I’ve played a bit with a Pinterest/masonry style layout for a regular blog template page (here’s one example). It was pretty easy to modify the loop for it, and Sridhar Katakam has written a great tutorial on how to do this for yourself.

Signal Mountain Student MinistryWhat if, though, you don’t want to have this as a blog page? When I wanted to update the SM2 Student Ministry website with a Pinterest style home page, I didn’t want the grid to pull just posts–I needed to have a mix of posts, pages, anything I wanted–so I wanted to build it out of widgets. The widgets are an easy building block and the great thing is that with masonry, it doesn’t matter what height they are.

This tutorial assumes you’re using the Genesis Framework from StudioPress (that would be an affiliate link). I built it with the new sample theme (HTML5), although it should be possible to tweak for XHTML. It is responsive. You can also go straight to the gist here. Here we go!

set up your functions.php

You need to add a few things to your functions.php file: 1) enqueue your script; 2) set up a featured image size; and 3) register your home page widget area.

<?php
//* Add the masonry script to your functions.php file
add_action ( 'wp_enqueue_scripts', 'rgc_scripts' );
function rgc_scripts() {
if ( is_front_page() ) {
wp_enqueue_script( 'rgc-masonry', get_stylesheet_directory_uri() . '/lib/js/rgc-mason.js', array( 'jquery-masonry' ) ); // Pinterest layout
}
}
//add image size for home page
add_image_size( 'big-photo', 330 ); // sets width but leaves height variable. no hard crop.
// Register Widget Areas
genesis_register_sidebar( array(
'id' => 'home-main',
'name' => __( 'Home Block', 'rgc' ),
'description' => __( 'This is the home page. One big block with masonry action.', 'rgc' ),
) );
view raw functions.php hosted with ❤ by GitHub

Note that the new image size only gives a width–this way the full image is used, no cropping. It’s going to give an eclectic mix of image sizes on the page but I think with this layout, that’s an asset.

some simple jQuery

// thanks to Sridhar Katakam: http://sridharkatakam.com/using-masonry-genesis-pinterest-like-layout/
jQuery(function($) {
var $container = $('.home-main');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: 'section',
isAnimated: true,
gutterWidth: 0
});
});
});
view raw rgc-mason.js hosted with ❤ by GitHub

This is the same jQuery as Sridhar’s, but I’ve changed the container, selector, and gutter width to suit my needs (I’ve built my gutter width into my CSS as a percentage due to the responsive layout). It uses WordPress’ built in masonry script so it’s pretty short.

the front page template

<?php
//* Front page for smtwo
add_action( 'genesis_meta', 'rgc_fp_meta' );
function rgc_fp_meta() {
if (is_active_sidebar( 'home-main') ) {
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'rgc_home_loop' );
}
}
function rgc_home_loop() {
if ( is_active_sidebar( 'home-main' ) ) {
genesis_widget_area( 'home-main', array(
'before' => '<div class="home-main js-masonry">',
) );
echo '</div>';
}
}
genesis();
view raw front-page.php hosted with ❤ by GitHub

The front page is just one big widget block in a full width layout. You could optionally cut out the full width layout (line 7), tweak the CSS, and have the masonry setup next to your sidebar.

style the front page

The styling itself is pretty straightforward, with just a couple minor adjustments for the media queries.

/*
Home Page
------------------------------------------------------------------------------------- */
.home .site-inner {
padding: 40px 0;
padding: 4rem 0;
}
.home-main.widget-area {
width: 100%;
}
.home-main input {
border: none;
}
.home-main section { /* probably could have done .home-main .widget*/
background: #fff;
float: left;
margin: 10px 1%;
width: 31%;
padding: 15px;
}
.home-main .alignnone .entry-image.attachment-post {
margin: 0 auto;
display: block;
}
.home-main .textwidget {
text-align: justify;
}
.home-main .featured-content .entry {
margin: 0;
padding: 0;
}
.home-main .widget-title {
border-bottom: 1px solid #ddd;
margin: 0px -15px 16px;
padding: 10px 0 16px;
text-align: center;
}
.home-main .entry-title {
font-size: 1.6rem;
margin-bottom: 10px;
text-align: center;
text-transform: uppercase;
}
.home-main .entry-title a {
font-weight: 700;
}
.home-main .alignleft {
padding-right: 10px;
}
.home-main p {
margin-bottom: 0 !important;
}
@media only screen and (max-width: 1023px) {
.home-main section {
width: 48%;
}
}
@media only screen and (max-width: 767px) {
.home-main section {
width: 100%;
}
}
view raw style.css hosted with ❤ by GitHub

add (lots of) widgets

For the widgets themselves, I used a mix of the Genesis Featured Page and Genesis Featured Post, along with a few text widgets here and there. I styled things so that if you use the thumbnail sized image aligned left, it will look fine, but I recommend using the new big photo with no alignment. Titling the widgets, using the post/page titles, etc. is all optional. On smtwo, I used a mix–some posts with a content limit, some showing the full content, all with an image as I could.

For the featured posts, since each widget is going to only display one post, you’ll want to make sure to use the checkbox to not show previously displayed posts so that you don’t get duplicates. You can select specific categories to have more control over what shows where, and widgets can be moved if something needs to be higher up on the page.

If you use this, I’d love to see what you do with it–please share a link! Enjoy the journey.

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

    • September 30, 2013

      If you use Sridhar Katakam’s tutorial as your starting place to create a template (since his is an actual blog page; mine isn’t), I think you could. Set it up as a template and then use query_args or another method on the page you want to pull the specific category. It’s what I did here with a slightly different jQuery setup.

  1. March 12, 2014

    Hi Robin! Thank you so much for your tutorial.

    I’m trying to make this happen in a home-bottom widget on my client’s site, but the thumbnails aren’t stacking. I’ve gone through my code and all I’ve done is take out the forced full-width content and customized the widget name/class to be my home-bottom widget.

    Can you think of any reason why it wouldn’t do the masonry? It’s creating three columns. but with even rows…

    Thanks!

    • March 15, 2014

      Gwen, without seeing it, it’s difficult to know. Have you checked and verified that your js is, in fact, loaded? Sounds silly but that could be the culprit.

  2. May 1, 2015

    Looks nice. I got one column of posts, they didn’t stack.. The .js was loaded.

    • May 1, 2015

      Do you have a link you can share? Sometimes it helps to have another pair of eyes on it.

    • June 28, 2015

      Sorry for the delay on that, Scot–just checked the link you shared and it looks as though you’ve gotten this sorted?

  3. November 26, 2015

    Followed the tutorial, is there anything that would cause it to double up on the movements when it adjusts? I imagine it is within my theme but I’m not sure where to look to solve the problem.

    • November 30, 2015

      You could try looking into what other .js files are being enqueued by your theme, and remove them altogether, or the parts that may be affecting your layout.

  4. September 7, 2017

    Hi Robin,
    Nice approach to using Masonry effect. When you point to “rgc-mason.js” in functions.php with “‘/lib/js/rgc-mason.js” i created the “lib/js” folder inside my Genesis Sample as i din’t have this (only have “Genesis Sample/js”), is that ok or your “lib” folder refers to another path of WordPress??
    Thank you!!

    • September 7, 2017

      Yes, you can use your plain js folder path–definitely no need to make new folders to match up with my example, as long as the end result works and you can find what you need. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple