Custom Method to Allow Your Authors to Choose Related Posts in WordPress

The amplitude of features and customization abilities that WordPress provides isn’t hidden anymore. Every individual and developers alike are well aware how great WordPress is – for website creation and maintenance. Not only that, website owners who want a simple blog can also use WordPress.

Another flexible feature that WordPress offers is related posts. Displaying related posts on your site helps save your users’ time – to navigate throughout your website – searching for topics that relates to a post they might be interested in.

By default, WordPress allows you to display related posts in two ways: via tags and categories. However, there is a downside associated with these ways. Both tags as well as categories make use of automated process to show the related posts in your website. But, what if you wish to show your own choice of related posts? What if you want to display related posts of a single author or multiple authors? In that case, WordPress customization is a way which comes to the scene. By implementing a custom method to display related posts will prove a viable solution.

This post is about how you can create a custom method, allowing your website authors to choose related posts in WordPress.

How to Create Custom method Allowing Authors to Choose Related Posts?

For creating a custom method that allows authors to choose related posts, you’ll first have to create a metabox in WordPress post screen, display all the posts in that screen. And then, allow your website authors to choose related posts from the list of posts. For doing so, paste the below code in your 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’);

<?php

while ( have_posts() ) : the_post();

$post_id =get_the_ID();

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

Beginners might find the above code a bit hard to understand. So, let’s break the code down into different steps, so that you can get a better idea of how it works.

Step 1 – Registering Our 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’ );

The very first line in our code creates a wp_related_post_meta_box() function that helps register our custom metabox. And the add_meta_box() function take some parameters to tell WordPress about the metabox. Each parameter in the add_meta_box() function has a certain meaning to it. Let’s now take a look at each of those parameters:

wp_related_post: It determines the HTML ‘id’ attribute of the WordPress post editor screen.

Select Related Post: It specifies the title of the editor screen.

wp_related_post_list: This function prints out the HTML for the editor screen.

post: This parameter determines that the metabox will appear on post screen. However, you can even choose to display the metabox on page screen by using “page” instead of “post” as your parameter.

Lastly, the add_action( ‘add_meta_boxes’, ‘wp_related_post_list’ ) is an action hook that tells WordPress to add metabox.

Step 2 – Creating Function to Generate Metabox Output

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.

<?php

while ( have_posts() ) : the_post();

$post_id =get_the_ID(); ?>

<?php endwhile; wp_reset_query(); ?>

</select>

<?php

}

The wp_related_post_list( $post ) function helps to generate output of our custom metabox. This code will generate a select list to allow your WordPress website authors to select related posts from the posts list, which will look something like:

Step 3 – Saving MetaBox

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.

How to Display Related Post List On Frontend?

In order to display your choice of related posts list on your website frontend, simply paste the following code in 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 will fetch the post meta value from your database. And the get_post_meta() function will get the value you have to pass for: Related Posts and meta key in this function.

Now, let’s see the below screenshot which displays the output of the above code:

So, that’s it! I hope that this post would help you understand the approach you can follow, to display your authors related posts on your WordPress website.

Latest Images

Trending Articles

Latest Images