This post is brought to you by Meta Box and the work they are doing to make working with custom meta boxes easier for all WordPress Users.
A FAQs page, as many of you know is short for Frequently Asked Questions, is a commonly used page to provide quick answers about a product or service. They’re common to us all, but it’s important to note the role they play when establishing a relationship with the customer.
Furthermore, if you run a site built on WordPress, you may also find it helpful to know how to build a custom FAQ template, as well.
In this post, we will share an easy way to create a FAQs page in WordPress by using the Meta Box plugin.
Before Getting Started
Required Plugins
First, download the Meta Box plugin, which provides the Meta Box Framework used throughout this post. This will provides the foundation to prepare your installation for creating the FAQs page. In the event, you aren’t familiar with what Meta Box is, please see this post.
Along with the Meta Box plugin, we will use its two extensions:
These are two premium extensions; however, though you may choose to buy them individually, you can also purchase them in a bundle to save some money.
Remember to follow their installation instructions and activate all the above plugins.
FAQs Page Layout
Naturally, every page needs a layout. For this tutorial, you can design it and build it yourself or use something off-the-shelf. In this post, I am using the following sample for this guide. It’s using Nav Tabs from Bootstrap 4.
Instructions for Building a FAQs Page
Working in WordPress
Step 1: Create a Page Template for the FAQs Page
First, create and copy the template file. Next, place it into the template-parts directory or the root of the theme folder.
It’s up to you, but ideally, you should follow whatever convention you prefer that allows you to easily manage the template and its code (and related assets).
In this guide, I’ll put it in the theme folder for simplicity.
It’s worth noting that you need to add the below code into the page template file so that WordPress can identify the kind of layout that is being manually created.
For example, in this case, I added it into the beginning of page-faqs.php file.
Step 2: Creating the FAQs Page
Doing this is almost exactly like creating a normal page.
On the admin dashboard, go to Pages > Add New then press the button as in the above image.
Step 3: Set the Page Template for the FAQs Pages
On the FAQs page edit screen, look at the right bar and find the Page Attributes > Template option. Choose the template named FAQs. This is the one we created in the first step using the code above.
Note this option will be shown only if you’ve properly added the template to your theme.
After choosing, click Save Draft and Preview to check if it has the display you’ve expected. Pay attention to the presentation of your template. You may need to style it to fit with your theme. This particular article doesn’t outline how to do it, but you can see the result in the screenshot.
Remember to save the page ID to use in the next steps.
Use the Meta Box Plugin to Create the Fields for the FAQs Page
As mentioned at the start of the article, I’m using the Meta Box Group and Meta Box Builder extensions to create custom fields via an intuitive UI which non-developers can use.
The Meta Box Group is for creating the field group or repeated custom fields (in this case, the questions and answers).
Step 1: Create Custom Fields with Meta Box Builder
In the administration area of WordPress, go to Meta Box then Custom Fields. Fill the basic information such as Title (note the folder name includes the fields) and the ID into the form.
Go to the Settings tab and choose a kind of post types. We are creating a page, so we should choose the post types is Page.
Then, in the Include Exclude Extension area, choose Include and fill the FAQs page’s ID, which I reminded you to save in step 3 of creating FAQs page. If you forgot it, follow this instruction to get the ID.
Click Save Changes, then back to the Fields tab and start creating the necessary fields.
Step 2: Create a Group
Next, create a group including a text field and a child group inside that field. The fields’ structure should look like this:
So, I need to create a group first.
In the Fields tab, choose Specials and click Group. A group will be automatically added to the right area. Now, configure it as shown below:
- Label: This is the name that will display in the page’s layout.
- ID: This refers to the field’s slug
- Collapsible. If you want to collapse content for saving space, then check this option.
- Cloneable. Check this to allow cloning this group (pay attention to this)
Pay attention to Maximum number of clones and Add more text. I will talk about about this later.
Step 3: Create the Subgroup and Subfields
The ways to create a subgroup are similar to how we create a field group shown in the second step.
For creating the text fields, find Input Fields then click button Text in the left bar as below image:
Don’t forget to configure the fields. Once done, drag and drop fields to where you want. You should then see something like this:
You may read more about adding and configuring custom fields by Meta Box Builder here for details.
Finally, press the Update button and refresh the FAQs page to see the result.
As the image, there are two blue buttons named Add More Questions and Add New Tab. Did you see it? When did I make it?
Recall in Step 2 when I said to pay attention to Cloneable and Add More Text boxes. These are where I created the two buttons shown above.
If you are a developer or tech-savvy, you may code it yourselves with support from the free Meta Box plugin instead of using its extensions (that is, Meta Box Builder and Meta Box Group).
For example, this is the code of the above fields; you can add it to the function.php file and see the same result. In this case, your website just needs to install the Meta Box plugin only. There is an instruction to import code from metabox.io; you may read it for more details.
Display the Fields’ Content on the FAQs Page
To do this, you can use the below code or review the Meta Box plugin instructions.
-
- rwmb_meta(). This function is to get the value of the fields in Meta Box Plugin
- group_id. This refers to the field group’s ID, which we’ve previously set.
- $sub_field_key. This is the subfields’ ID in the field group
In this case, we change group_id into faq_tab and $sub_field_key into tab_name as I set when I created the Meta Box in the first step.
Additionally, I also created a subgroup in the group, so to get the value of the subgroup you can do as follows:
- $gr_childs. This refers to the subgroup’s ID
- $child_key. This is the ID of the fields which are inside the subgroup
For example, we’ll have the code for the layout as above (This layout uses Tabs of Bootstrap 4.)
<script src="https://gist.github.com/kutoi94/a8dcdaab6ce9613d3588eea7ae8e6506.js"></script>
Final Words
With the Meta Box plugin, you can choose to create the FAQ page’s layout by completely coding or using its extensions for easier acts as above.
But it is quite easy when you use Meta Box Builder and Meta Box Group when you aren’t a developer, isn’t it?
That’s why I chose to do it by Meta Box’s extensions. I hope you find this helpful.
