In this series - Creating a team members page, we’ve done some methods with different page builders. Today, we’ll introduce a way to do it using Meta Box and Breakdance.

This is a sample we’ll use for this practice:

Example of the team members page

Video Version

Before Getting Started

In this case, each member will be a post in a custom post type and will be displayed in a name card as a box, like in the below image. It is created as a global block in Breakdance.

Each member will be a post in a custom post type

In the name card, the name and the avatar of the member are the title and the featured image of the post. Other information such as position, Facebook, Instagram, and Mail will be saved in different custom fields created by Meta Box.

For this practice, we need some tools:

  • Meta Box core plugin: to have the framework for creating custom post type and custom fields.
  • MB Custom Post Type: to create custom post type for the team members;
  • Meta Box Builder: to provide a UI in the backend to create custom fields easily;
  • Breakdance: to build the page.

Create a New Post Type

Go to Meta Box > Post Types, then create a new post type for the members.

Create a new post type

Create Custom Fields

Go to Meta Box > Custom Fields > Add New to create a new field group.

Here are the fields that I created:

Create custom fields

We have a tutorial on how to create custom fields, you can refer to it for more information.

For the position information, choose the Select field that allows us to set some options to choose from.

Choose the Select field for the position information

For other information such as Facebook, Instagram, and Mail, we set them as the URL field to save the link for those social networks.

After creating all the fields, move to the Settings tab > Location > choose Post Type as the Team Members post type to apply these fields to it.

Set the location for the created fields

Now, go to the post editor, you will see the created custom fields.

Created fields appear in the Post Editor

Then, just fill in the information.

Create a Global Block

Now, let’s create a global block to get and display the team member's information. Go to Breakdance > Global Blocks and create a new one.

Create a Global Block

Remember to set the preview for the global block as a post in the Team Members custom post type.

My global block is to display the information of each member on a name card. First, we'll add a div for this name card.

Add a Div for the name card

In this tutorial, each name card has 2 columns. One is to display the avatar and social icons. Another is to display the member information.

Each name card has 2 columns

To divide the content into 2 columns, I’ll add 2 new divs. Each one for each column.

In the first column, add a Post Featured Image element to have the avatar saved as the post's featured image.

Add a Post Featured Image element for the avatar

Next, we’ll create another div inside this column to contain all the social networks.

Now, select an Icon element to create the social network’s icon. Then, choose the icon's shape.

Select an Icon element to create the social network's icon

As the social links are saved in custom fields, we’ll insert the dynamic data into the Icon element. To do it, click the icon shown in the image below and choose the right field in the Metabox section.

Insert the dynamic data into the Icon element

Take the member's Facebook profile as an example:

Take the Facebook profile as an example

For the Instagram and Mail information, do likewise.

Move to the second column, to get the name of the member, it’s the post title, so choose the Heading element then insert dynamic data for this element by choosing the Post Title option in the Post section. You see that the member’s name has just been obtained already.

Choose the Heading element then insert dynamic data

For the position information, add a Text element. As the position is saved in the custom field created by Meta Box, we’ll insert the dynamic data into this element. Also, click the icon as we did before and choose the corresponding field name in the Metabox section. Then, you’ll see the member’s position appear.

Add a Text element for the position information

To get a short description of the member, also choose the Text element and then choose the Post Content option in the Post section.

Choose Text element to get a short description of the element

We have just displayed all the wanted information from a team member on the name card.

All the information has been obtained

Style the Global Block

Go back to the created global block. Then, customize each element to get the wanted display.

After styling, you’ll see the new look of the name card, which contains each team member’s information.

Style the global block

Create the Page

Now, create a new page, and edit it with Breakdance. First, add a section to contain all the information of the team members.

Create a page

Then, add a heading to name it.

To display the wanted posts, which means for the team members’ information, choose a Post Loop Builder element. In the Global Block section of this element's settings, choose the global block which has just been created.

Choose a Post Loop Builder element to displayed the wanted posts

To stipulate the source of data and the team members you want to display, go to the Query section > Custom, then edit the query like this.

Edit the query

In there:

  • In the Source data, it’ll be automatically set as the Post Types, then choose the name of the team members you want to get the post from.
  • In the Post per page section, enter the number to limit the number of posts you want to display on this page.

After applying the query, the team members’ information has just been obtained.

Now, I’ll set the layout for this page. Then, all of the team members’ information is displayed as I want.

The final result

Last Words

Is it so easy to create the team members' page using Meta Box and Breakdance without coding, right?

If you think this practice is helpful, try it out and share the results with us. And, don’t forget to follow our channel.

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 a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Author in WordPress using Meta Box (Part 1)
  13. How to Add Guest Author in WordPress using Meta Box (Part 2)
  14. How to Add Related Posts to WordPress Using Meta Box
  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 Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page using Meta Box Plugin
  25. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  26. How to Create a Recipe - P3 - Using Meta Box and Elementor
  27. How to Create a Recipe - P4 - Using Meta Box and Bricks
  28. How to Create a Recipe - P5 - Using Meta Box and Zion
  29. How to Create a Recipe - P6 - Using Meta Box and Brizy
  30. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  31. How to Create a Recipe with Meta Box Plugin
  32. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  33. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  34. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  35. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  36. How to Create a Team Members Page - P4 - Just Meta Box
  37. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  38. How to Create a Video Gallery Page Using Meta Box + Oxygen
  39. How to Create ACF Flexible Content Field with Meta Box
  40. How to Create an Auto-Updated Cheat Sheet in WordPress
  41. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  42. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  43. How to Create an FAQs Page -P3- Using Meta Box
  44. How to Create Buttons with Dynamic Link using Custom Fields
  45. How to Create Category Thumbnails & Featured Images Using Custom Fields
  46. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  47. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  48. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  49. How to Create Online Admission Form for School or University
  50. How to Create Online Reservation Form for Restaurants using Meta Box
  51. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  52. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  53. How to Display Images from Cloneable Fields - P2 - with Oxygen
  54. How to Display Images from Cloneable Fields - P3 - with Elementor
  55. How to Display Images from Cloneable Fields - P4 - with Bricks
  56. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  57. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  58. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  59. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  60. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  61. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  62. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  63. How to Display the Most Viewed Posts - P1 - using MB Views
  64. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
  65. How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
  66. How to Manually Reorder Posts with Meta Box
  67. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  68. How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
  69. How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
  70. How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
  71. How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
  72. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply

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