Add a Custom Masonry Layout with 2 Plugins
Sure you could do this with a child theme and some specific themes have this layout. There are also some Masonry plugins that’ll get you some of this. This path allows you a good bit more freedom in the end and hopefully walks the middle path between intimidating coding and still having some real control over the end product/style etc.
- Display Posts Shortcode – gets us the posts we want
Activate those plugins.
Make a page where you want your Masonry layout to show up.
You’ll have the option at the bottom of that page (or post) to link to the mansonry library and turn it on for the page. You can see that below.
You can put the CSS in this area as well. Don’t forget to wrap it in the style tags. Since I was using a Bootstrap based theme I googled around to see what already existed for a Masonry layout. I ended up using this CSS (repeated below). I added a bit to make a slow fade in on hover.[HTML] [/HTML]
Now that we have the layout/display stuff pretty much set. The only thing left is to get the right posts with the right elements. This is where the other plugin comes into play. You can see the shortcode I used broken down below. In the code window I had to replace the intro [ with a * so that the plugin wouldn’t render it.1
Using the shortcode to pull categories does come at a slight cost. I believe you’re stuck with the built in div labels- display-posts-listing and listing-item. That limits us a bit and you’ll need to know those names in order to be able to style them.
1 I am still not happy with my ability to show certain elements of raw code when it comes to plugin/shortcode interactions.