How to Display Related Posts Based on a Shared Relationship with Meta Box

When developing a website for the event, I realized that helping readers easily find related events, artists, or sessions without searching manually is very useful. This approach is particularly useful when you want to showcase related events, products within the same category, or other articles by the same authors or contributors. After some trials, I found an effective solution with the relationship feature from Meta Box, and I'm excited to share it with you!

In this example, I’ll show events linked to the same artist on a single event page like this:

Video Version

Before Getting Started

In this practice, we’ll have two separate custom post types: Events and Artists. Also, we will create a bi-directional relationship between them, then show events linked to the same artist on a single event page.

To get started, we need the Meta Box core plugin, which provides a framework to create custom post types and relationships. You can download it directly from wordpress.org.

We'll need some extensions for the advanced features. You can install them individually or use Meta Box AIO to have them all.

Here are some needed extensions:

• MB Custom Post Type: to create custom post types for the events and artists;
• MB Relationships: to create relationships between these post types;
• MB Admin Columns (optional): to display the related events and related artists in the dashboard;
• Meta Box Builder: to have the UI to create the relationship in an intuitive way. In addition, if you want to add extra information about the events and artists, you also can use this extension to create custom fields to store that kind of data. In this practice, I don’t use it to create custom fields to make it more simple.

Create New Custom Post Types

Go to Meta Box > Post Types to create a new custom post type for the artists and another one for events.

After publishing, you’ll see the created custom post types in the admin dashboard.

Now, we can add some posts for each post type.

Then, let's create a relationship between the events and artists.

Create the Relationship

Go to Meta Box > Relationships to create the relationships between the Events and Artists post types.

You can enter all the settings for the relationship and each side of it in the From and To sections.

Because we’re setting the relationship between two post types, set the Object type as Post in both sections.

In the Post type option, choose the post type you want to create a relationship with. The relationship is bidirectional, so you can put the post types not in order. I set the Events in the From section, and the rest is Artists.

Next, this setting is available when you activate the MB Admin Columns extension only.

Once enabled, columns will appear in the dashboard showing related events and artists.

In the Field tab, you can set the label for the relationship section that shows in the post editor.

There’ll be a box at the right sidebar to choose which Artists are related to the current post in the Events post type, and vice versa.

After publishing, go to a post editor, you can see a section like that allowing you to select several artists.

Here is my example of filling out all relationship information for events and artists.

Show Related Posts Based on a Shared Relationship

This is my single event page before this practice.

Now, I will add other events that the artist of this event also participates in, like I showed at the beginning. I named this section as Related Events.

Add a Pattern for the Related Events Section

First, go to the theme folder. I’m using the Twenty Twenty Four theme, which is a block theme, so I should add a pattern for the related event section.

Create a new .php file in the /patterns folder, then add the following code.

<?php
/**
* Title: Related events
* Slug: twentytwentyfour/related-events
* Inserter: no
*/
?>

<h2 style="font-weight:bold;">Related Events</h2>

<?php

$current_id = get_the_ID();
$connected = new WP_Query( [
    'relationship' => [
        'id'      => 'event-to-artist',
        'from'    => get_the_ID(),
    ],
] );

$atist_related = [];
while ( $connected->have_posts() ) :
    $connected->the_post();
    $atist_related[] = get_the_ID();
endwhile;

$events_related = [];
foreach ( $atist_related as $id_atist ) :
    $connected1 = new WP_Query( [
        'relationship' => [
            'id'      => 'event-to-artist',
            'to'      => $id_atist,
        ],
    ] );
    while ( $connected1->have_posts() ) :
        $connected1->the_post();

        $events_related [get_the_ID()] = get_the_title();
    endwhile;
endforeach;

unset($events_related[$current_id]);

?>

<?php foreach ( $events_related as $key => $value ) : ?>
    <li><a href="<?php the_permalink($key); ?>"><?php echo $value; ?></a></li>
<?php endforeach;?>

Let’s break down the code:

Get ID of the Current Post

I created a new variable to get the ID of the current post.

$current_id = get_the_ID();

Query to Get Related Artists

This query is to get posts from the relationship.

$connected = new WP_Query( [
    'relationship' => [
        'id'      => 'event-to-artist',
        'from'    => get_the_ID(),
    ],
] );

• event-to-artist: the ID of the created relationship;
• 'from'      => get_the_ID(),: query to get ID of the posts (means artists) connected with the current post (event).

I also created an empty array $atist_related = [];. It will be used to store the returned ID of all the artists who are related to the current post as set in the relationship field.

$atist_related = [];
while ( $connected->have_posts() ) :
    $connected->the_post();
    $atist_related[] = get_the_ID();
endwhile;

I did a double check to make sure that there is any returned ID from the query, then push them into the array.

Query to Get Related Events

This part is to get the related event posts that have the same artists with the current post.

So, I created another array, $events_related = [];. Then, loop through each artist ID in the $artist_related array to query events related to that artist.

$events_related = [];
foreach ( $atist_related as $id_atist ) :
    $connected1 = new WP_Query( [
        'relationship' => [
            'id'      => 'event-to-artist',
            'to'      => $id_atist,
        ],
    ] );
    while ( $connected1->have_posts() ) :
            $connected1->the_post();

        $events_related [get_the_ID()] = get_the_title();
    endwhile;
endforeach;

You can see that , I use the following syntax once again to query events related to the current artist ID using the relationship.

$connected1 = new WP_Query( [
    'relationship' => [
        'id'      => 'event-to-artist',
        'to'      => $id_atist,
    ],
] );

Pay attention that, there is a difference when you query the artists and the events using the relationship.

When we created the relationship, there were two sections named From and To. If you set the Event post type in the From section, you should set ‘from’ to get all the artists related to the event. Otherwise, set ‘to’ to get all the events related to the artist.

Afterward, since I get all the posts related to the artists, it might include the current post. This post should not be displayed in the section, so we need to remove it from the array.

unset($events_related[$current_id]);?>

Display the Related Posts

Finally, it’s the part displays each related event with the permalink and title.

<?php foreach ( $events_related as $key => $value ) : ?>
    <li><a href="<?php the_permalink($key); ?>"><?php echo $value; ?></a></li>
<?php endforeach;?>

So, we’ve done the pattern for the section.

Include Pattern to the Template

Move on to the template of the single page. Choose a place to include the pattern.

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"padding":{"bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:pattern {"slug":"twentytwentyfour/related-events"} /-->
</div>
<!-- /wp:group →

That’s all. All the code is updated on Github for your reference.

Go to the frontend, you can see that there are some posts displayed in the related events section on each single event post. It also works well when you check on another post.

Last Words

By connecting related posts based on a shared relationship, like related events featuring the same artist, you make it easier for your audience to explore content that interests them. If you simply want to display related content using bi-directional relationships, take a look at this guide for detailed instructions. Thanks for reading!