Creating a team members page - Meta Box + Bricks

We’ll introduce a way to create a team member page with Bricks using custom post type and custom fields.

This is my sample team members page:

Video version

Preparation

Each member’s information will be saved in a post and displayed as a name card on the page. All extra 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 do it, we need Meta Box and its extensions:

• Meta Box: This is the framework to create custom fields and custom post types. It’s free and available on wordpress.org
• MB Custom Post Type & Custom Taxonomies: to create custom post types for Team Member;
• Meta Box Builder: provides a UI in the back end to create custom fields easily for Member Information;

We’ll use Bricks to build the page.

1. Creating a new custom post type

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

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

2. Creating custom fields

Go to Meta Box > Custom Fields > Add New.

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.

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

3. Creating the page

Move to Pages > Add New to create a new page. Then, edit it with Bricks.

First, 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.

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

When adding the Related Posts 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 and change the post type to Team Member to get the wanted posts.

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.

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.

For instance, I choose the Position. Then, the position of each member will display in the preview immediately.

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.

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

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

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.

4. Styling the page

For styling the page, still in the page editor with Bricks, move to the Style section of each element to change the look of them if you want.

Or, you may use some CSS codes as I did to have advanced styling.

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.