Adding related posts is a common way to keep your visitor stay on your site and help them find more useful content. There are several ways to do it. In this practice, we will find out how to choose a specific post to be related to another one using custom fields created with Meta Box.

This is a typical section for related posts as you can see somewhere.

This is a typical section for related posts

Video Version

Before Getting Started

There are different ways to add related posts but the most popular is using a tool to automatically choose some posts related by keywords, tags, categories, or taxonomies of the current post.  It’s not using custom fields. However, it might be not precise in some cases, especially when you want particularly related posts to be prior on the list. That’s why you should use custom fields to choose exactly which posts are related to the current post.

In this practice, we need the Meta Box core plugin to have a framework to create custom fields. You can download it directly from wordpress.org.

We also need some Meta Box extensions to have some advanced features:

  • MB Views: help us create a template to get and display the related posts on the singular page. This is optional. If you haven’t had this extension, you can add code to the theme's file, or use a page builder. I will share with you how to do it in two ways: using MB Views, and adding code in detail in this practice.
  • Meta Box Builder: to have a UI on the back end to create the custom fields.

In the case that you are using posts in a custom post type, you should activate the MB Custom Post Type extension as well. In this practice, I’ll use the blog posts for demonstration purposes only, so I did not mention this extension.

Note that you can install all the above extensions individually or use Meta Box AIO.

Create Custom Fields

We’ll use only one field for this practice. Go to Meta Box > Custom Fields > Add New to create it.

Go to Meta Box > Custom Fields > Add New to create fields

Add the field in the type of Post. This field type allows you to choose a/multiple posts from a regulated post type.

Add Post field to choose a/multiple posts from a regulated post type

You should configure this field a little bit.

You should configure Label description, Post types and Field type field.

The Label description setting provides you a way to notify users about the field.

In the Post Types setting, you should choose the post type that the related posts are. In other words, only the posts from the post type set in this box can be chosen.

In the Field type setting, you can choose a kind of selecting field then the created field will inherit its style of displaying and inputting data. To know more about the style of each option in this setting, you can refer to the documentation of each providing field type.

You can turn on the Multiple option if you want to allow users to add more than related posts.

Turn on the Multiple option to allow users to add more than related posts.

After configuring all options for the field, move to the Settings tab, set Location as Post type, then choose a post type of the post where you want to show related posts.

move to the Settings tab, set Location as Post type, then choose a post type of the post where you want to show related posts

Back to the post editor of your post type, you will see the created field.

Here is the created field.

Now you can click on the field, see the list of posts from the post type you set in the settings of the fields. Just choose some ones from the list.

Choose some posts from the list Related Posts

You also can see that this field has the display following the display of the Select Advanced field type as I set.

Display Related Posts

To display related posts, we should get the posts that are chosen in the created custom field. Then, get their information and show them on the page.

As I mentioned before, you can use MB Views to create a template, or add code to the theme’s file. Notice that even when you are using a page builder, you still can use MB Views following this guide.

Method 1: Using MB Views

Get and Display Data from Fields

Go to Views in Meta Box and create a new view.

Go to Views in Meta Box and create a new view.

In the Template tab of the view, click on the Insert Field button. Look for the created field for related posts.

Click on the Insert Field button and look for the created field for related posts.

Select that field and you can choose which information of the post you want to output in the template. Here I choose Post Thumbnail, Post Title and Post Content respectively to show the information about related posts on the singular page.

Choose Post Thumbnail, Post Title and Post Content respectively to show the information about related posts on the singular page.

However, you cannot add all of them at once. Each clicking on the field on the list will get only one of them. And, the code with syntax as following will be add to the template:

{% for item in post.related_posts %}
    {{ item.ID_of_the_field_that_saves_post_information }}
{% endfor %}

It’s to get all the posts that users input into the field. Notice that I set this field to allow adding more than one post into the field.

After adding all the wanted post information, you should re-arrange the code to be like this:

{% for item in post.related_posts %}
    <img src="{{ item.thumbnail.thumbnail.url }}" width="{{ item.thumbnail.thumbnail.width }}" height="{{ item.thumbnail.thumbnail.height }}" alt="{{ item.thumbnail.thumbnail.alt }}">
    {{ item.title }}
    {{ item.content }}
{% endfor %}

The code with syntax added to the template

You also can change the code to output the data as you want. I changed this {{ item.content}} variable into {{ mb.wp_trim_words(item.content,20,'...') }} variable to limit the number of displaying characters.

Change {{ item.content}} variable into {{ mb.wp_trim_words(item.content,20,'...') }} variable to limit the number of displaying characters.

Set the Action to Display Posts

After getting all of the information of the posts as you want, go down to the Settings section of the view, set the Type as Singular

Go down to the Settings section of the view, set the Type as Singular

And choose the location as the singular of your post type.

Choose the location as the singular of post type.

You can choose one from the provided option in the Render for and Position section to have the right place as you want.

No, go to a page of a post. You will see the related posts.

Here is related posts before styling

Style

To have a better look for the related posts section on the page, go back to the created template, add some div tags and classes for each information.

Add some div tags and classes for each information to have a better look

You also can add heading, hyperlink, etc. Then, move to the CSS tab and add some code.

Add some code in CSS tab

And this is the result.

This is the result of related posts.

Method 2: Using PHP

The created Post field saves 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 the function to get the value of posts in this form:

$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 that the Post Field returns
  • rwmb_meta( ): this is a function provided by Meta Box to get data saved in the custom fields;
  • foreach ( ) { }: this is a loop to get all the posts that are saved in the field;
  • echo '<p>'. get_the_title( $post_id ). '</p>': to display the post title.

We can customize or export data by 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 just the title in the above code.

Go to the single.php or single-{custom_post_type_slug}.php file and put the gist in the above form:

Go to the single.php or single-{custom_post_type_slug}.php file and put some code.

If you want some other information from the post display, just add code inside the loop.

Now, go to the singular page, you will see the title of the posts displayed.

Title of the posts displayed in the singular page

To style the section of the related posts, you can add some div tag, classes, heading, etc. as to the code in the theme’s file as the same as I did with MB Views.

Add some div tag, classes, heading, etc. as to the code in the theme’s file

Then add CSS to the single page via Customizer or theme’s file. Then, you will have a new look of the section.

This is the result of a typical section for related posts

Last Words

No matter which ways you are following to add related posts, the mindsets are the same. Use a loop to query all the posts, get each data from posts, then display them. Do you see it make sense to you? Let’s try and share the result with us in the comments.

If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  31. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  32. How to Create a Recipe - P3 - Using Meta Box and Elementor
  33. How to Create a Recipe - P4 - Using Meta Box and Bricks
  34. How to Create a Recipe - P5 - Using Meta Box and Zion
  35. How to Create a Recipe - P6 - Using Meta Box and Brizy
  36. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  37. How to Create a Recipe - P8 - Using Meta Box and Kadence
  38. How to Create a Recipe - P9 - Using Meta Box and Divi
  39. How to Create a Recipe with Meta Box Plugin
  40. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  41. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  42. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  43. How to Create a Simple Listing - P5 - Using Meta Box and Kadence
  44. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  45. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  46. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  47. How to Create a Team Members Page - P4 - Just Meta Box
  48. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  49. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  50. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  51. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  52. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  53. How to Create a Video Gallery Page - P5 - Using MB Views
  54. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  55. How to Create a Video Gallery Page - P7 - Using Meta Box and Kadence
  56. How to Create a Video Gallery Page Using Meta Box + Oxygen
  57. How to Create ACF Flexible Content Field with Meta Box
  58. How to Create an Auto-Updated Cheat Sheet in WordPress
  59. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  60. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  61. How to create an FAQs page - P4 - Using Meta Box and Bricks
  62. How to Create an FAQs Page - P6 - Using MB Views
  63. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  64. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  65. How to Create an FAQs Page - P9 - Using MB Blocks
  66. How to Create an FAQs Page -P3- Using Meta Box
  67. How to Create Buttons with Dynamic Link using Custom Fields
  68. How to Create Category Thumbnails & Featured Images Using Custom Fields
  69. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  70. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  71. How to Create Download and Preview Buttons - P3 - Using MB Views
  72. How to Create Download and Preview Buttons - P4 - Using Meta Box and Kadence
  73. How to Create Download Buttons in WordPress - Using Custom Fields
  74. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  75. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  76. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  77. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  78. How to Create Notification Using Custom HTML Field
  79. How to Create Online Admission Form for School or University
  80. How to Create Online Reservation Form for Restaurants using Meta Box
  81. How to Create Reading Time to Your WordPress Posts - Using MB Views
  82. How to Create Relationships - P1 - Using Meta Box and Oxygen
  83. How to Create Relationships - P2 - Using Meta Box and Bricks
  84. How to Create Relationships - P3 - Using MB Views
  85. How to Create Relationships - P4 - Using Meta Box and Breakdance
  86. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  87. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  88. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  89. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  90. How to Display a Video Playlist - P1- Using MB Views
  91. How To Display All Listings On A Map With Meta Box
  92. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  93. How to Display Author Bio in WordPress - P2 - Using MB Views
  94. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  95. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  96. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  97. How to Display Images from Cloneable Fields - P3 - with Elementor
  98. How to Display Images from Cloneable Fields - P4 - with Bricks
  99. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg

2 thoughts on “How to Add Related Posts - Using Custom Fields

  1. I have set my posts to display recent posts from the post category. When I have a post with more than one category, I get 2 instances of recent posts. Is there a way to tell the plugin to limit to the first category instance? thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *