Modifying WordPress to Allow website Authors to choose the Related Posts

Author controlled manual related posts in WordPress

It hardly matters if you publish the most blockbuster content on your website, the bounce rate may still be very high. Assuming that a particular user has been completely intrigued by an article on the site, you can’t guarantee him sticking around to read the other articles on the site unless something interesting catches his fancy. That’s where the term “related posts” has a part to play.

Related posts in WordPress are typically those posts that either share the same tags or the same categories and by default, WordPress associates one with the other by displaying the other post’s link with the featured image right at the bottom of the post being read currently.

But, let’s face it, the related posts displayed via default are not always the ones we want to be displayed. Rather, the authors on your website would prefer their own posts being associated with one another via this related posts feature. So, if you are one of those authors or a webmaster who wants such a feature – posts of the same author appearing as related posts to one another – this tutorial is for you.

The amazing scalability of WordPress is instrumental in giving us endless possibilities with our websites. Integrating a method that allows the authors to choose the related posts is one such customization that can be achieved in a linear manner.

Creating the Custom Method that Allows Authors to Choose Related Posts

For starters, we will create a metabox in our WordPress post screen and get all the posts displayed there. Following this, we will let our authors to choose related posts from the list that’s now available to us. For implementing the same, add the following code to the functions.php file of your theme:

<?php
function wp_related_post_meta_box() {
   add_meta_box('wp_related_post', 'Select Related Post', 'wp_related_post_list', 'post');
}
add_action( 'add_meta_boxes', 'wp_related_post_meta_box' );
function wp_related_post_list( $post ) {
   wp_nonce_field( 'wp_related_post', 'wp_meta_box_nonce' );
   $related_array  = get_post_meta( $post->ID, 'related_posts_ar', true );
   $related_array = unserialize($related_array);
   wp_reset_query();
   query_posts('order=ASC');
?>
<select name="options[]" multiple="multiple">
<?php 
while ( have_posts() ) : the_post();
?>
<?php $post_id =get_the_ID();  ?>
<option value="<?php echo get_the_ID(); ?>" <?php if($related_array){ if  (in_array($post_id, $related_array)) { echo "selected"; } } ?>><?php echo get_the_title(); ?></option>
<?php endwhile; wp_reset_query(); ?> 	
</select> 
<?php 
}
function wp_save_meta_box_related_post( $post_id ) {
     if ( !isset( $_POST['wp_meta_box_nonce'] ) ) {
                return;
     }
     if ( !wp_verify_nonce( $_POST['wp_meta_box_nonce'], 'wp_related_post' ) ) {
                return;
     }
     if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
                return;
     }
     if ( !current_user_can( 'edit_post', $post_id ) ) {
                return;
     }
     $related_posts = ( isset( $_POST['options'] ) ? sanitize_html_class( $_POST['options'] ) : '' );
     $related_post_array = serialize($related_posts);
     update_post_meta( $post_id, 'related_posts_ar', $related_post_array );
}
add_action( 'save_post', 'wp_save_meta_box_related_post' );
?>

For the folks who find this code a tad too cryptic, here is a the break down for the same:
STEP 1: The First Step Involves Registering the Custom Metabox

function wp_related_post_meta_box() {
     add_meta_box('wp_related_post', 'Select Related Post', 'wp_related_post_list', 'post');
}
add_action( 'add_meta_boxes', 'wp_related_post_meta_box' );

We begin by creating a wp_related_post_meta_box() that can register our custom metabox. Then, add_meta_box() takes as input certain parameters to intimate tell WordPress about the metabox. Let’s take a glance at what the parameters represent:

  • wp_related_post: It represents the HTML ‘id’ attribute of the WordPress post editor screen.
  • wp_related_post_list: It prints the HTML for the editor screen.
  • post: It makes sure that the metabox appears on the post screen. You can also use “page” instead of “post” if you want the metabox to appear on page screen.
  • add_action( ‘add_meta_boxes’, ‘wp_related_post_list’ ) It is an action hook to instruct WordPress to add metabox.

STEP 2: The next step involves Creating Function to Generate Metabox Output

<?php
function wp_related_post_list( $post ) {
   wp_nonce_field( 'wp_related_post', 'wp_meta_box_nonce' );
   $related_array  = get_post_meta( $post->ID, 'related_posts_ar', true );
   $related_array = unserialize($related_array);

   wp_reset_query();
   query_posts('order=ASC');
   //fetch the list of all the posts from WordPress. 
?>
<select name="options[]" multiple="multiple">
<?php 
  while ( have_posts() ) : the_post();
  $post_id =get_the_ID();
?>
  <option value="<?php echo get_the_ID(); ?>" <?php if($related_array){ if  (in_array($post_id, $related_array)) { echo "selected"; } } ?>><?php echo get_the_title(); ?></option>
<?php endwhile; wp_reset_query(); ?>
</select> 
<?php
}

The wp_related_post_list( $post ) goes on to generating the output of our custom metabox. The code we have written will generate a select list. This select list is the list wherefrom our website’s authors have the freedom to select the related posts from the posts list. The list looks something like this:

Related Posts By Author - Admin Interface
Related Posts By Author – Admin Interface

STEP 3 – Saving MetaBox

<?php
function wp_save_meta_box_related_post( $post_id ) {
       if ( !isset( $_POST['wp_meta_box_nonce'] ) ) {
                return;
       }
       if ( !wp_verify_nonce( $_POST['wp_meta_box_nonce'], 'wp_related_post' ) ) {
                return;
       }
       if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
                return;
       }
       if ( !current_user_can( 'edit_post', $post_id ) ) {
                return;
       }
       $related_posts = ( isset( $_POST['options'] ) ? sanitize_html_class( $_POST['options'] ) : '' );
       $related_post_array = serialize($related_posts);
       update_post_meta( $post_id, 'related_posts_ar', $related_post_array );
}
add_action( 'save_post', 'wp_save_meta_box_related_post' );
?>

The (wp_save_meta_box_related_post( $post_id ) function is used to save the metabox value to the WordPress database. This function will take post id to save that metabox field value on the particular post meta session in your website database. And the add_action( ‘save_post’, ‘wp_save_meta_box_related_post’ ) is a hook that tells WordPress to save the post with meta value.

Display Related Post List On Frontend
Now, for displaying your preferred list of related posts on th website frontend, you can add the following code to your single.php file:

<?php
$related_post_list = get_post_meta( get_the_ID(), 'related_posts_ar', true );
$related_array = unserialize($related_post_list);
if($related_array) {
     echo '<ul>';
     echo '<h2>Related Posts</h2><br>';
     for( $i=0; $i<count($related_array); $i++ )
     {
          echo '<li>'.get_the_title($related_array[$i]).'</li><br>';
     }
     echo '</ul>';
}
?>

The above code performs the function of extracting the post meta value from the database we have. The get_post_meta() function fetches the value that needs to be passed for related Posts and meta key in this function.

Our code above gives out the output as shown in the featured/title picture.

That’s all. Implement the above method and your authors will have the freedom to choose the related posts that are displayed with their articles on your website.