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.
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.
Add the field in the type of Post. This field type allows you to choose a/multiple posts from a regulated post type.
You should configure this field a little bit.
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.
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.
Back to the post editor of your post type, you will see 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.
You also can see that this field has the display following the display of the Select Advanced field type as I set.
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.
In the Template tab of the view, click on the Insert Field button. 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.
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 %}
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.
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
And choose the location as the singular of your 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.
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.
You also can add heading, hyperlink, etc. Then, move to the CSS tab and add some code.
And this is the result.
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 returnsrwmb_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:
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.
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.
Then add CSS to the single page via Customizer or theme’s file. Then, you will have a new look of the section.
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
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display a User List On the Frontend with Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download Buttons Using Custom Fields with Meta Box Plugin
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show Posts with Specific Criteria - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
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!
If you are using a plugin to display recent posts, you can contact plugin support to ask for help with this case.
If you are using custom code to display recent posts from categories, just get the second category. Refer to this documentation https://developer.wordpress.org/reference/functions/get_the_category/