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.

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

An example of a FAQs page created with Kadence and data from custom fields created with Meta Box.

Video Version

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!

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 *