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:
Video version
Preparation
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.
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.
Then, there'll be an Add More button to allow adding more Q&A on the FAQs page.
I also made this group Collapsible so that the information in the group field could be collapsed.
It’ll help avoid being messy.
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.
Back in the page editor, you will see the fields and can fill in information about questions and answers.
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.
Back to the FAQs page, assign the newly created template to this page in the Render Page Using Template section.
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.
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.
Since I used Meta Box custom fields to save the FAQs information, I set the Accordion type as Accordion - Dynamic Items (Meta Box).
You can input the value in the Dynamic Data section to show the questions and answers.
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.
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.
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.
Now, on the FAQs page, you will see the result like this.
You may be interested in: