How to Create an FAQs Page Using Meta Box and Builderius (part 1)

Having a FAQ (Frequently Asked Questions) section or page on your website is crucial for a number of reasons. First and foremost, it provides a convenient way for visitors to find answers to common questions they may have about your product, service or business. By addressing common concerns or queries upfront, you can help potential customers make more informed decisions and reduce the need for them to contact you directly for support.

Furthermore, having a well-organized and comprehensive FAQ page can also improve your website’s search engine optimization (SEO) by incorporating relevant keywords and phrases that potential customers might be searching for. This can help improve your website’s visibility and attract more targeted traffic to your site.

In this article I am going to show you how to create FAQ page in Builderius step by step. There are two approaches to organizing the data and I am going to show you how to use both of them!

Approach A – Custom Fields Only

I am going to build FAQ section on the page with the help of Meta Box plugin, as a solution for creating custom fields, and Builderius, as a visual template building tool.

Prerequisites: created regular page with title “FAQ” and activated Builderius free and pro versions, and activated Meta Box plugin (free version) and Meta Box AIO (pro version).

Step A1 – Create Custom Fields

Hover over “Meta Box” admin menu an click on “Custom Fields” menu item from the list of sub pages.

We are creating our first custom fields group. Let’s call it “FAQ page items” and then click on “Add field” and search for “Group” field type in the context menu.

We have added our first field type “Group” and this is what we see. There are more and more elements on the page because Meta Box provides us with many different settings which is great! But now we need just few of them, so stay with me 😉 The name of the field is “Group” (1), we can check it any time. The arrow icon (2) to expands/collapses all the settings of the field. The ID of the field (3) – set it to “faq_items”, this is very important to remember! Search for “Cloneable” setting and check it (4). Now it is the time to add some sub fields, so click on “+ Add Field” (5).

We have to add two fields – “Text” and “Text Area”. This is how it looks like when these fields are added:

Let’s add more context to what these fields are for. We should expand the settings of each field and rename it (2). Pay attention to “ID” settings. Its value is getting changed automatically whenever we change the label. Set it to “name” and “text” for Text and Text Area fields respectively. We will need these IDs later to get the data from DB to a template.

Why we have to use such IDs? According to the documentation page for Accordion module, it can display an array of data automatically when each item of this array is an object with precisely these keys: “name” and “text”.

We are almost finished here. The final touch – display these fields on a proper location, which is “FAQ” page in our case. Click on the “Settings” tab for fields group, choose “Page” as post type (1) and add a new advanced location rules – choose “FAQ” page (2).

Now publish the the changes and we are done here!

Step A2 – Adding Content to FAQ Page

Basically, step A1 was about creating a architecture for our data. We have created custom fields which will be used for adding actual content – questions and answers. So, let’s add this content to the page, so later we will have something to show on the FAQ page.

Open the page for editing, check existing of the custom fields just below the Gutenberg content editor.

I think what we do here is pretty self explanatory. Still I have prepared a screenshot of what I have after adding the content. Click “+ Add More” (1) to add a new pair of question and answer. Click “Update” (“Publish”) (2) to save changes on the page.

Step A3 – Create FAQ Page Template

Go to “Builderius” admin menu item, click on “Templates”, then click on “Create your first template”

Add some name for the new template, choose “Regular” as the template type and click on “Next step” to proceed with apply rules:

Essentially, “Apply Rules” in Builderius are the same as location rules in Meta Box – here we choose where exactly our new template will be chosen. I will teach you a cool trick how to choose a needed page faster! Click on Starters, then choose “Page with ID #2”. It refers to the standard Page “Simple page”. We do not need exactly this page, but in just two clicks we have already chosen 90% of the apply rule we actually need!

Now choose a proper page (2) from the dropdown (1) and click “Save” (3).

We have our template created! We see it in the table of templates, now click on its title (1) to start editing it.

The builder mode will be loaded in the new tab. Let’s proceed to the next step – editing the template and displaying FAQ page data.

Step A4 – Edit FAQ Page

The builder panel might be collapsed. Click on the icon (1) to open it and then click on “+ Layout” (2). We are going to use pre-created layouts to speed the template development.

Click “Open library” (1) and the modal window with layouts will appear. Choose suitable layout (2), click “Insert static” (3) to insert the chosen layout into the template.

Now, please, repeat these actions once more, but choose another type of layout. I have chosen a header and a footer and this is what I have at the end:

Good start, right? Now I need a middle content part when I will be displaying the title, the page content and the FAQ items. So, let’s proceed. We need a new section, I have prepared a sequence of how I did it:

1. lick on “Module +”
2. Choose “Section” module
3. The new module has been added at the end of modules list
4. Drag and drop to put the new middle between the header and footer
5. The new module is in the right place now

Then hover over the module item, more specifically – over the “hamburger” icon – and choose “Settings”. Alternatively, just click on the module item in the structure. Its settings will be opened.

Choose “CSS Settings”, category “Size”, setting “Width” and type value “100%”.

Now, close the settings of this module (click icon “X” next to “Module Settings” title) and let’s add a new module inside this section. For this hover over the module item once again and click on “+” icon, then choose “Add module”. This is how we add modules inside other modules.

Now, do these:

1. Choose “Div” module
2. Open its settings
3. Set width – 800px
4. Set margin top and bottom – 2 rem each
5. Set margin left and right – “auto” each

Very good! Now let’s add these modules inside our div module: Heading, HTML Code and Accordion. Heading will be for the page title, HTML Code module for displaying page content and Accordion for displaying FAQ items. We will be displaying all this data in few minutes. But now it should look like this:

It is time to setup a datavar that will get all the dynamic data we need. Click “Template settings”, tab “Data settings”, click “Edit Data Variables” and click “Create new” in the modal window:

Choose type “GraphQL” (1) and name “page” (2) and this query (3):

query {
    queried_post {
        post_title
        post_content
        faq_items: metabox_multiple_group_value(field_id: "faq_items") {
            name: metabox_value(field_id: "name")
            text: metabox_value(field_id: "text")
        }
    }
}

And this is how it looks like. Click “Apply changes” then to fetch data from the backend.

Excellent! We are mastering a new skill – working with GraphQL. This is fantastic!!

Close the modal window and Template settings and go back to the Structure. Open Heading module, remove its content (1), click “Database” icon (2), hover over the item with the page title (it needs to be expanded) and click on “clipboard” icon (3) to copy template tag for dynamic data.

Now paste the copied template tag into “Content editor” setting (1) of the Heading module. In the builder content area (2) we immediately see the title of the page! Yes, yes! It is that easy! 🥳

Do the similar actions for another module called HTML Code, but copy and paste this dynamic data tag wrapped in triple brackets for page content (the one below the page title). It will be this one:

page.queried_post.post_content

Finally, do the similar actions for Accordion – copy and paste the following dynamic data tag wrapped in triple brackets:

page.queried_post.faq_items

Put it inside “attribute “data-content” setting.

Let’s close the modal window, click the big green “Save” button to save all the changes inside our template and then let’s preview our page. We can the page directly from the WP admin area or by clicking on “eye” icon inside the builder mode. This is what we have got:

Yes, we would need to add some styles to make the page look fancier. In general, we already have a fully functional, accessible FAQ sections. Moreover, “ld+json” schema is automatically generated and added to the page’s “head” section. It looks like this:

In conclusion, I prepared a pretty thorough instructions on how to create a FAQ page on your site with the help of Builderius and Meta Box plugin. This is one of two possible approaches and here I am using custom fields only. So, this is the first part of the bigger tutorial! In the second part I will show you how to achieve the same but using custom post types posts (aka CPT posts).