Sridhar Katakam

Genesis and WordPress Tutorials

Displaying Posts output by Display Posts Shortcode in Masonry style

by 3 Comments

On a site that I have recently taken over, the client tried using Essential Grid for displaying groups of Posts (each tagged with a specific term) in Masonry style. But due to some conflict with Optin Monster, only the loader was appearing for non-logged in visitors - not the Posts themselves.

In this article I share how I re-created the same using Masonry which is included in WordPress out of the box.

masonry-posts-shortcode

Here are the design goals:

  • It should be as easy as using a shortcode for showing each group of tagged Posts.
  • Only those Posts that have Featured images should be pulled.
  • It should be possible to use multiple shortcodes on a Post/Page.
  • Post blocks should fill the available width of the container. (I have set this to be met at regular desktop width, 1024px, 768px, 568px, 480px and 320px)
  • Author name should be displayed. "by" before the author name should not be present.
  • Links should open in new windows/tabs.

Here's how I set it up:

Step 1

Installed and activated Bill Erickson's Display Posts Shortcode.

Step 2

Created a file named masonry-init.js in child theme directory/js having the following:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Sridhar, thank you fore the great tutorial! Is it possible to do the same but not with the tag, but by pulling a certain ammount of last posts from the category? Thank you!

    Reply
    • >