Moderating WordPress for allowing authors to choose related posts

As a WordPress blog owner, you’d have definitely tried ample number of techniques for reducing your site’s bounce rate. Fortunately, we have the concept of ‘related posts’ which allows us to guarantee visitors sticking around to continue reading multiple articles published on the site.

What’s awaiting you in this tutorial?

Custom WordPress Development is loaded with multiple possibilities. Irrespective of whether you’re an author or a webmaster who wants a feature wherein posts submitted by one author appear as related posts to a different author; this tutorial is tailor-made for you. Here, I’ll be explaining you the method of modifying WordPress to enable this feature for your WP website/blog.

Now, let’s come to the steps involved with altering WordPress

Step 1- Create a custom metabox where you can display all posts

For this, simply add the below code snippet to your theme’s functions.php file:

<?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' );

?>

Have a look at the above code and you’ll find the first section as:

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' );

Having enhanced my WordPress customization skills, I introduce you to the above code where I’ve created a wp_related_post_meta_box() which is used for registering the custom metabox. Further, the add_meta_box() fetches certain parameters as inputs to inform WordPress about the newly created custom metabox. Here’s a look at the parameters I’m talking about:

  • wp_related_post– It represents the HTML ‘id’ attribute for the WordPress Post Editor Screen.
  • wp_related_post_list– It is used for printing HTML for the post editor screen
  • post– In this tutorial, I want the metabox to appear on a post, so here I’ve used ‘post’ as the parameter. If you want the metabox to appear on a page, you can replace the same with ‘page’.
  • add_action– This is an action hook which instructs WordPress to add the respective metabox.

Step 2- Create a function to generate Metabox Output

For this, you simply need to use the below code:

<?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

}

In the above code, wp_related_post_list($post) is used for generating the custom metabox output. The entire code will generate a select list which can further be used by authors to have a quick access to related posts available within the posts list. Here is a screen-shot for how the post lists will be displayed:

wp-author

Step 3- Save the custom metabox

For this, simply use the below code snippet:

<?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' );

?>

Here, wp_save_meta_box_related_post($post_id) function will fetch the post id for saving the metabox field value for the specific post meta session within the site database. Also, add_action( save_post’, ‘wp_save_meta_box_related_post’ is the action hook which instructs WordPress to save the chosen post with its related metabox value.

Step 4- Display Related Posts list on the front-end

For this, just add the below code snippet to your theme’s 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>';

}

?>

In the above code, the get_post_meta() function will fetch the post meta value(from the database) that needs to be passed for meta key and related posts. Running the entire code will deliver an output that’s shown in the screen-shot below:

wp-author-01

 

So, that’s it for now!

Final Words

Hope you’d have enjoyed reading the post. Now, get on with implementing everything that’s covered above and offer your authors an ultimate flexibility of scanning through related posts displayed within their own articles published on the WP site.

Leave a Reply