Skip to main content

Displaying related posts based on a shared relationship with Meta Box

Today, we’re going to create and display related posts in a single post based on a shared relationship with Meta Box. This can be applied to various scenarios, such as showing related events connected to the same artists, related products within the same category, or additional articles by the same author.

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

Show events linked to the same artist on a single event page

Video version​

Preparation​

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.

These are some tools we need for this tutorial:

  • The Meta Box core plugin: provide a framework to create custom post types and relationships;
  • 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.

1. Creating 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.

Go to Meta Box to create new custom post types for the artists and events.

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

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.

2. Creating the relationship​

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

Create the relationships

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

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.

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.

In the Post type option, choose the post type to create a relationship with

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

The setting enables to show a columns in the dashboard

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

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.

In the Field tab, you can set the label for the relationship section.

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.

A section allow you choose which Artists are related to the current post in the Events post type

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

Select several artists

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

All relationship information for events and artists

This is my single event page before this practice.

Single event page

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.

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.

Go to the theme folder

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;?>

Create a new php file, then add some code

Let’s break down the code:

3.1.1 Getting ID of the current post​

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

$current_id = get_the_ID();

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.

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 artist and the event 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.

A difference when you query the artist and the event using the relationship

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]);?>

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.

3.2 Including 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 →

Choose a place to include the pattern

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.

There are some posts displayed in the related events section on each single event post

If you simply want to display related content using bi-directional relationships, take a look at this guide for detailed instructions. Thanks for reading!