Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

how-to-create-a-masonry-pinterest-like-layout-in-wordpress

How to Create a Masonry Layout in WordPress

by Barbi Atkinson on Nov 14, 2018

Do you want to display your blog posts as a Pinterest like grid? A masonry layout is a great way to display your posts, especially when you want to show off your beautiful photography. In this article, we will share how to create a masonry layout in WordPress.

A masonry layout is a Pinterest like grid that displays your posts in vertical columns. It is especially perfect if you are a photographer, or if you have a lot of portrait-oriented featured thumbnails.

To create a masonry, Pinterest like layout in WordPress, you’ll need to follow these 5 steps:

  • Step 1. Install and activate Envira Gallery plugin
  • Step 2. Create an image gallery in WordPress
  • Step 3. Go to config settings and change number of gallery columns
  • Step 4. Set the column gutter width and margin below images
  • Step 5. Enable isotope/masonry image gallery layout
  • Step 6. Add the masonry image gallery to your site

By the end of this tutorial, you will be able to display your posts as a masonry grid that looks something like this:

Masonry Grid in WordPress

Note: You can use Envira Gallery to create a Masonry Gallery Layout without writing any code. See Masonry Gallery Demo // Get Started with Envira Gallery

Ready to get started? Let’s go!

Step 1: Install and Activate Envira Gallery Plugin

First thing you need to do is to install and activate Envira Gallery plugin to your WordPress site.

Envira Gallery

To learn more about installation, you should check out this guide on how to install Envira in WordPress.

Step 2: Create an Image Gallery in WordPress

Upon activating the plugin, you should go to Envira Gallery ยป Add New to create your image gallery. Let’s start by adding the title and photos.

Add Photos

You can learn more about the gallery settings on how to create an image gallery with thumbnails in WordPress.

Step 3: Go to Config Settings and Change Number of Gallery Columns

After adding the photos, you can scroll down to Config tab. In the Gallery Settings, you need to change the Number of Gallery Columns from Automatic to any other columns setting. In our example, we selected the Three Columns (3) setting.

Columns Setting

Now you can go down to find new settings in the next step.

Step 4: Set the Column Gutter Width and Margin Below Images

You need to scroll down to the Column Gutter Width and Margin Below Each Image settings. Set both the space between images to 10 in both options.

Column Width and Margin Between Images

Both these settings aren’t available for the Automatic layout.

By default, Automatic layout will attempt to fill each row and leave no gutter width or margin between images, so you need to change the settings to columns.

Step 5: Enable Isotope/Masonry Image Gallery Layout

Last setting in Config tab is to enable the isotope/masonry layout support for image gallery.

Enable Isotope

Next you should click on the Publish button and masonry image gallery is ready to display on your site.

Step 6: Add the Masonry Image Gallery to Your Site

Once published, you should copy the shortcode from the Envira Gallery Code widget.

Copy Shortcode

Next you need to go to Pages/Posts ยป Add New or edit an existing page/post. In the visual editor, simply paste the shortcode.

Add Shortcode

That’s all. Your masonry image gallery will appear on your site that will look like this image below:

Masonry Image Gallery

That’s it! We hope this article has helped you to learn how to create a masonry, Pinterest like layout in WordPress. You may also want to check out our guide on how to create a masonry image gallery.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Using WordPress and want to get Envira Gallery free?

Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.

Comments

    1. Hey Arun. As explained in Step 1, it will initialize the masonry layout, calculate the size and create columns for the images. ๐Ÿ™‚

  1. This is not working. I’m using WP 4.9.8 and getting syntax error “unexpected if” in line 8 and 9 in step 5 for functions.php.

    1. Hi Jan ๐Ÿ™‚

      I apologize, this is an older tutorial that is no longer necessary to add code to do. If you want to create a masonry layout (and I’ll be updating this doc as soon as I post your reply) just create or edit your gallery. On the Configuration tab, in the Number of Gallery Columns dropdown, select any column count. Make sure (on the same Configuration tab) you’ve checked the box to Enable Isotope? and that would give you a masonry layout as we show here in our demo.

      1. Hi Barbi,

        I am trying to create a masonry layout but I can’t find “any column count” as well as “enable isotope” checkbox. Please kindly help!

Add a Comment Cancel reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.