// Step 4
// Add the following in child theme’s functions.php:
// Load and initialize Masonry
add_action( 'wp_enqueue_scripts', 'sk_enqueue_masonry' );
function sk_enqueue_masonry() {
if ( ! is_singular( 'post' ) ) {
return;
}
wp_enqueue_script( 'masonry-init', get_stylesheet_directory_uri() . '/js/masonry-init.js' , array( 'jquery', 'masonry' ), '1.0', true );
}
// Disable the automatic appending of related posts to content
add_filter( 'rp4wp_append_content', '__return_false' );
// Display related entries of current post after entry on singular posts
add_action( 'genesis_after_entry', 'sk_related_posts' );
function sk_related_posts() {
if ( ! is_singular( 'post' ) ) {
return;
}
if ( function_exists( 'rp4wp_children' ) ) {
rp4wp_children();
}
}
/*Step 3
/* Create a file named say, masonry-init.js in child theme’s js directory (create if not existing) having the following:
jQuery(function($){
var $container = $( ".rp4wp-posts-list" );
$container.imagesLoaded(function(){
$container.masonry({
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: ".rp4wp-post",
percentPosition: true,
});
});
});
https://sridharkatakam.com/displaying-related-content-using-related-posts-for-wp-in-masonry-style-in-genesis/
My recommendation for showing related content in WordPress is to use either JetPack’s Related Posts or Related Posts for WP Premium (commercial plugin). The latter offers the maximum flexibility for the generated markup and controlling the elements in the loop – what is shown and in what order.
In this tutorial we shall set up 8 related entries (both Posts and Pages) to appear beneath single Posts using using Related Posts for WP Premium plugin and the masonry script that is built into WordPress.
Step 1
Install and activate Related Posts for WP Premium.
Step 2
In the installer enable Related Posts (and optionally, Pages – if you want) to appear on Posts. Set the number of related posts to 8 (or how many ever you prefer). Link the entries when prompted. Go to settings and make changes per the screencast above (on Sridhar's website).
You might want to set a default placeholder image which will be shown in case an entry does not have a featured image set.
// In related-post-default.php, change
<li class="rp4wp-col<?php echo RP4WP_Manager_Frontend::get_column_class( $row_counter ); ?>">
// to
<li class="rp4wp-post">
// Step 6
// Create a directory named related-posts-for-wp in the child theme. Copy the following files to this directory.
// wp-content/plugins/related-posts-for-wp-premium/templates/related-post-default.php
// wp-content/plugins/related-posts-for-wp-premium/templates/related-posts-default.php
// and edit the copied files.
// In related-posts-default.php, change
<div class="rp4wp-related-posts rp4wp-related-<?php echo esc_attr( $post_type ); ?>">
// to
<div class="rp4wp-related-posts">
// and add
<li class="grid-sizer"></li>
<li class="gutter-sizer"></li>
// below
<ul class="rp4wp-posts-list">
/* Step 5
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Add the following in child theme’s style.css: */
/* Related Posts for WP in Masonry Style
--------------------------------------------- */
.rp4wp-related-posts {
background-color: #fff;
padding: 40px;
margin-bottom: 40px;
}
.rp4wp-related-posts ul.rp4wp-posts-list {
float: none;
}
/* horizontal gap */
.gutter-sizer {
width: 3%;
}
.rp4wp-post {
overflow: hidden;
background-color: #fff;
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.23);
padding: 10px;
}
.grid-sizer,
.rp4wp-post {
/* Width of each column in % = (100 - (2 × horizontal gap in %)) / number of columns */
width: 31.333333333%; /* 3 columns */
margin-bottom: 3%;
}
.rp4wp-post .rp4wp_component_image {
padding-bottom: 5px;
}
.rp4wp_component_image img {
vertical-align: top;
}
.rp4wp-post .rp4wp_component_title {
padding-bottom: 0;
line-height: 1.3;
margin-top: 4px;
}
.rp4wp-post .rp4wp_component_title a {
font-weight: normal;
}
.rp4wp_component_excerpt {
margin-top: 10px;
}
.rp4wp_component_excerpt p {
margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
.rp4wp-related-posts {
padding: 0;
}
}
@media only screen and (max-width: 500px) {
.grid-sizer,
.rp4wp-post {
width: 47%;
}
}
@media only screen and (max-width: 320px) {
.grid-sizer,
.rp4wp-post {
width: 100%;
}
}