Meta Box Reciprocal Relationship in Bricks

In one of the previous tutorials, we took a detailed look at Meta Box Relationship in Bricks.

This Pro tutorial provides the steps to display items (can be posts of any post type) that are connected to the current single item via a Reciprocal Meta Box relationship in Bricks.

A reciprocal relationship connects an item to one or more items of the same post type.

Use case: For showing related posts of the same post type when a single post page is being viewed.

Relationship:

A sample post being connected to two other posts:

When any of these reciprocal posts is edited, we could see that it is connected to Hello world! post.

After implementing the tutorial, when viewing the Hello world! post on the front end:

We shall ensure that the

  • Related Posts section gets output only if there is at least 1 reciprocal/connected post for the current post.
  • The heading reads "Related Post" when there is 1 connected post and "Related Posts" when there is more than 1 connected posts.

Step 1

Install and activate Meta Box and Meta Box AIO plugins.

Step 2

Go to Meta Box → Relationships.

Add a new relationship.

Tick "Reciprocal relationship".

Select the same Post type in From and To sections.

Publish.

Step 3

Edit your posts and select the connected posts for each.

Step 4

Create (if not present) a template for single posts of your post type and edit it with Bricks.

Below the Section that contains possibly Post Title and Post Content, add a new Section and inside that, set up a query loop. Select the Post type. Set Posts per page to a large number that is higher than the maximum number of published posts that could ever exist in your site.

Set the Heading element's text to be singular. Ex.: Related Post.

We are going to later programmatically append s if there is more than 1 connected post.

Next, we need to limit the posts to only the connected posts.

Step 5

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro