In continuation of the series on creating a FAQs page, in today’s practice, we’re going to do it 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
Before Getting Started
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:
First, we need 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.
We also need some Meta Box extensions:
MB Blocks allows 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.
And, the last one is Meta Box Group. It helps to organize custom fields for questions and answers into a group, so they will be in pairs.
That’s all the tools we need. Now, let’s start!
Create 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.
Create 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 a 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 variable is for numbering the questions.{question}
: This variable 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 to 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.
Display Data of the Block
Render the Data
Go back to the settings of the created block. On the Settings tab, the Block Render Settings 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.
Style 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.
Last Words
We have finished creating an FAQs page using custom blocks and custom fields with the help of the MB Blocks. Give it a try and share the results with us. Also, you can refer to this series with other page builders.
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 series for creating a simple listing page.
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page - P7 - Using Meta Box and Divi
- How to Create an FAQs Page - P8 - Using Meta Box and Kadence
- How to Create an FAQs Page - P9 - Using MB Blocks
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page - P9 - Using Meta Box and Divi
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe - P9 - Using Meta Box and Divi
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
- How to Create a Simple Listing - P4 - Using Meta Box and Elementor
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Team Members Page - P7 - Using Meta Box and Kadence
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page - P7 - Using Meta Box and Divi
- How to Create an FAQs Page - P8 - Using Meta Box and Kadence
- How to Create an FAQs Page - P9 - Using MB Blocks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download and Preview Buttons - P3 - Using MB Views
- How to Create Download Buttons in WordPress - Using Custom Fields
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Relationships - P4 - Using Meta Box and Breakdance
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
- How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
- How to Display a Video Playlist - P1- Using MB Views
- How To Display All Listings On A Map With Meta Box
- How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
- How to Display Author Bio in WordPress - P2 - Using MB Views
- How to Display Dynamic Banners in WordPress - P3 - Using MB Views
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks