DEV Community

WP Meta Box Plugin
WP Meta Box Plugin

Posted on • Originally published at metabox.io

How to Create a Team Members Page - P3 - Using Meta Box and Bricks

Image description
In this series, we’ve gone through some methods with different page builders to create a page. Today, we’ll introduce a way with another page builder - Bricks - to create a Team Members page. Let’s explore how it does!

Video Version

https://youtu.be/h07sZBTGTDQ

Before Getting Started

As in the previous tutorials in this series, we use the same demo for the page as follows.

Sample for the Team Members Page with Meta Box and Oxygen

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 Meta Box core plugin. It’s free and available on wordpress.org.

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.

About the last one, we use Bricks for this practice, make sure that you’ve activated the Bricks theme.

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type.

Create a new custom post type for the Team Members

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

The result appears after creating.

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 this video for more information.

Step 2: Create Custom Fields for the Post Type

Let’s create custom fields to save extra members’ information. Go to Meta Box > Custom Fields > Add New.

For the member’s information, I’ll use the following types:

Fields Type Note
Position Select To provide some options for users to choose instead of typing
Facebook / Instagram / Mail URL To save the link of the social profiles

Create customs field for Team Members

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

set location for the custom field as the created post type

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

the custom fields display in the post editor

Step 3: Create a Team Members Page using Bricks

Move to Pages > Add New to create a new page. After updating, select Edit with Bricks.

create a new template for the team members page

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

Add a new container element to cover all the team members’ information

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

Add a heading element to display the title of the page and fill in the name of the page

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

Choose the Related Posts element to get all the posts

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

go to the Query change the post type to Team Member to get the wanted post

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

Remove options in fields section to change the information that you want to display in each post

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

Add Item > Insert Dynamic Data to add a new field and insert the dynamic data from the custom fields.

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.

To set information as URLs, you should add an attribute to these fields

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

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

we just need to add a Post Content field, as the description of each member is the content of the post

Let’s style the page in the next step.

However, because Bricks does not support adding classes for each element, you should use the HTML tag 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.

use the HTML tag for styling

Step 4: Style the Page

Still in the page editor with Bricks, move to the Style section of each element to change the look of them.

move to the Style section of each element to change the look of them

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

For more advanced styling, use some CSS codes

I placed all of the code on Github so you can look it up for further information.

Now, go to see the result on the frontend.

Result of Team Members Page on the frontend.

Last words

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.

Discussion (0)