Add a Custom Masonry Layout with 2 Plugins

Screen Shot 2015-02-15 at 2.22.58 PM
I’ve been meaning to set up a Masonry style layout for my weekly photography posts for a while. After my earlier post meshing together plugins, I figured now was the right time to show how to do it.

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.

It’s also not a bad example pattern for integrating other javascript options without the hassle/upkeep of child themes etc.

Plugins Needed

To Business

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.

js css custom

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

Screen Shot 2015-02-15 at 2.54.45 PM

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.

Comments on this post

  1. CogDog said on February 15, 2015 at 5:19 pm

    I left a lovely comment and saw it disappear with “Invalid security token” F***** wordpress

  2. CogDog said on February 15, 2015 at 5:22 pm

    Basically.

    (1) Love the look of the masonry photos, responsive

    (2) In one session I could get you just over the Programmistan border doing this in child themes w/o overhead of plugins. Just a matter of modifying a loop logic and enqueing the jQuery. Plus you can do way more w/ output.

    (3) For Code display I use https://wordpress.org/plugins/syntaxhighlighter-plus/ to display and https://wordpress.org/plugins/preserve-code-formatting/ to keep WP from messing with the code

    (4) I am now copying my comment in case it self destructs

    • Tom Woodward said on February 15, 2015 at 5:35 pm

      I might have to try the child theme route for fun. The plugin stuff is more to show people how this might play out in a nonprogramistan context.

      I’m going to see if Preserve Code Formatting adds what I need.

      Many thanks and I was glad to hear you’re willing to come hang out with us again in the near future.

Leave a Reply

Trackbacks and Pingbacks on this post

  1. Faster Faster NMC Notes | said on June 10, 2015 at 6:50 am

    […] Masonry Layout – this uses Display Posts and Specific CSS/JS for Posts/Pages to create a Masonry photo layout in a theme that didn’t have that option. Another example of that is here combined with a Gravity Form to allow other people to add questions to the site. Dead simple and easily portable to other themes and purposes. Another example is here. […]

TrackBack URL