Skip to main content

Creating an FAQs page - Meta Box + Oxygen

We are going to create an FAQs page using Meta Box and Oxygen. It has questions and answers that have been saved in custom fields created with Meta Box.

This is a specific example that we’ll create in this practice:

Example of an FAQs page

Video version


For custom fields, we will use Meta Box and Meta Box Builder to have a UI for creating custom fields right on the back end.

The FAQs page is built with Oxygen. You should use its 3.9 version or higher, which has native integration with Meta Box.

The questions and answers are displayed in an accordion style on the page, which is provided by OxyExtras. This is optional only.

1. Creating a new page

Go to Pages > Add New to create a page for FAQs.

Create a new page

2. Creating custom fields

Go to Meta Box > Custom Fields > Add New. I’ll add a group with two subfields inside. It is also set to be cloneable to have more spaces to add different questions and answers.

Create custom fields

Then, there'll be an Add More button to allow adding more Q&A on the FAQs page.

Click Add more button to add more Q&A on the FAQs page

I also made this group Collapsible so that the information in the group field could be collapsed.

Set group to be Collapsible to collapse the information

It’ll help avoid being messy.

The information is displayed in a tidy way

After creating all the fields, move to the Settings tab, choose Location as Post type and select Page. Since we created the fields for the FAQs page, go to the Advanced location rules section below and select the page name.

Set Location for the created fields as post type

Back in the page editor, you will see the fields and can fill in information about questions and answers.

The fields appear in the page editor

3. Creating a template with Oxygen

In Oxygen, create a new template and choose the inactive - Default Page option to inherit its style and choose to apply this template for Pages.

Create a template with Oxygen

Back to the FAQs page, assign the newly created template to this page in the Render Page Using Template section.

Assign the created template to the FAQs page

Now, let’s edit the template with Oxygen.

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

Choose the page you want to see in the preview

Next, add the Pro Accordion component. This component will only be available when you have Oxy Extras on your site. If you don’t have it, you can add Text components instead as normal.

Add a Pro Accordion component

Since I used Meta Box custom fields to save the FAQs information, I set the Accordion type as Accordion - Dynamic Items (Meta Box).

Set Accordion type as Accordion - Dynamic Items (Meta Box) to save the FAQs information

You can input the value in the Dynamic Data section to show the questions and answers.

Go to the Dynamic Data section

Input parameters to show the Q&A

The group we used in this tutorial is cloneable, so add the group's ID into the box which I marked as 1 in the picture above.

The question will be the Header Text, so I added the Question field's ID in the box which I marked as 2. For the answers, I also input the ID of the Answer field and set it in the Content field box, which is marked as 3.

After applying parameters, the preview will show you all of the questions and answers.

Go to the Dynamic Data section

Normally, to have a better score for SEO, the FAQs page should have schema markup.

The Oxy Extras supports the FAQ schema feature. Just go to the Advanced section to enable the FAQ Schema Markup.

Go to the Advanced section of the accordion

Enable the FAQ Schema Markup in the Advanced section

If you haven’t had the Oxy Extras, you can try the Slim SEO Schema to have the FAQ Schema following this tutorial.

Finally, click the Apply Params button to end the setup.

To end up the setup, click Apply Params

Now, on the FAQs page, you will see the result like this.

Result of the created FAQ page after all steps

You may be interested in: