How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
Tags: tutorial, metabox, dynamicdata, admincolumns
Published: 2022-06-02 02:31:39


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjv0mohsetb56lp75qjp.jpg)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.

<!--more-->

<img class="aligncenter" src="https://i.imgur.com/Zxtz5ca.png" alt="Sample for the Team Members Page with Meta Box and Oxygen" />
<h2>Video Version</h2>
https://youtu.be/CgI4bxfOkk4
<h2>Before Getting Started</h2>
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.

<img class="aligncenter" src="https://i.imgur.com/T4YqNYQ.png" alt="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 <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> to have a framework that allows you to create custom fields to input members’ information. It’s free and available on <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>. For advanced features, we also need some extensions of Meta Box as follows:
<ul>
 	<li><a href="https://metabox.io/plugins/mb-admin-columns/">MB Admin Columns</a>: allows displaying custom fields in table columns in admin screens for all posts;</li>
 	<li><a href="https://metabox.io/plugins/custom-post-type/">MB Custom Post Types &amp; Custom Taxonomies</a>: to create custom post types;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: has a UI on the back end to create custom fields easily.</li>
</ul>
The last one is <a href="https://oxygenbuilder.com/">Oxygen</a>. You should use the 3.9 version or higher which has the native integration with Meta Box.
<h2>Step 1: Create a New Custom Post Type</h2>
Go to <strong>Meta Box &gt; Post Types &gt; New Post Type</strong> to create a new custom post type.

<img class="aligncenter" src="https://i.imgur.com/MffCtDn.png" alt="Create a new custom post type for the Team Members" width="1000" height="609" />
<h2>Step 2: Create Custom Fields</h2>
Move to <strong>Meta Box &gt; Custom Fields &gt; Add New</strong>.

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

<img class="aligncenter" src="https://i.imgur.com/84e5cQZ.png" alt="Add options for the position choices" />

If you want to display the information about the members’ position in the admin columns, tick the option <strong>Show as an admin column</strong> in the <strong>Position</strong> field’s settings. To have this setting, you need the <a href="https://metabox.io/plugins/mb-admin-columns/">MB Admin Columns</a> extension. Pay attention to the set the position for the column, you must choose a position. Otherwise, it can not be displayed anywhere.

<img class="aligncenter" src="https://i.imgur.com/1CTpDiv.png" alt="set the custom fields display as admin columns" />

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

<img class="aligncenter" src="https://i.imgur.com/No9eWKU.png" alt="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 <strong>Settings</strong> tab &gt; <strong>Location</strong> &gt; choose <strong>Post Type</strong> as <strong>Team Member</strong> to apply these fields to this post type.

<img class="aligncenter" src="https://i.imgur.com/5KQ96iU.png" alt="set location for the custom field as the created post type" />

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

<img class="aligncenter" src="https://i.imgur.com/yV12DrQ.png" alt="the custom fields display in the post editor" />
<h2>Step 3: Create a Template for the Team Members Page</h2>
In the Oxygen, create a new template and choose <strong>inactive - Default Page</strong> to set it to inherit this style.

<img class="aligncenter" src="https://i.imgur.com/je3Yd7u.png" alt="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 <strong>Render Page Using Template</strong> section.

<img class="aligncenter" src="https://i.imgur.com/nJjF8SB.png" alt="assign template for the page" />

Let’s edit the template!

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

<img class="aligncenter" src="https://i.imgur.com/FqZQutj.png" alt="add a Section component for the content in the page" />

To get the title of the page automatically, add the <strong>Heading</strong> component, then click <strong>Insert Data &gt; Post &gt; Title</strong> to connect this component with the title of the page.

<img class="aligncenter" src="https://i.imgur.com/tG9l6Xh.gif" alt="add title for the page by connecting the component to the page title to get information automatically" />

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

<img class="aligncenter" src="https://i.imgur.com/lcCdWoA.gif" alt="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.

<img class="aligncenter" src="https://i.imgur.com/DQgCOWY.png" alt="the Repeater displays many boxes, each one is for a post" width="1000" height="517" />

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 <strong>Preview Render</strong> section, choose <strong>Single Mode</strong> to see the preview of a post only.

<img class="aligncenter" src="https://i.imgur.com/wv7wgf5.png" alt="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 <code>div</code> tags to divide the content into 2 columns.

<img class="aligncenter" src="https://i.imgur.com/kVlLHSO.png" alt="the name card of each member is divided into 2 columns" width="552" height="252" />

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

<img class="aligncenter" src="https://i.imgur.com/cwjTTWm.gif" alt="add Featured Image component to get the avatar" />

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

To create the social icons, choose the <strong>Icon Button</strong> 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 <strong>data &gt; Meta Box Field</strong> &gt; choose the corresponding field.

Take the <strong>Facebook</strong> icon as an example:

<img class="aligncenter" src="https://i.imgur.com/CxPFvce.gif" alt="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 <strong>Instagram</strong> and <strong>mail</strong> icons, do likewise.

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

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

<img class="aligncenter" src="https://i.imgur.com/ui0VQDO.png" alt="add title of the post to get the member name" width="1000" height="549" />

To get the member's position, add the <strong>Text</strong> 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 <strong>Insert Data</strong> button, choose <strong>Meta Box Field &gt; Position</strong>.

<img class="aligncenter" src="https://i.imgur.com/Or9sBIy.gif" alt="connect the custom fields to the text conponent to get the data of member's position" />

Since the <strong>Position</strong> 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.

<img class="aligncenter" src="https://i.imgur.com/TusazlW.png" alt="set the obtained data to get as label" />

Finally, choose the <strong>Content</strong> component to get a short introduction of the member.

<img class="aligncenter" src="https://i.imgur.com/YD84SfS.png" alt="add the Content component to get the member's description" width="1000" height="611" />

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

<img class="aligncenter" src="https://i.imgur.com/zgYdBjR.gif" alt="The members' information display on the page" />

Let’s style this page.
<h2>Step 4: Style the Team Members Page</h2>
To style this page, you can choose each component and change the settings.

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

<img class="aligncenter" src="https://i.imgur.com/nJzvzCM.png" alt="style each element for better display" width="1000" height="690" />

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

<img class="aligncenter" src="https://i.imgur.com/4uFS6Kv.png" alt="change the preview mode of the repeater to normal mode to show all the posts on preview" width="1000" height="690" />

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

<img class="aligncenter" src="https://i.imgur.com/p5kxSxz.png" alt="enable the grid to set grid layout for the name cards" width="1000" height="698" />

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 <strong>Manage &gt; Stylesheets &gt; New Stylesheet</strong>, then add this code.
<pre>.meet-the-team-section .ct-section-inner-wrap {
    align-items: unset;
}</pre>
<img class="aligncenter" src="https://i.imgur.com/7egE2fd.png" alt="add CSS for additional style" />

Let’s see the result!

<img class="aligncenter" src="https://i.imgur.com/AGepcki.gif" alt="the name cards displayed well on the page" width="1443" height="843" />
<h2>Last Words</h2>
We’ve completed all the steps to <strong>create a team members page with Meta Box and Oxygen</strong>. 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.