How to Create a Team Members Page - P3 - Using Meta Box and Bricks
Tags: tutorial, metabox, bricks, customfields
Published: 2022-06-29 05:36:32


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfy6iseg0aahymf9j9th.jpg)
In <a href="https://metabox.io/series/team-members/">this series</a>, we’ve gone through some methods with different page builders to create a page. Today, we’ll introduce a way with another page builder - <strong>Bricks - to create a Team Members page</strong>. Let’s explore how it does!
<h2>Video Version</h2>
https://youtu.be/h07sZBTGTDQ
<h2>Before Getting Started</h2>
As in the previous tutorials in this series, we use the same demo for the page as follows.

<img class="aligncenter" src="https://i.imgur.com/RJ9eO0k.png" alt="Sample for the Team Members Page with Meta Box and Oxygen" width="1000" height="562" />

Each member’s information will be saved in a post and also displayed as a name card on the page. Each one will have 2 columns with the border and icons for social contacts. All information about each member such as Position, Facebook, Instagram, and Mail will be saved in custom fields. Name and image of the member are the title and featured image of the post.

To have custom post types and custom fields for saving information, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a>. It’s free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org.</a>

For more advanced features, we should use the following extensions. If you haven’t had them, you can install them individually or use the Meta Box AIO to have them all.
<ul>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Type &amp; Custom Taxonomies</a>: to create custom post types for members.</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have an intuitive UI to create custom fields in the backend.</li>
</ul>
About the last one, we use <a href="https://bricksbuilder.io/">Bricks</a> for this practice, make sure that you’ve activated the Bricks theme.
<h2>Step 1: Create a New Custom Post Type</h2>
Go to <strong>Meta Box</strong> &gt; <strong>Post Types</strong> &gt; <strong>New Post Type</strong>.

<img class="aligncenter" src="https://i.imgur.com/Nywe9kt.png" alt="Create a new custom post type for the Team Members" width="1000" height="584" />

After publishing, you will see your new post type displayed on the admin dashboard.

<img class="aligncenter" src="https://i.imgur.com/pjgDm93.png" alt="The result appears after creating." width="1000" height="630" />

In the event you want to find more details on how to create a custom post type and advanced settings for the post type. You can refer to <a href="https://www.youtube.com/watch?v=_DaFUt92kYY&amp;list=PLIWLX0sDr8lT6XHPqwiPlK1lgONQEOKpQ">this video</a> for more information.
<h2>Step 2: Create Custom Fields for the Post Type</h2>
Let’s create custom fields to save extra members’ information. Go to <strong>Meta</strong> <strong>Box</strong> &gt; <strong>Custom Fields</strong> &gt;<strong> Add New</strong>.

For the member’s information, I’ll use the following types:
<table style="height: 134px;" width="543">
<tbody>
<tr>
<td><b>Fields</b></td>
<td><b>Type</b></td>
<td><b>Note</b></td>
</tr>
<tr>
<td>Position</td>
<td>Select</td>
<td>To provide some options for users to choose instead of typing</td>
</tr>
<tr>
<td>Facebook / Instagram / Mail</td>
<td>URL</td>
<td>To save the link of the social profiles</td>
</tr>
</tbody>
</table>
<img class="aligncenter" src="https://i.imgur.com/t3JZZ3b.png" alt="Create customs field for Team Members" width="1005" height="691" />

After finishing creating the fields, move to the <strong>Settings tab</strong>. In the <strong>Location</strong> section, select <strong>Post Types</strong> as <strong>Team Members</strong> to apply these fields to the post type.

<img class="aligncenter" src="https://i.imgur.com/uh6ZzrP.png" alt="set location for the custom field as the created post type" width="1000" height="692" />

Finally, go to the post editor, and you will see your created custom fields appear.

<img class="aligncenter" src="https://i.imgur.com/ZNScdEe.png" alt="the custom fields display in the post editor" width="1005" height="600" />
<h2>Step 3: Create a Team Members Page using Bricks</h2>
Move to <strong>Pages</strong> &gt; <strong>Add New</strong> to create a new page. After updating, select <strong>Edit with Bricks</strong>.

<img class="aligncenter" src="https://i.imgur.com/wz7nqeq.png" alt="create a new template for the team members page" width="1000" height="600" />

First, add a new container element to cover all the team members’ information.

<img class="aligncenter" src="https://i.imgur.com/9ZvykU1.png" alt="Add a new container element to cover all the team members’ information" width="1000" height="306" />

Then, add a <strong>Heading</strong> element to display the title of the page and fill in the name of the page on it.

<img class="aligncenter" src="https://i.imgur.com/OhndX3Z.png" alt="Add a heading element to display the title of the page and fill in the name of the page" width="1000" height="309" />

To get all the posts, we have the <strong>Posts</strong> element and <strong>Related Posts</strong> element. The <strong>Posts</strong> show posts along with filters and navigation, but the <strong>Related Posts</strong> does not. So I choose the Related Posts element.

<img class="aligncenter" src="https://i.imgur.com/ne8hdSl.png" alt="Choose the Related Posts element to get all the posts" width="1000" height="520" />

When adding the <strong>Related Post</strong> element, a list of blog posts will be displayed in default. Since we need the posts in the <strong>Team Member</strong> post type instead of blog posts, go to the <strong>Query</strong> section of the Related Posts element and change the post type to <strong>Team Member</strong> to get the wanted post.

<img class="aligncenter" src="https://i.imgur.com/dVomurP.png" alt="go to the Query change the post type to Team Member to get the wanted post" width="1001" height="520" />

To change the information that you want to display in each post, move to the <strong>Fields</strong> section. There is the Post Title, Published Date, and Post Excerpt in default. Remove the one you don’t want to display.

<img class="aligncenter" src="https://i.imgur.com/lSZA7aH.png" alt="Remove options in fields section to change the information that you want to display in each post" width="1001" height="512" />

Next, add a new field and insert the dynamic data from the custom fields by clicking <strong>Add Item</strong> &gt; Insert <strong>Dynamic Data</strong> and find the wanted fields. First, I choose the <strong>Position</strong>. Then, the position of each member will display in the preview immediately.

<img class="aligncenter" src="https://i.imgur.com/SxVeXby.gif" alt="Add Item &gt; Insert Dynamic Data to add a new field and insert the dynamic data from the custom fields." width="1000" height="562" />

For other information like Facebook, Instagram, and Mail, simply do the same. Be noted that, when inserting dynamic data, it just displays them as text. To set them as URLs, you should add an attribute to these fields as below.

<img class="aligncenter" src="https://i.imgur.com/qPXI8vu.gif" alt="To set information as URLs, you should add an attribute to these fields" width="1000" height="562" />

What’s more, the description of each member is the content of the post. So, we just need to add a <strong>Post Content</strong> field.

Now, all the information of the members has been obtained.

<img class="aligncenter" src="https://i.imgur.com/gt7XfwX.png" alt="we just need to add a Post Content field, as the description of each member is the content of the post" width="1000" height="593" />

Let’s style the page in the next step.

However, because Bricks does not support adding classes for each element, you should use the <strong>HTML tag</strong> for styling. You can set elements in different levels of HTML tag such as: H1, H2, H3, div, p, … That will help a lot for SEO as well.

<img class="aligncenter" src="https://i.imgur.com/bNCoekt.png" alt="use the HTML tag for styling" width="1000" height="484" />
<h2>Step 4: Style the Page</h2>
Still in the page editor with Bricks, move to the <strong>Style</strong> section of each element to change the look of them.

<img class="aligncenter" src="https://i.imgur.com/uoFV9zq.png" alt="move to the Style section of each element to change the look of them" width="1000" height="396" />

For more advanced styling, you may use some CSS codes as I did.

<img class="aligncenter" src="https://i.imgur.com/1cEFnl7.png" alt="For more advanced styling, use some CSS codes" width="1000" height="590" />

I placed all of the code on <a href="https://github.com/wpmetabox/tutorials/blob/master/create%20a-team-members-page-with-bricks/custom.css">Github </a>so you can look it up for further information.


Now, go to see the result on the frontend.

<img class="aligncenter" src="https://i.imgur.com/RJ9eO0k.png" alt="Result of Team Members Page on the frontend." width="1000" height="562" />
<h1>Last words</h1>
We’ve already finished creating a Team Members Page using Meta Box and Bricks. Let’s try it out and share the results in the comment section. Please keep track of our channel because we’ll be updating with more useful tutorials.