If you want to create a relationship between two objects on your website, the MB Relationships from Meta Box can help you. In this practice, we’ll create a bi-directional relationship between Courses and Instructors post type for example. In addition, we also display them on the page with the help of Bricks Builder.

Here is an archive page I created. It includes courses and the name of instructors who contributed to each course.

archive page shows courses and the name of instructors who contributed to each course

Video Version

Before Getting Started

We have two separate custom post types: Courses and Instructors. In this case, the relationship is to link the courses to their instructors, and also link each instructor to the courses to which they contributed. This bi-directional relationship will be shown on the both singular page of each post type and the archive page for Courses.

So, we need the Meta Box core plugin to have a framework to create custom post types, custom fields, and relationships. You can download it directly from wordpress.org.

Moreover, we need some Meta Box extensions for the advanced features:

  • MB Custom Post Type: to create custom post types for the courses and instructors;
  • MB Relationships: to create relationships between these post types;
  • Meta Box Builder: to have an intuitive UI on the backend to create custom fields and relationships;
  • MB Admin Columns (optional): to display the related courses and related instructors in the dashboard.

You can install these extensions individually or use Meta Box AIO to have them all.

The last one is Bricks to build the pages.

Create the Custom Post Types

Go to Meta Box > Post Types to create a new post type for the instructors, and another one for courses.

Go to Meta Box, Post Types to create a new post type for the instructors, and courses

Then, you will see new menus displayed in the Admin Dashboard. They’re your post types.

Custom post types display in the Admin Dashboard

Create Custom Fields

If you want to add some custom fields for each post type to save some extra information about the courses or the instructors, just go to Meta Box > Custom Fields to create fields as usual. In this practice, I just add some fields for the courses.

go to Meta Box, Custom Fields to create custom fields

After creating all the wanted fields, go to the Settings tab, set the Location as Post type, and select the post type you want to apply the fields to it.

go to the Settings tab, set the Location as Post type, and select the post type you want to apply the custom fields to it

Create Relationships

Go to Meta Box > Relationships to create the relationships between the Courses and Instructors post types.

Go to Meta Box, Relationships to create the relationships between the Courses and Instructors post types

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

enter all the settings for the relationship and each side of it in two sections

In this practice, the relationship is bidirectional so you can put the post types not in order. Beside that, because they are post types, set the Object Type as Post in both two sections.

set the Object Type as Post in both two sections

In the Post type option, choose the post type you want to create a relationship. For example, I set the Instructor in the From section, and the other is the Course.

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

Because I activated the MB Admin Columns extension before, I have this option in both two sections of the relationship’s settings.

show as an admin column option in both two sections of the relationship’s settings

I set it to show which courses are related to an Instructor and vice versa.

when you check the option, you can see which courses are related to an Instructor

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

In the Field tab, set the label for the relationship section in the post editor

There’ll be a box at the right sidebar to choose which instructor is related to the current post in the Course post type and vice versa. It displays as a field, this will make sense when you get posts from this field in the next step.

the box as a field at the right sidebar to choose which instructor is related to the current post in the Course post type

After publishing, go to a post editor and you can choose more than one course in the Related Course section.

you can choose more than one course in the Related Course section

It’ll be the same when you add related instructors for a course.

In the dashboard, all the information will display like this.

all the information displays

Display the Relationship

In this practice, we’ll display this relationship on both singular pages of the Course post type and Instructor post type; and on the archive page where all the courses are listed.

Display the Relationship on the Singular Page of Instructors

This is an example of the Instructor post type. It shows detailed information about one instructor and the courses related to it.

example of the Instructor post type shows detailed information about one instructor and the courses related to it

Go to Bricks > Templates > Add New to create a new one.

Go to Bricks, Templates, Add New to create a new one

On the right sidebar, choose the Template type as Single, then edit it with Bricks.

choose the Template type as Single, then edit it with Bricks

Go to the settings of this template, set a condition to assign this one to the Instructor post type.

Go to the settings of this template, set a condition to assign this one to the Instructor post type.

And also set a preview for it in the Populate content section.

set a preview for it in the Populate content section

Add a Section to have a Container covering all the page content.

Add a Section to have a Container covering all the page content

Add a Post Title element to display the name of the instructor.

Add a Post Title element to display the name of the instructor.

To get a description of the instructor, add the Post Content element.

To get a description of the instructor, add the Post Content element

For the section displaying all of the courses related to an instructor, add some Div elements to set the layout.

For the section displaying all of the courses related to an instructor, add some Div elements to set the layout

To display the courses which are chosen in the Related Course field, we should use the query loop in this Div.

To display the courses which are chosen in the Related Course field, we should use the query loop in this Div

Normally, we set the Type as Posts to get posts in the post type we want. However, in this case, we want to show posts that are set in the relationship, so it’s different. You’ll see an option is ‘MB Relationship’ along with the name of the relationship you created before. Choose it.

set the Type as MB Relationship along with the name of the relationship you created before

Then, just add elements to display the course information.

First, add an Image element.

add an Image element

And select dynamic data as the Featured image to get the featured image of the post.

select dynamic data as the Featured image to get the featured image of the post

Next, add the Post Title element to get the title of courses.

add the Post Title element to get the title of courses

Then, I use the Rich Text element to display extra information about the courses.

Rich Text element to display extra information about the courses

The information is saved as custom fields of Course in Meta Box, so click on the dynamic data button and choose the corresponding field in the dropdown list.

click on the dynamic data button and choose the corresponding custom field from Meta Box in the dropdown list

For other information, do the same. Duplicate the Rich Text element and change the corresponding fields.

Duplicate the Rich Text element and change the corresponding fields to get and dispaly other information

All the information is displayed like this.

All the information is displayed

Now, you can go back to the template and style each element to get the new look you want. This is my page after styling.

the final look of the singular page of instructor

Display the Relationship on the Singular Page of Courses

Let’s create a singular page of the Course post type and show the instructor who contributed to each course. It uses the relationship we created.

singular page of the Course post type and show the instructor who contributed to each course

Also create another template for the course. Do likewise with the singular page of the Instructor.

Create course template and set the condition likewise with instructor template

Add a Section element for the page.

Add a Section element for the page

To display course information, we’ll add some elements to get information from featured images and custom fields. We also use dynamic data as usual.

add some elements to get information from featured images and custom fields, also use dynamic data

Lastly, to display information about the related instructor, add a Div element.

to display information about the related instructor, add a Div element

In this Div tag, set a query for it to get and display the instructor related to the course only. Similar to the Instructor singular page, I also set the Type of this query as MB Relationship along with the name of the relationship we created.

enable query loop and set the Type of this query as MB Relationship

Then, add some elements to display instructor information.

Use the Heading element to have the Instructor heading.

Use the Heading element to have the Instructor heading

And, add the Post Title to get the name of the instructor.

add the Post Title to get the name of the instructor

If you want to set a hyperlink for the instructor’s name to link to the Instructor's singular page, just enable this button.

enable button to set a hyperlink for the instructor’s name to link to the Instructor's singular page

Sometimes, you can see the information incorrectly displayed. Don’t worry, everything will be right on the frontend.

the final look of the singular page of course

Display the Relationship on an Archive Page

We’ll create an archive page showing all the courses. On the page, we also display the instructor who contributed to each course.

archive page showing all the courses and display the instructor who contributed to each course

Go to Pages > Add New to create a new page as usual and edit it with Bricks.

Go to Pages > Add New to create a new page as usual and edit it with Bricks.

Add a Section to cover the page.

Add a Section to cover the page

Then, add the Heading element to display the title of the page.

add the Heading element to display the title of the page

Inside the Container, add a Div element to get the layout to cover all of the courses.

Inside the Container, add a Div element to get the layout to cover all of the courses.

Enable the query for the Div. And set the Type as Posts and choose Post type as Courses to display all the posts in the Course post type on this page.

Enable the query for the Div and set the Type as Posts and choose Post type as Courses to display all the posts in the Course post type on this page.

Inside the Div, let’s add some elements to get and display information about each course.

Similar to the previous part, add an Image element and select dynamic data as the featured image for courses.

add an Image element and select dynamic data as the featured image for courses

Add the Post Title.

Add the Post Title.

And Rich Text element with dynamic data to get information from custom fields for extra information about the courses.

And Rich Text element with dynamic data to get information from custom fields for extra information about the courses

Finally, for the related instructor in each course, do likewise with the Course singular page. Add a Div element.

for the related instructor in each course add a Div element

Enable the Query loop and set the Type as MB Relationship.

Enable the Query loop and set the Type as MB Relationship

Also, add elements to display instructor information.

Add the Post Title element to display the name of the instructor.

Add the Post Title element to display the name of the instructor.

Go to the front end and you’ll see the information displayed completely and exactly.

the information displayed completely and exactly

If you want to style the page, go back to the template in Bricks, and change the setting of each element. This is the final look I have after styling.

the final look of archive page

Last Words

Hopefully, all the following steps above could be useful when you want to create and display the relationship with Meta Box and Bricks. If you want to suggest any topics for tutorials, feel free to leave a comment and keep track of our blog. Best wishes!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Custom Fields to Products in WooCommerce - Using Meta Box and Bricks
  13. How to Add Guest Authors and Guest Posts - Using Meta Box
  14. How to Add Related Posts - Using Custom Fields
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  21. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  22. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box and Bricks
  24. How to Create a Product Page - P4 - Using Meta Box and Elementor
  25. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  26. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  27. How to Create a Product Page - P7 - Using Meta Box + Kadence
  28. How to Create a Product Page - P8 - Using Meta Box and Brizy
  29. How to Create a Product Page - P9 - Using Meta Box and Divi
  30. How to Create a Product Page using Meta Box Plugin
  31. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  32. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  33. How to Create a Recipe - P3 - Using Meta Box and Elementor
  34. How to Create a Recipe - P4 - Using Meta Box and Bricks
  35. How to Create a Recipe - P5 - Using Meta Box and Zion
  36. How to Create a Recipe - P6 - Using Meta Box and Brizy
  37. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  38. How to Create a Recipe - P8 - Using Meta Box and Kadence
  39. How to Create a Recipe - P9 - Using Meta Box and Divi
  40. How to Create a Recipe with Meta Box Plugin
  41. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  42. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  43. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  44. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  45. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  46. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  47. How to Create a Team Members Page - P4 - Just Meta Box
  48. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  49. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  50. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  51. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  52. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  53. How to Create a Video Gallery Page - P5 - Using MB Views
  54. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  55. How to Create a Video Gallery Page Using Meta Box + Oxygen
  56. How to Create ACF Flexible Content Field with Meta Box
  57. How to Create an Auto-Updated Cheat Sheet in WordPress
  58. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  59. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  60. How to create an FAQs page - P4 - Using Meta Box and Bricks
  61. How to Create an FAQs Page - P6 - Using MB Views
  62. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  63. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  64. How to Create an FAQs Page - P9 - Using MB Blocks
  65. How to Create an FAQs Page -P3- Using Meta Box
  66. How to Create Buttons with Dynamic Link using Custom Fields
  67. How to Create Category Thumbnails & Featured Images Using Custom Fields
  68. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  69. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  70. How to Create Download and Preview Buttons - P3 - Using MB Views
  71. How to Create Download Buttons in WordPress - Using Custom Fields
  72. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  73. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  74. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  75. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  76. How to Create Notification Using Custom HTML Field
  77. How to Create Online Admission Form for School or University
  78. How to Create Online Reservation Form for Restaurants using Meta Box
  79. How to Create Reading Time to Your WordPress Posts - Using MB Views
  80. How to Create Relationships - P1 - Using Meta Box and Oxygen
  81. How to Create Relationships - P2 - Using Meta Box and Bricks
  82. How to Create Relationships - P3 - Using MB Views
  83. How to Create Relationships - P4 - Using Meta Box and Breakdance
  84. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  85. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  86. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  87. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  88. How to Display a Video Playlist - P1- Using MB Views
  89. How To Display All Listings On A Map With Meta Box
  90. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  91. How to Display Author Bio in WordPress - P2 - Using MB Views
  92. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  93. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  94. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  95. How to Display Images from Cloneable Fields - P3 - with Elementor
  96. How to Display Images from Cloneable Fields - P4 - with Bricks
  97. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  98. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  99. How to Display Product Variations - P1 - Using Meta Box and Gutenberg

2 thoughts on “How to Create Relationships - P2 - Using Meta Box and Bricks

  1. Hi MB team, this is a very useful example.

    The only point I'd need to know is how I can display more than one instructor names per course in a simple comma-separated list. Can you please add this?

    1. It's similar to the tutorial: https://www.youtube.com/watch?v=uUz_sgcvJY8 (in 13:28)
      With Bricks, you can use Query editor (PHP) and paste this code to get the instructor, then use the Post title element to display instructor's name. Choose the Suffix as the comma.
      return [
      'post_type' => 'instructor',
      'posts_per_page'=>-1,
      'relationship' => [
      'id' => 'instructor-to-course',
      'from' => get_the_ID()
      ],
      ];

Leave a Reply

Your email address will not be published. Required fields are marked *