How to Use Masonry to Add Pinterest Style Post Grid in WordPress


ManageWP.org
Lillie Butler

In this tutorial, I will show you how to use the popular Masonry JavaScript Library to create cascading grid layouts for your blog index, as well as archive pages for your theme. I will address a few issues that you need to consider for mobile-optimization and how to solve them.

Artisans Web
Serina Etheridge

When it comes to WordPress, one should not include JS file using the script tag directly. It’s a bad practice for WordPress. WordPress provides it’s own way to include JS and CSS files in the system. WordPress developer should stick to this way for including their JS and CSS files.

9+ Grid, Masonry and Pinterest-Style WordPress Themes for Online Merchants and Galleries
Eliana Ohara

Many webmasters choose the Semantic WordPress theme for its responsive and clean layout, but we’re highlighting it for the Pinterest look. The majority of your articles are presented in a grid format, and each of these show links, descriptions, and images. Besides the grid, Semantic offers several custom homepage layouts to choose from, besides the fact that you can customize the widgets and blog grids. The right and left sidebars are essential for implementing widgets on the homepage, and throughout the entire site. If you’d rather have a wide layout, remove the sidebars for more real estate on the screen. Three beautiful skins help out with customizing your site, while 20 background options ensure that you can upload an image that reflects your brand. The Semantic theme comes with gorgeous typography, which helps with presenting your content in an elegant way. You can choose between Facebook or Disqus comments. Both are nice, but one is more social, while the other has a strong community behind it.

Using jQuery Masonry for Pinterest-Like Posting
Vella Whalen

If you’ve heard of a “masonry” wall (think of a brick wall), then you have a pretty good mental image of what a masonry layout on your website might look like. If you’re still confused, visit Pinterest and check out how they’ve laid out each “pin” on their website. Everything is arranged vertically, filling up all available space. It’s important to note the term “vertical” in that last sentence. You can achieve the same type of masonry effect using CSS floats, but you might run into spacing issues. This happens because, unlike jQuery Masonry, CSS floats will arrange elements horizontally first, then vertically. This can make for very inconsistent and sometimes unwanted gaps of space in your layout. Using jQuery Masonry can help solve this problem.

Be the first to comment

Leave a Reply

Your email address will not be published.


*