Use Masonry To Add Pinterest Style Post Grid In WordPress

What if, you have checked out the popular social site like: Pinterest and want to create similar layout? And why not create the same layout too since it might save too much space for your site, removing unwanted whitespace, which can show your site in proper way. So, here we will be leaning about how to use masonry to add Pinterest style post grid in WordPress, shall we?

What is MasonryJS?

Well, the answer to add is, it is Javascript grid layout library. It works by placing the required elements in the best position available for vertical space, just like the bricks. You can find more details on this here: Masonry.

Enqueue required MasonryJS and custom JS file to use masonry to add Pinterest style post grid in WordPress

Since Masonry is JS library, we first of all, need to enqueue this library within our WordPress theme. So, let’s move ahead and enqueue it within your theme, shall we?

First of all, for your information, Masonry JS is packed within WordPress and hence, you need to use the library from within the WordPress. And WordPress has named the handle name for this JS as jquery-masonry, if you want jQuery dependent masonry JS. And this one: masonry if you want the native JS library of Masonry JS.

After knowing this piece of information, lets load up the required JS file, ie, masonry and custom JS setting file for your theme, shall we? Well for it, just open up your functions.php file of the theme and place the below PHP code in that file:

There, in the above code, you could see that we have not directly enqueued the masonry js, instead it is loaded as dependency. And since there is no any condition applied, it will load that JS file in each of the page viewed in your site. So, what if you want to load that JS in the Custom pages only, if blog, archive and other pages? On this too, we have got your covered up. You just need to use the below PHP code instead of above for same:

Now, it will get loaded up in home/blog page, search as well as archive pages only, not on other pages. You can read more on WordPress enqueue method here: wp_enqueue_script. Now, let’s dive ahead and learn about the template structure for this to work out, shall we?

Add the required template structure for post loop to use masonry to add Pinterest style post grid in WordPress

Your WordPress, post loop will look similar as below in the file: index.php, archive.php and so on:

Here, in the above loop, you can also see the extra file being called up to display the loop. So, let’s see the content for that file too, shall we? Well, it is placed in the below code:

Here, in the above post loop, you can see that we have added the extra post class named as: masonry-content, in which we will be applying masonry to. Now, let’s dive ahead and learn about the JS setting to use masonry to add Pinterest style post grid in WordPress, shall we?

Add the required JS and CSS code to use masonry to add Pinterest style post grid in WordPress

For this, you first of all need the parent selector to make the masonry possible. As from the above template structure, you can see the parent selector can be: .site-main and the item selector, as we previously mentioned, is .masonry-content. So, now let’s add the below jQuery code in the custom JS setting file to make the post look in masonry layout:

Here, in the above code, you can see we have first of checked the condition if masonry is initialized or not. After that, you can see that we have applied masonry for the previously mentioned item selector. And what if you want to load the masonry JS on jQuery document load? Well, on that jQuery load, since masonry might not calculate height properly, hence on that, the layout probably might get overlapping. So, best to use is jQuery on window load since it will be loaded once everything it loaded within the site.

Now, it is only half the work done since it could not calculate the width of the item. Hence, we will apply the CSS of width to the item selector create for masonry content, ie, .masonry-content. Hence open up your style.css file and place the below CSS code into that file:

Now, after applying this CSS code too, you can see that the layout of the posts in your site is in like the grid as in bricks and you could also see that there is almost no whitespace at all for post layout of your site.

Output of how to use masonry to add Pinterest style post grid in WordPress

If you have implemented the above process successfully for your WordPress site too then, you will probably get the similar output as in below screenshot:

There, you can see, the first post is displaying the content and later on, posts excerpt. And there, you can easily see that the whitespace could have caused by first post but, due to masonry implementation, it is filled up, leaving no unwanted whitespace.

May may also want to read:

  1. Display Header Video In WordPress In Different Pages
  2. Tutorial On Creating WordPress Child Theme
  3. How To Disable Comments In WordPress?
  4. How To Create Shortcode In WordPress?
  5. Selective Refresh In Customizer Options

Conclusion

If you have followed up the tutorial properly and now can easily use masonry to add Pinterest style post grid in WordPress site then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

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