Laying Bricks with Masonry.js

Everything looks like a brick when all you have is a trowel and concrete.

-no one, ever

Presenting the final installment of using a masonry layout with the Divi theme from Elegant Themes. Note that this is an affiliate linkout. If you make a purchase through it I will get paid, but it costs you nothing extra. This time we will be building the layout you see above. We will be applying this layout to the categories page using the Masonry.js library, but you could extend this lesson to any page you would like. Using straight CSS to style a masonry layout is great when you have list items. The problem with blog posts is that in straight CSS they get wrapped to the top of the next column (I can think or a workaround for this, can you?). Masonry.js will let us overcome this and using it in your site is as easy as enqueuing a couple of scripts and adding some CSS. Let’s get started.

First up, make sure you are working with a child theme because we are going to be altering the ‘functions.php’ file. In this tutorial I’ll be hosting the library on my site. You could also use the CDN if you need to save space, but if the site hosting the library is down you will lose functionality. The Masonry.js library can be found here. In the right hand corner you will see a link to download the minified library. Save this file to a folder named ‘js’ within you child theme folder. 

Now, open up your ‘function.php’ file in your child folder. We will enqueue two scripts – the masonry.js we just downloaded and a custom script that we will create later. To do this insert the following code:

Now let’s step through. First we create a function with a unique name. I prefixed mine with ‘shd_’ for Spring Hill Design, my web design service. You should always prefix your functions with a unique identifier if they are going to be distributed. The first line in the function uses the ‘wp_enqueue_script’ action. In some ways this is wasteful, since we only need the script in the category page, so it would be better to register the script and then use conditional logic to load it when necessary. However, for the sake of brevity I’ll just load them on every page.

 Following the action I pass in a number of parameters. The first is a unique shortname so that I can address the script later. Next is the location of the script. Since I’m in a child theme I get the path to the directory using, ‘get_stylesheet_directory_uri()’. If we weren’t using a child theme we would use, ‘get_template_directory()’. You never want to hardcode your directory pathway. I then concatenate that to the remainder of the location in the ‘/js’ folder.

The other three parameters are any dependencies, the version, and whether you want the script added to the footer. In addition to the masonry library we also are enqueuing a custom script, which we will name ‘archiveMasonry.js’ and save in the ‘/js’ folder of the child theme. Finally, after finishing the function we actually want to run it using ‘add_action’.

Now let’s open up our custom script. The Masonry.js library uses jQuery to target specific DOM elements. I’ve chosen to stick with the default selectors for simplicity. THe overall structure is a container with the class of ‘grid’, and then a series of items inside with a class of ‘grid-item’. So, we need to add those to our category posts as they come in. We will accomplish this using jQuery.

Open up your empty ‘archiveMasonry.js’ file in your favorite editor and enter the following code:

Let’s walk through. First, we let jQuery know that we don’t want to fire our commands until the page is all loaded using ‘.ready()’. Next, we make three modifications to the DOM. Using ‘.addClass()’, we add the ‘grid’ class to the container that holds all of the posts. Using ‘.prepend()’ we add an empty div with the class ‘grid-sizer’ immediately before all of the posts. This will be used to make the page responsive and I will explain in it later in the tutorial. Finally, we use ‘.wrap()’ to put every post into a div with the class ‘grid-item’.

Okay, now that we have the DOM prepared, we fire or custom masonry function, ‘masonify()’. This is the jQuery that initializes the masonry.js library. We are passing several options into the library. First, we tell it that our main container has a class of ‘grid’. Next up, we say that we want the columnWidth set by the size of the div with a class of ‘grid-sizer’. Next we set the itemSelector to the class of ‘grid-item’ so it knows what a complete item is to prevent wrap around. Finally, we set percentPosition to ‘true’ to allow for relative sizes during page resizing.

We are in the home stretch!! Lastly, we need to set a size for the columns and add a bit of additional sizing. We will do this in our child theme styling file. The actual CSS to get the page set to three columns is simple. We just select both the ‘grid-sizer’ and ‘grid-item’ classes and add a width to them. In this case I added 33.333% to give three columns. But, you could give a width of 50% for two or 20% for five. It is up to you. I would also add media queries to break this down into single column on smaller devices.

Lastly, just add regular CSS to make your page look good. I added a border, some margin, some padding and a box-shadow. Ihope this was clear. If you need/want any additional explanations please leave a comment or drop me an e-mail. I’d be happy to help you get this implemented on your pages.