Creating an FAQs page - MB Blocks

In today’s practice, we’re going to create an FAQs page by using custom blocks and custom fields with the help of the MB Blocks extension from Meta Box.

Here is my simple FAQ page with some pairs of questions and answers.

Video version

Preparation

The questions and answers will be saved in custom fields, and displayed by using a Gutenberg block.

These are some tools we need for this practice:

• The Meta Box core plugin: to have the framework to create custom fields as well as the block for the Q&As. It’s available on wordpress.org.
• MB Blocks: to allow you to create custom Gutenberg blocks. With the help of this extension, we can use PHP or the UI provided by Meta Box Builder to create a block. They bring the same result. However, we recommend using Meta Box Builder to limit the use of complex code.
• Meta Box Group: to organize custom fields for questions and answers into a group, so they will be in pairs.

1. Creating a new page

First of all, go to Meta Box > Pages > Add New Page to create a totally new one for the FAQs.

I leave it blank, since I will get content by adding the custom block in the next step.

2. Creating a custom block

I’ll create a custom Gutenberg block that includes some custom fields like this:

The group includes 2 subfields inside, one for the questions, and one for the answers. When we want to add more couples of questions and answers, we can click the Add more button.

Now, go to Meta Box > Custom Fields to create the field group.

Since I activated the Meta Box Builder, I have a UI on the backend to create the fields and blocks. And, please pay attention that creating a block is the same with creating a field group.

I’ll also add some fields as usual. Firstly, it should be a group.

Then, add subfields. One is for the questions, and one is for the answer.

Move back to the settings of the group, turn on the Collapsible option to set the group to be collapsible. And, I just keep the Expanded option to have the full display of subfields by default.

Next, set name for the group’s title.

This is just optional to identify each set of the question and answer. I use some variables to name the group dynamically.

In there:

• #: This is for numbering the questions.
• {question}: This is the ID of the question field. It helps to display the content of the question on the group title.

I also set this group as cloneable. This is pivotal, helps to add multiple pairs of questions and answers.

That’s all the custom fields and essential configurations we need in this practice.

After creating all the fields and having reasonable settings, move to the Settings tab, and set Location for those custom fields. Normally, we set the location as post, or any specific post type, or page as you want to apply fields to. But, to make this field group to be a block, we should set the location as Block.

We have two options to choose where display the field to add content to the block.

Move to the page editor of the FAQ page, we can look for the created block to add it to the content section of the page.

Since I set the position of the block as on the right sidebar, we will have the fields on the right position.

Now, we can try to add some questions and answers to the fields. You can also click Add more to add other pairs.

However, no matter how many pairs of the Q&A you add, there is nothing displayed on the content area of the page, where the block is. The reason is that we had done nothing to display the content yet.

Let's move to the next step.

3. Displaying data of the block

3.1. Rendering the data

Go back to the settings of the created block. On the Settings tab, the Render section helps to render the data saved in custom fields that we have in this block to be the content displayed on the block on the frontend.

There are three options to choose how to render. You should dig in the documentation to know their details. I’ll choose the third one.

There are also some basic instructions to add code in the below image, you can follow it.

We use a cloneable group to save the couples of questions and answers, so we should have a loop to display them all.

Inside this loop, enter these lines of code. (We did it following the instruction below).

In there:

• question: the ID of the Question field.
• answer: the ID of the Answer field.
• Since it is in a cloneable group, I have the prefix text - clone.

Now, go back to the FAQs page editor, and test how the data stored in the custom fields display visually on the page. Whenever you fill in the information in the field, the same information will be simultaneously displayed visually on the page.

These are the questions and answers that we need. However, they naturally have no style, including the display on the preview and on the frontend.

3.2. Styling the block

To have a better look for the questions and answers, those are in a block, we should go back to the settings of the block instead of the page editor. We should add some div tags and classes to the Render code section. And you also can use CSS as well.

Then, go back to the page, you will see the new look of the Q&As.

We have finished creating an FAQs page using custom blocks and custom fields with the help of the MB Blocks. However, this is the way we do it with custom fields. There is also a way to create FAQs using custom post type. It's similar to displaying posts on an archive page, maybe with some filters. Check out our tut for creating a simple listing page.