How to Accomplish a Pinterest Style Layout in WordPress

One thing Pinterest is known for is the columned grid layout which happens to inspire a lot of people to implement it on their own website(s). The advantage of using such layout is that you won’t have to worry about things such as cropping images, title- or excerpt lengths. These layouts can be created with fairly little effort by using the Javascript library Masonry. In this tutorial I’ll explain how to accomplish a similar effect in WordPress using Masonry.

Let’s say you run a blog about high class products such as watches, architecture, interior decoration, cars, etc. That’s probably a website that relies on pictures, but pictures don’t always have the same proportions and cropping them might give funny and unwanted results.

Let’s Get Started

Create a Child-Theme

As some of you probably know, editing default themes is not recommended because you’d lose progress when you upgrade your themes. That’s why I’m going to create a child-theme for this guide but I assume you already have a theme ready for Masonry to be implemented on, if so, you can skip to “Setup Masonry”.

A child theme is a new theme, apart from the default themes, that is located in the themes folder in the wp-content directory. Because I’m not going to build a theme from scratch I’m just going to duplicate the Twentythirteen theme, rename the folder and make a couple of change to the style.css so that WordPress recognises it as a different / new theme.

Enqueue the Script

What a lot of people don’t know, or maybe have forgotten about, is that WordPress comes with a Masonry script by default so for this guide we’re going to use that script instead of the one you can download from the plugin’s website.

To make sure Masonry shows up in your source code and it’s available for use simply enqueue the script. The following script is used for when your theme doesn’t enqueue scripts yet.

< ?php
function wdv_enqueue_scripts() {
   wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme
}
add_action( 'wp_enqueue_scripts', 'wdv_enqueue_scripts' );
?>

In case your theme already enqueues some scripts and / or styles you can just add the following line to the function that currently enqueues your scripts and styles.

wp_enqueue_script( 'jquery-masonry' ); // adds masonry to the theme

Now that you’ve enqueued the Masonry script you should see it show up in the page source of your website. If so it’s time to get use the script and get our nice Masonry grid to work.

The HTML / CSS

The script makes use of a container that wraps around all your posts, in this case being called “items”. These items can be shown in 2 ways, you can show them like every other item or you can span it over 2 columns by adding the additional class “w2”.

For the use case I’m using for this post I need to grab a couple of things from the post. These would be the thumbnail, the title and the post date. I’ve use the following markup to show the “bricks” as Masonry calls them.

<div class="column">
   <a href="<?php the_permalink(); ?>">< ?php the_post_thumbnail(); ?></a>
   <div class="description">
      <h2><a href="<?php the_permalink(); ?>">< ?php the_title(); ?></a></h2>
      <div class="entry-meta">
         <span class="date">Posted on: <a href="<?php echo get_month_link(the_time(__('Y', 'f2')), the_time(__('m', 'f2'))); ?>">< ?php the_time(get_option('date_format')); ?></a></span>
      </div>
   </div>
</div>

If you’d like to get the excerpt as well you could include < ?php the_excerpt(); ?> somewhere within the description div. Excerpt lengths can be adjusted via the functions.php, checkout the WordPress codex to find out how.

Configure the Script

Masonry can be setup in three different ways, you can use good ol’ Javascript, jQuery or you can set it up via HTML by adding a parameter to the container. This configuration is needed to get the script to work.

The Javascript Way:

This method would be useful for when you aren’t using jQuery in your theme.

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
   // options
   columnWidth: 200,
   itemSelector: '.item'
});

For those interested, this script creates a new instance for the object “Masonry” with all the desired options.

The jQuery Way:

Alternatively you could use the jQuery way, this would fit in nicely with your other code if you already use jQuery.

var $container = $('#container');
// initialize
$container.masonry({
   columnWidth: 200,
   itemSelector: '.item'
});

For the example I used the jQuery way, though because the Twentythirteen is responsive / liquid I had to use percentages. Because of that I had to change the columnWidth value a bit. Here’s how I did that:

var $container = $('#content');
$container.masonry({
   columnWidth: function( containerWidth ) {
      return containerWidth / 4;// depends how many boxes per row
   },
   "gutter": 20,
   itemSelector: '.column'
});

You may have noticed that I added an option named “gutter” this option is used so Masonry can set the gaps between the columns. Alternatively you could do this via CSS but this way I had everything in one place.

The HTML Way:

In case you aren’t familiar with Javascript nor jQuery whatsoever you might want to use this HTML method.

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'></div>

Optional: CSS

Because I’m editing a child theme of the Twentythirteen theme I had to add some styles to style the layout a bit, here’s the styles I used in case you want to apply it on the default theme as well:

#content{
   padding-top: 20px;
   padding-left: 20px;
}

.column{
   width: 23%;
   margin-left: -1px!important; // fix for fluid layouts
   margin-bottom: 2%;
}

.column > .description{
   padding: 20px;
   border: 1px solid #ececec;
   border-top: 0;
}

.column h2{
   margin-top: 0;
   margin-bottom: 10px;
}

.column h2 > a{
   color: #222;
}

.column > img{
   width: 100%;
   margin-bottom: 0;
}

That’s It!

That didn’t take too much effort, right? If this all is still a little above your capabilities you might want to checkout these plugins instead.

Classified

Inspirational websites

As I mentioned before, a lot of websites implement similar layouts, here’s a few to get you inspired:

Spotify’s web version

Spotify uses the columned layout to show your activity feed. This feed shows a variety of different types of content such as shared playlists or also music suggestions.

Spotify

Linxspiration

This site is similar to the use case of this tutorial, in fact, this site inspired me to write this post. Linxspiration is as I described in the opening of this post a site with a lot of images that happen to have many different sizes and proportions.

Linxspiration

Roundup

Do you know of great websites that also use a similar grid to Pinterest? Feel free to share it with a comment below, you might inspire your fellow designer / developer.

Advertisement