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.
An example of the FAQs page using MB Blocks

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.

Go to Pages to create a new page for the FAQs

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

Just leave this page blank.

Create a Custom Block

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

Create a custom Gutenberg block that includes some custom fields

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.

The Add more button help to add more questions and answers

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

Go to Meta Box > Custom Fields to create fields

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.

Create a Group field

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

Add subfields for questions and answers

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.

Set the group to be collapsible, keep the Expanded option to have the full display of subfields by default.

Next, set a name for the group’s title.

Name 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.

Set the group cloneable to have more than one pair 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.

Set the location as Block

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

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.

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.

The fields on the right side bar

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

Click Add more to add other pairs Q&As

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.

The Block Render Settings section helps to render the data saved in custom fields

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.

Choose option how to render

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

Some basic instructions helps to write code in the Render code box

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

A loop to display the Q&As

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

Add code following the instruction

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.

The same information will be simultaneously displayed visually on the page when filling in the information in the field.

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.

The Q&As with no style display on the preview
The Q&As with no style display on the preview
The Q&As with no style display on the frontend
The Q&As with no style display 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.

Add some div tags, classes and CSS to the Render code section.

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

The new look of the Q&As on the page

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.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  31. How to Create a Recipe - P3 - Using Meta Box and Elementor
  32. How to Create a Recipe - P4 - Using Meta Box and Bricks
  33. How to Create a Recipe - P5 - Using Meta Box and Zion
  34. How to Create a Recipe - P6 - Using Meta Box and Brizy
  35. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  36. How to Create a Recipe - P8 - Using Meta Box and Kadence
  37. How to Create a Recipe - P9 - Using Meta Box and Divi
  38. How to Create a Recipe with Meta Box Plugin
  39. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  40. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  41. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  42. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  43. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  44. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  45. How to Create a Team Members Page - P4 - Just Meta Box
  46. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  47. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  48. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  49. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  50. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  51. How to Create a Video Gallery Page - P5 - Using MB Views
  52. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  53. How to Create a Video Gallery Page Using Meta Box + Oxygen
  54. How to Create ACF Flexible Content Field with Meta Box
  55. How to Create an Auto-Updated Cheat Sheet in WordPress
  56. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  57. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  58. How to create an FAQs page - P4 - Using Meta Box and Bricks
  59. How to Create an FAQs Page - P6 - Using MB Views
  60. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  61. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  62. How to Create an FAQs Page - P9 - Using MB Blocks
  63. How to Create an FAQs Page -P3- Using Meta Box
  64. How to Create Buttons with Dynamic Link using Custom Fields
  65. How to Create Category Thumbnails & Featured Images Using Custom Fields
  66. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  67. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  68. How to Create Download and Preview Buttons - P3 - Using MB Views
  69. How to Create Download Buttons in WordPress - Using Custom Fields
  70. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  71. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  72. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  73. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  74. How to Create Notification Using Custom HTML Field
  75. How to Create Online Admission Form for School or University
  76. How to Create Online Reservation Form for Restaurants using Meta Box
  77. How to Create Relationships - P1 - Using Meta Box and Oxygen
  78. How to Create Relationships - P2 - Using Meta Box and Bricks
  79. How to Create Relationships - P3 - Using MB Views
  80. How to Create Relationships - P4 - Using Meta Box and Breakdance
  81. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  82. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  83. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  84. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  85. How To Display All Listings On A Map With Meta Box
  86. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  87. How to Display Author Bio in WordPress - P2 - Using MB Views
  88. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  89. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  90. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  91. How to Display Images from Cloneable Fields - P3 - with Elementor
  92. How to Display Images from Cloneable Fields - P4 - with Bricks
  93. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  94. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  95. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  96. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  97. How to Display Product Variations - P3 - Using Meta Box and Bricks
  98. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  99. How to Display The Latest Products - P5 - Using Meta Box and Bricks

Leave a Reply

Your email address will not be published. Required fields are marked *