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.
What 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.
You May Also Like:
[gist id=”6730357″ file=”functions.php”]
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
[gist id=”6730357″ file=”rgc-mason.js”]
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
[gist id=”6730357″ file=”front-page.php”]
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.
[gist id=”6730357″ file=”style.css”]
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.
Nice! Looking forward to trying this out. Which site will I experiment on next… 😉
Thanks, Carrie! I’m sure you’ll find an unsuspecting soul who really needs this…I did! 😉
Is there any way to create this type of layout for landing page using specific category?
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.
Fantastic! I’m already messin with this now. This is what I’ve been lookin for.
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!
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.
Looks nice. I got one column of posts, they didn’t stack.. The .js was loaded.
Do you have a link you can share? Sometimes it helps to have another pair of eyes on it.
Wondering if you did any additional styling for media queries versus what you’ve provided? I’ve tried a quick demo with the Sample theme and your code but the responsive output seems to cut off the widget post titles and/or excerpt.
See: prebuypei.com
See: http://www.responsinator.com/?url=prebuypei.wpengine.com
Thanks
Sorry for the delay on that, Scot–just checked the link you shared and it looks as though you’ve gotten this sorted?
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.
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.
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!!
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. 🙂
Thank you so much for this. Very helpful!