Masonry layout with Genesis framework

I am pretty sure that you have seen Masonry layout on the web. Might be you didn’t pay attention what its name is. Sitepoint published a post about masonry layout, you can read here so it can remind you how it looks. Then you can see I am using the same layout for the homepage of OsloNAP too, up to now 🙂

A good thing is that WordPress includes masonry library in its core, so making a masonry layout is easy enough. As I focus on Genesis framework, I will show how I did for a customer – Charlotte Wiig Photography.

Basically, there are few steps for completing the task.

  1. Preparing the page.
  2. Preparing CSS format file.
  3. Creating init masonry Javascript file.
  4. Loading CSS and JS files.

Preparing the page

The customer only wants to show featured image in each post and its title. So, I removed all other parts such as post info, post meta and post excerpt. It depends on how you want the page looks like, that you can choose which parts will be shown.

Also, I want to use separate CSS file for this particular layout, so I add a new body class, named masonry.

Preparing CSS format file

If you take a look again at the Charlotte Wiig Photography homepage, the customer wants to have some effects on each post. That’s why I have added few more CSS settings in the file. Test yourself, I can write another how-to on that later. This CSS applies to three columns on a page. I saved that as masonry.css file.

Preparing JS file

You can see that I am calling twice to masonry function. There is a big chance that customer will upload images with different sizes. And when masonry deals with different sizes, it will have trouble with overlapping, unless you call the function again after all items have their proper size. I put this file in js folder, with the name as masonry-init.js.

Loading CSS and JS files

Depends on your purpose, then where you can call to CSS and JS files. If you only want to use it on the homepage, you can place loading functions in front-page.php file. If you want to use in multiple templates, it’s better to load in functions.php file.

And that is. Now you can have a masonry layout for your WordPress site. Remember I use some hooks in Genesis framework. If you are just using regular WordPress and your custom theme, you can customise how the page looks too. Enjoy!

Leave a Comment

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