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 The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  61. How to Create an FAQs Page -P3- Using Meta Box
  62. How to Create Buttons with Dynamic Link using Custom Fields
  63. How to Create Category Thumbnails & Featured Images Using Custom Fields
  64. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  65. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  66. How to Create Download and Preview Buttons - P3 - Using MB Views
  67. How to Create Download Buttons in WordPress - Using Custom Fields
  68. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  69. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  70. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  71. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  72. How to Create Notification Using Custom HTML Field
  73. How to Create Online Admission Form for School or University
  74. How to Create Online Reservation Form for Restaurants using Meta Box
  75. How to Create Relationships - P1 - Using Meta Box and Oxygen
  76. How to Create Relationships - P2 - Using Meta Box and Bricks
  77. How to Create Relationships - P3 - Using MB Views
  78. How to Create Relationships - P4 - Using Meta Box and Breakdance
  79. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  80. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  81. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  82. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  83. How To Display All Listings On A Map With Meta Box
  84. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  85. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  86. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  87. How to Display Images from Cloneable Fields - P3 - with Elementor
  88. How to Display Images from Cloneable Fields - P4 - with Bricks
  89. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  90. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  91. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  92. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  93. How to Display Product Variations - P3 - Using Meta Box and Bricks
  94. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  95. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  96. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  97. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  98. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  99. How to Display the Most Viewed Posts - P1 - using MB Views

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

Your email address will not be published. Required fields are marked *