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

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.

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 using Meta Box Plugin
  21. How to Create a Recipe with Meta Box Plugin
  22. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  23. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  24. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  25. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  26. How to Create a Team Members Page - P4 - Just Meta Box
  27. How to Create ACF Flexible Content Field with Meta Box
  28. How to Create an Auto-Updated Cheat Sheet in WordPress
  29. How to Create an FAQs Page Using Meta Box
  30. How to Create Buttons with Dynamic Link using Custom Fields
  31. How to Create Category Thumbnails & Featured Images Using Custom Fields
  32. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  33. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  34. How to Create Online Admission Form for School or University
  35. How to Create Online Reservation Form for Restaurants using Meta Box
  36. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  37. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  38. How to Display Images from Cloneable Fields - P2 - with Oxygen
  39. How to Display Images from Cloneable Fields - P3 - with Elementor
  40. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  41. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  42. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  43. How to Manually Reorder Posts with Meta Box
  44. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

5 thoughts on “How to Create a Team Members Page - P3 - Using Meta Box and Bricks

  1. thanks for the tutorial. would be very nice to compleat this with a more complex example by adding a related custom hierarchical taxonomy on MB side and Briks templates. Just like woo products and categories.

    I was able to do what you did in your tutorial with out a problem but when adding a MB custom taxonomy only top level slug works but not when trying to navigate with second level hierarchical terms

    example
    /custom-term/ works
    but not /custom-term/subterm

    thanks

    1. I second the request for a more complex example MB+Bricks using second level hierarchy.

    1. the example is very simple. its doing the exact same thing as Woocommerce does with products and product categories where you have

      domain.com/product-category/category

      where you filter custom post type products with custom taxonomy terms over a tamplate. Woocommerce does it already.

      my point is to do the same using MB and Bricks with from the ground up. I tried and all works well untill I make it hierarchical just like woocommerce does it with product categories.

      An example would be Books (as post type) and Book category (as a related taxonomy).. the idea would be to create a template in bricks that would allow you to view books and navigate them thru the category slugs

      domain.com/books-category/category-slug/sub-category-slug

      thanks

  2. Nice video and above all perfect timing for a tutorial on Bricks WordPress Builder, given the uncertain future that awaits Oxygen Builder... Go on like this and continue to improve this awesome product!

Leave a Reply