How to Create a Team Members Page - P6 - using Meta Box and Breakdance
Tags: tutorial, customfields, dynamicdata, breakdance
Published: 2023-02-14 01:55:59

In this series - <a href="https://metabox.io/series/team-members/">Creating a team members page</a>, we’ve done some methods with different page builders. Today, we’ll introduce a way to do it using <strong>Meta Box</strong> and <strong>Breakdance</strong>.

<!--more-->

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

<img class="aligncenter" src="https://i.imgur.com/goSGSGz.png" alt="Example of the team members page" width="1000" height="774" />
<h2>Video Version</h2>
https://youtu.be/r_9efMiekR0
<h2>Before Getting Started</h2>
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.

<img class="aligncenter" src="https://i.imgur.com/FbE73YE.png" alt="Each member will be a post in a custom post type" width="1003" height="774" />

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:
<ul>
 	<li><a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>: to have the framework for creating custom post type and custom fields.</li>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type</a>: to create custom post type for the team members;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to provide a UI in the backend to create custom fields easily;</li>
 	<li><strong>Breakdance</strong>: to build the page.</li>
</ul>
<h2>Create a New Post Type</h2>
Go to <strong>Meta Box </strong>&gt; <strong>Post Types</strong>, then create a new post type for the members.

<img class="aligncenter" src="https://i.imgur.com/BgsY0i9.png" alt="Create a new post type" width="1000" height="664" />
<h2>Create Custom Fields</h2>
Go to <strong>Meta Box </strong>&gt; <strong>Custom Fields </strong>&gt; <strong>Add New</strong> to create a new field group.

Here are the fields that I created:

<img class="aligncenter" src="https://i.imgur.com/cfyYUzq.png" alt="Create custom fields" width="1000" height="468" />

We have <a href="https://youtu.be/_DaFUt92kYY">a tutorial on how to create custom fields</a>, you can refer to it for more information.

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

<img class="aligncenter" src="https://i.imgur.com/qy9g8bu.png" alt="Choose the Select field for the position information" width="1000" height="674" />

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

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

<img class="aligncenter" src="https://i.imgur.com/mkhjbnG.png" alt="Set the location for the created fields" width="1000" height="527" />

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

<img class="aligncenter" src="https://i.imgur.com/EZGDIZU.png" alt="Created fields appear in the Post Editor" width="1008" height="823" />

Then, just fill in the information.
<h2>Create a Global Block</h2>
Now, let’s create a global block to get and display the team member's information. Go to <strong>Breakdance</strong> &gt; <strong>Global Blocks</strong> and create a new one.

<img class="aligncenter" src="https://i.imgur.com/q4vbE3W.png" alt="Create a Global Block" width="1000" height="725" />

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.

<img class="aligncenter" src="https://i.imgur.com/uOLqALH.png" alt="Add a Div for the name card" width="1000" height="423" />

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.

<img class="aligncenter" src="https://i.imgur.com/Z4awhW7.png" alt="Each name card has 2 columns" width="800" height="436" />

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

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

<img class="aligncenter" src="https://i.imgur.com/wNYiatD.png" alt="Add a Post Featured Image element for the avatar" width="1000" height="354" />

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

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

<img class="aligncenter" src="https://i.imgur.com/XH98BNV.png" alt="Select an Icon element to create the social network's icon" width="1000" height="486" />

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

<img class="aligncenter" src="https://i.imgur.com/g9wolyK.png" alt="Insert the dynamic data into the Icon element" width="1000" height="527" />

Take the member's Facebook profile as an example:

<img class="aligncenter" src="https://i.imgur.com/aLmC3mH.gif" alt="Take the Facebook profile as an example" width="1000" height="563" />

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 <strong>Heading</strong> element then insert dynamic data for this element by choosing the <strong>Post Title</strong> option in the <strong>Post</strong> section. You see that the member’s name has just been obtained already.

<img class="aligncenter" src="https://i.imgur.com/s3edGgq.gif" alt="Choose the Heading element then insert dynamic data" width="1000" height="563" />

For the position information, add a <strong>Text</strong> 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 <strong>Metabox</strong> section. Then, you’ll see the member’s position appear.

<img class="aligncenter" src="https://i.imgur.com/FXgXeOC.gif" alt="Add a Text element for the position information" width="1000" height="563" />

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

<img class="aligncenter" src="https://i.imgur.com/HRl7yeL.gif" alt="Choose Text element to get a short description of the element" width="1000" height="563" />

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

<img class="aligncenter" src="https://imgur.com/PcCfICY.png" alt="All the information has been obtained" width="1000" height="560" />
<h2>Style the Global Block</h2>
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.

<img class="aligncenter" src="https://i.imgur.com/8eYqkaS.png" alt="Style the global block" width="1000" height="562" />
<h2>Create the Page</h2>
Now, create a new page, and edit it with <strong>Breakdance.</strong> First, add a section to contain all the information of the team members.

<img class="aligncenter" src="https://i.imgur.com/WA9527P.png" alt="Create a page" width="1000" height="429" />

Then, add a heading to name it.

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

<img class="aligncenter" src="https://i.imgur.com/xlwmOEz.png" alt="Choose a Post Loop Builder element to displayed the wanted posts" width="1000" height="558" />

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

<img class="aligncenter" src="https://i.imgur.com/ofG6plR.png" alt="Edit the query" width="1000" height="511" />

<strong>In there</strong>:
<ul>
 	<li>In the <strong>Source</strong> 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.</li>
 	<li>In the <strong>Post</strong> <strong>per page</strong> section, enter the number to limit the number of posts you want to display on this page.</li>
</ul>
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.

<img class="aligncenter" src="https://i.imgur.com/FbE73YE.png" alt="The final result" width="1003" height="774" />
<h2>Last Words</h2>
Is it so easy to create the team members' page using <strong>Meta Box</strong> and <strong>Breakdance</strong> 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.