Published on April 7, 2020

Recent Posts in Masonry Layout on Single Posts in Oxygen

Sridhar Katakam

This members-only tutorial builds and extends on top of the How to Exclude Current Post from Recent Posts in Oxygen tutorial to display the latest posts (excluding the current post) in a masonry style on single posts (can be of any post type) in Oxygen.

Step 1

Let us register a custom image size for the featured images in the recent posts masonry grid.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'recent-entry-image', 800, 0, true );

Set the snippet to run everywhere. Save changes and activate.

Step 2

Add featured images for your posts that are at least 800px wide.

For the masonry effect to be prominent, use images of different heights.

Step 3

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Create a file named masonry-init.js in the plugin's assets/js directory having the following:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right