Counting the number of related posts using MB Views

Numbering related posts and displaying their total count is an effective way to enhance user experience. Using the MB Views extension from Meta Box, you can implement this feature easily and provide readers with a clear idea of how much relevant content they can explore.

So, I’ll show you two approaches:

• Displaying numbered bullet points for each related post.
• Showing the total number of related posts at the bottom of the section.

(Number related posts as well as count the total, using the MB Views extension from Meta Box)

Let’s see how to have it!

Video version

Preparation

In this tutorial, we’ll use a Post field to store multiple related posts and then display them on the frontend. For that, we’ll need a few essential tools to set everything up.

• The Meta Box plugin: provides a framework for creating a custom field;
• MB Views: create a template for displaying and counting related posts;
• Meta Box Builder: have a UI on the back end for visually creating custom fields to save the related posts.

In the case that you want to display related content in the post of any 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 skip this extension.

Now, let’s go step by step.

Creating a custom field for related posts

I’ll add related posts to my blog posts, so I'll create the field without any extra steps. As mentioned earlier, if you're adding these related posts to posts in a custom post type, you'll need to create that post type first, and then create a custom field for it.

For illustration purposes of this practice only, I’ll set up a field to add multiple related posts like this.

Now, go to Meta Box > Custom Fields and create a new field group.

Add a field in the type of Post. This field type allows you to choose more than one post from a regulated post type. So that, you can use it to choose several posts, then we can see them as related posts.

You should configure this field a little bit.

Specifically, 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 setting can be chosen.

Next, 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.

Additionally, you should turn on the Multiple option if you want to allow users to add more than one related post.

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.

Go to the post editor, you will see the created field.

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

Just choose some of them from the list.

Displaying related posts

Before counting the number of posts, we need to display them first. Head over to Views in Meta Box and create a new view for its template.

With MB Views, you can add some lines of code to the Template tab or insert fields into it by clicking the Insert Fields button, and choose any fields on the right sidebar to get data from them.

In this case, insert the created field, and its suitable output.

Then, it will automatically generate code to the template.

As we have many posts input in the fields, we have a loop, as shown in the image above. It will list all the related posts that are added into the custom fields.

After that, 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.

Then, you’ll see the related posts section in every post.

Next, we will add some numbers to this section to let audiences know the total number of related posts.

Counting the related posts in the list with bullet points

Back to the template, I add a variable, {{ loop.index }}, to automatically number each related post in the list. This helps track and display the order of each post.

Moving on to the frontend, you’ll see the related posts listed with numbered bullet points. This makes it easy for readers to see how much associated content they can explore.

Moreover, if you update the custom field, the list will automatically refresh to reflect those changes, ensuring your content stays up-to-date and engaging.

Counting posts in total

Still in the created template, remove the {{ loop.index }} variable first.

And, add a few lines of code.

{% set total_related_post =  mb.count(post.related_posts) %}
<b>Total Related Post:</b> {{ total_related_post }}

Explanation:

• The total_related_post variable: represents the number of posts selected in the Post field with ID as related_posts. Then, I use the count function, mb.count, to calculate the total number of posts from that field.

• <b>Total Related Post:</b> {{ total_related_post }}: display the number of posts that have been counted above.

Now, you'll see the total number of related posts displayed, giving you a clear insight into the content available.

If you want to learn more about displaying related posts in a dynamic way, check out our tutorial on displaying related posts based on a shared relationship or explore how to add related posts with Meta Box.