How to Create an FAQs Page - P8 - Using Meta Box and Kadence

Continuing our series on creating an FAQs Page with Meta Box and page builders, today we have just explored a different method, using Meta Box and Kadence. Having an FAQ page is a way to be more proactive and predictive with what readers are going to need help with. Let’s dive in to explore the process of creating the FAQs page in detail.

Table of Contents hide

1. Video Version
2. Before Getting Started
3. Create a New Page
4. Create Custom Fields
5. Display the FAQs on the Page
6. Style the Page
7. Last Words

This is an example of a FAQs page that I created.

Video Version

Watch this video on YouTube

Before Getting Started

The FAQs page includes several couples of questions and answers that are saved in custom fields.

To get started, we need the pro version of Kadence on the site to have some extra types of blocks to build the page.

We also need the Meta Box core plugin to have a framework for creating custom fields. You can download it directly from wordpress.org.

For the advanced features from Meta Box, we need some of its extensions:

Meta Box Builder: to have a UI on the backend to easily create custom fields.
Meta Box Group: to organize custom fields into pairs for questions and answers;

They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each one individually.

Create a New Page

Go to Page > Add New to create a page as usual. This will be used for the FAQs page.

Go to Pages to create a new page for the FAQs

Create Custom Fields

Go to Meta Box > Custom Fields to create a new field group. I’m having a group with two subfields inside since each question will go along with the corresponding answer.

This is a new field group with two subfields inside

In addition, each question and answer may be too long to display on the post editor, so I set this group as Collapsible to collapse the information in the group field.

set FAQs group as Collapsible to collapse the information in the group field

You can also set the title for the group based on the content of the Question field for easier identification. The {#} variable is for numbering the questions, and the {question} variable is the ID of the question field to display the content of that question.

Add titles for the group

There will be more than one couple of Q&A. So, we’ll set this group as Cloneable to add more questions and answers easily.

Set the group cloneable as we may have more than one pair of questions and answers

After configuring all the fields, move to the Settings tab. Choose Location as Post type and select Page.

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 as FAQ

Go to the Advanced location rules section below and select the page name as FAQ

Now, go to the page editor, you will see the custom fields displayed.

This is the custom fields displayed

Let’s fill in some questions and answers.

These are some questions and answers filled

Display the FAQs on the Page

Let’s edit the page template with Kadence to display questions and answers on the page.

First, add a Repeater block to get all the content saved in the cloneable group that we used to save the questions and answers.

add a Repeater block to get all the content saved in the cloneable group

Choose the Source as the page we used for the FAQ page.

Choose the Source as the page we used for the FAQ page

In the Repeater Field section, choose the name of the group field that contains the two subfields inside for the question and answer.

In the Repeater Field section, choose the name of the group field

We haven’t set anything yet to stipulate how the date will be displayed, so the preview will be like this.

This is the preview before the date will be displayed

For the content of the questions and answers, add blocks inside the Repeater, as well as inside the Repeater Layout.

add blocks to show content of the questions and answers

Next, I’ll choose a Text Advanced block for the questions.

choose a Text Advanced block for the questions

Enable the dynamic content for this block. Then, choose the field for the question.

Enable the dynamic content for this block. Then, choose the field for the question

The questions will display immediately on the preview.

Do the same with the Answers. Also, add another Text Advanced block, then choose dynamic data from the Answer field.

add another Text Advanced block, then choose dynamic data from the Answer field

We’ve finished getting and displaying all the questions and answers. You can see it now on the page on frontend but it doesn't look good.

This is the page on frontend without style.

Let’s move on to make them display in a better look.

Style the Page

Back to the page editor with Kadence, change the settings of each block to have the wanted layout and style.

This is the new look of the page as I did as an example.

This is the new look of the page

Last Words

We’ve gone through all the necessary steps to create an FAQs Page using Meta Box and Kadence. Hope this practice will give you a hand in creating a new one. You can refer to this series with other page builders.

If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Let’s try and enjoy it!