News or e-commerce websites, which have multiple blog posts or products, usually need Related Posts. Adding related posts to your posts brings some advantages of SEO and user experience. However, using plugins which create related posts automatically may not satisfy when you want to choose some particular related posts. In this tutorial, we’ll use Meta Box to create related posts that you can choose manually.

What are Related Posts?

Related posts, as its name says, are the posts which has intimate content with the current post. Its content may be a kind of additional information, inline, suggestion, etc.

Related posts are often displayed in a group and put at the end, sidebar or even in the middle of the post. The number and position of the related posts depend on your website design.

For visitors, having related posts gives them suggestions to read more related content which they may need. In the event the current post does not have enough information, related posts are a good way to get more.

To the website owners, the related posts create or increase a significant number of internal links on your site. It pulls the visitors to stay longer on your site at the same time. This thing helps you improve multiple website indicators such as the bounce rate, page view, time on site, and so on.

Normally, most tools set related posts automatically based on the keywords, tags, categories, or taxonomies. It might be not precise, especially when your marketing team wants particular related posts to be prior on the list. In that case, choosing related posts manually will be the best way.

Related post is shown at the end of posts - an example from metabox.io
Related posts are shown at the end of posts

What is Meta Box? What is the Post Field?

Meta Box is a light and simple plugin but powerful to create and configure custom fields in WordPress. In case you are not familiar with Meta Box yet, this post is for your reference.

Meta Box supports more than 40 types of custom fields, means that almost the fields everyone needs. Meta Box also supports fields that associate databases from posts, pages, and custom post types in WordPress.

In this post, we are going to use a special field type named Post Field, which allows us to link to posts, to create related posts.

Post Field is a field that allows you to choose one or multiple posts. It may be displayed in several styles as select, checkbox or radio. Using Post Field allows us to choose a particular post, even in different post types, manually.

How to Add Related Posts to WordPress Using Meta Box?

Step 1: Install Meta Box Plugin

Firstly, you need to install and activate the Meta Box plugin on your WordPress site. The plugin is free and available on wordpress.org:

If you are not familiar to PHP or don’t want to touch any line of code, you should install a premium extension from Meta Box in addition, Meta Box Builder. This extension (it is a plugin as well) provides you an intuitive user interface to create and configure custom fields without coding. Even when you have no knowledge of PHP, the execution is really easy.

If you are a developer, you may create fields by code. That means you need to install the Meta Box plugin only.

FYI, here is the instruction to install and activate plugins.

Step 2: Create and Configure Post Field

When you installed Meta Box Builder, creating a Post Field is very easy for everyone.

In the Admin Dashboard, go to the Meta Box → Custom Fields → Add New.

In the displaying screen of Edit Field Group, name your field group in Title field, set it an ID, then click on Update. You have a field group to hold the Post Field now.

Next, look at the list of fields on the left, go to WordPress Fields and choose Post. A post field will appear automatically inside the created field group.

Create a post field using Meta Box Builder
Create a post field using Meta Box Builder

Now, we configure the post field. There are some notices about setting in this step:

Description:

In this field, you may give some instruction on how to choose the posts. E.g. I made it be “Choose 3 Related Posts” to request the writers choose enough three posts to be related.

 give some instruction on how to choose the related post

Post Type:

If you have several post types on your site, you must indicate the right post type you want to be related to (pay attention to this, no. 1). For instance, if the related posts you want is in the type of a custom post type, Products, you must choose Products here. If the related post is in the type of default blog posts, you must choose Post here.

Anyway, you can choose multiple options here by pressing Ctrl + Click to the post types you want.

choose multiple post type to be related posts

Tip:

With the Post Type option, you absolutely can choose another post type’s posts to be related. e.g products can be related to a blog post.

Take the case of a travel agency who sell tours to go to Thailand where each tour is a product page (its post type is Product). If they have a blog post which shares travel experiences and tips in Thailand, by set post type Product here, they can put some Thailand tours to be related posts to suggest people buy their tours. Such a good way to increase sales!

Field Type:

This field stipulates how the post field show the posts inside. There are several styles to show, ones of the most common styles are:

Related posts show in Select Advance style

Related posts show in Checkbox list style

Related posts show in Checkbox tree style

Personally, I prefer the Select Advanced because it is neat and provides searching. If we have a significant number of posts, e.g. over 1,000 posts, scrolling to find a post may be dull. Otherwise, if you set pages to be related (there are few pages), scrolling of Checkbox list or Radio may work.

Display “Select All | None” button:

Only tick this box when your field is in the Checkbox list style. That makes a “Toggle All” button appears allowing to choose/unchoose all the posts by one click.

After configuring all options in the Field tab of Edit Field Group screen, move to the Settings tab. In the Post Types field, choose a post type of the post where you want to show related posts (pay attention to this, no. 2).

Choose a post type of the post where you want to show related posts
Choose a post type where you want to show related posts

Finally, click on Save Changes to save all the settings.

Instead of using Meta Box Builder to create Post Field as above, you may code and take a look at my below code. This is a gist generated automatically by Meta Box Builder plugin after creating Post Field. If you put it into the function.php file of your theme, you will get the same result as mine.

Step 3: Add Related Posts to Each Post

Now, back to the edit page of your post, which has the post type you chose to show related posts (the attention point no.2). Move to where you place the created field “Related Posts” and click on there. A list of posts will show as following:

A list of posts will show to choose related posts
A list of posts will show to choose

This list includes all the posts in the post types which you chose (the attention point no.1). Just click on the post title, then press Update. Now, your post had related posts.

Step 4: Show the Related Posts on the Front End

The created Post Field save the IDs of chosen related posts. It returns an array of values as follows:

array (size=3)
    0 => string '36' (length=2)
    1 => string '25' (length=2)
    2 => string '29' (length=2)

So, we use this function to get the value of posts:

$post_ids = rwmb_meta( $field_id );
foreach ( $post_ids as $post_id ) {
    echo '<p>'. get_the_title( $post_id ). '</p>';
}

In there:

  • $field_id: ID of the Post Field which we set
  • $post_ids: The array of post IDs which the Post Field returns

We can customize or export data by the IDs. It means that you can get any information from the related posts such as title, thumbnail, excerpt to show on your website. I did get all of them (title, thumbnail, and excerpt) in this instruction.

Put the below gist to the single.php file if your post type is post. If your post is another custom post type, create a file named single-{custom_post_type_slug}.php and put the gist into there. Read more about creating a custom post type here.

Source code:

Final Words

That’s how to add related post to WordPress post using Meta Box plugin. With this method, you may customize the related post as you want and choose a particular post as well. Hope that it may help you to give your visitor more useful content, increase SEO score as well as sales.

Leave a Reply