To continue the series Create Team Members Page, we’re having this post to do it with Oxygen. We still use a custom post type instead of cloneable fields. Let’s see how!

In this practice, I also have the same sample of the page as the first tutorial in this series which uses Elementor.

Sample for the Team Members Page with Meta Box and Oxygen

Video Version

Before Getting Started

Before going deeply into this practice, there is something that we need to clarify.

As in the previous tutorial for Elementor, I also have name cards to include the members’ information. That information is saved in posts in a custom post type for the team members.

Where the information is saved in

The member’s name and avatar are the title and featured image of the post. Other information such as position, links to Facebook, Instagram, and Mail will be saved in different custom fields.

In this practice, we need the Meta Box core plugin to have a framework that allows you to create custom fields to input members’ information. It’s free and available on wordpress.org. For advanced features, we also need some extensions of Meta Box as follows:

The last one is Oxygen. You should use the 3.9 version or higher which has the native integration with Meta Box.

Step 1: Create a New Custom Post Type

Go to Meta Box > Post Types > New Post Type to create a new custom post type.

Create a new custom post type for the Team Members

Step 2: Create Custom Fields

Move to Meta Box > Custom Fields > Add New.

First, create a select field for the position information then fill in some options into the Choices box. You can fill in both value and label for the options or the label only as I did.

Add options for the position choices

If you want to display the information about the members’ position in the admin columns, tick the option Show as an admin column in the Position field’s settings. To have this setting, you need the MB Admin Columns extension. Pay attention to the set the position for the column, you must choose a position. Otherwise, it can not be displayed anywhere.

set the custom fields display as admin columns

I create URL fields that allows users to fill in a link for the Facebook, Instagram, and mail information.

create URL field to save the Facebook link

That’s all the custom fields I use to save the members’ information.

Now, move to the Settings tab > Location > choose Post Type as Team Member to apply these fields to this post type.

set location for the custom field as the created post type

Back to the post editor, you will see the created custom fields.

the custom fields display in the post editor

Step 3: Create a Template for the Team Members Page

In the Oxygen, create a new template and choose inactive - Default Page to set it to inherit this style.

create a new template for the team members page

Next, create a new page for the team members and assign the created template to this page in the Render Page Using Template section.

assign template for the page

Let’s edit the template!

In the Previewing section, choose the page you want to see the preview. Then, select a Section component to contain all of the team members’ information.

add a Section component for the content in the page

To get the title of the page automatically, add the Heading component, then click Insert Data > Post > Title to connect this component with the title of the page.

add title for the page by connecting the component to the page title to get information automatically

Next, add a Repeater component to get the data from all the posts that we use for our team members. To get the source of data, go to Query > Custom > Post Type and find the ID of the created post type for our team members.

add Repeater to get all the posts

In the below image, there are many small boxes which are the number of posts that I have.

the Repeater displays many boxes, each one is for a post

If you keep it, you will see the preview of all the posts in the next executions. But, it’ll be messed up. To avoid that, in the Preview Render section, choose Single Mode to see the preview of a post only.

change the preview of the Repeater to single mode

In this tutorial, each name card of a member has 2 columns. One is to display the image and social icons. Another one is to show the member information. I'll use two div tags to divide the content into 2 columns.

the name card of each member is divided into 2 columns

In the first div tag, add the Featured Image component to have the avatar saved as the post's featured image.

add Featured Image component to get the avatar

Next, create another div tag for all social icons in order to style them easier in the next step.

To create the social icons, choose the Icon Button component. You know that the social links are also saved in custom fields. So, to connect these icons to the data we need, go to data > Meta Box Field > choose the corresponding field.

Take the Facebook icon as an example:

link the custom fields to get the data automatically for the Facebook link

Then, you can customize the Facebook icon as you want.

With the Instagram and mail icons, do likewise.

Now, let’s get the member’s information in the second column.

Choose the Title component for displaying the member's name since it is the post title.

add title of the post to get the member name

To get the member's position, add the Text component. Since the position of each member is also saved in a custom field, connect the text to the position field like the way we did with the social icons. After clicking the Insert Data button, choose Meta Box Field > Position.

connect the custom fields to the text conponent to get the data of member's position

Since the Position is a select field, the options in the choices box may have only labels as I set in step 2, or include both value and label as normal. In the template editing with Oxygen, when you get the position’s information, there are two options as well. And, I’ll choose the label.

set the obtained data to get as label

Finally, choose the Content component to get a short introduction of the member.

add the Content component to get the member's description

So, on the Meet the Team page, you can see all the information about the members.

The members' information display on the page

Let’s style this page.

Step 4: Style the Team Members Page

To style this page, you can choose each component and change the settings.

In the Advanced tab, there are a lot of choices so that you can style as you want.

style each element for better display

After styling the components, to see all the posts, just enable the Preview Render section to the Normal Mode.

change the preview mode of the repeater to normal mode to show all the posts on preview

You see that all the boxes are stuck together. Therefore, I need to add some spacing between each box. Thus, go to the Grid layout section and click the Enable Grid button.

enable the grid to set grid layout for the name cards

Now, the display of all the boxes is quite good. So I just keep it. If you want to change anything, just change settings in the left sidebar.

Finally, I want the title of the page in the center. I tried to style it with Oxygen but it didn’t work. Let’s try some CSS to make a change.

Go to Manage > Stylesheets > New Stylesheet, then add this code.

.meet-the-team-section .ct-section-inner-wrap {
    align-items: unset;
}

add CSS for additional style

Let’s see the result!

the name cards displayed well on the page

Last Words

We’ve completed all the steps to create a team members page with Meta Box and Oxygen. Try it out and share the results in the comment section. If you use another page builder, keep track of our channel to see other 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

Leave a Reply

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