How to create a FAQ page using Types & Views

In this article I am going to write how I have set up the FAQ at http://rhodanmarine.com/product-support/faq/ using Types, Views and Page Scroll to id plugins. The nice thing about this is that site owner can add FAQ entries in the backend and each FAQ item will automatically appear in both the question and answer section with the correct linkage.

Step 1

Install and activate Page Page Scroll to id. Go to its settings and add a[href='#top'] in the Selector(s) field so it looks like:

Step 2

Create FAQs CPT using Types plugin. Uncheck has_archive.

Step 3

Install and activate Views plugin.

We are going to use two loops – one for the questions section at the top and the other for answers below that.

For the answers loop

Create a new View Template named say, FAQ Loop Item having this code:

Create a new View named say, FAQ List.

Set it to fetch entries from the FAQs CPT with layout style set to Unformatted and the field as FAQ Loop Item.

For the questions loop

Create a new View Template named say, FAQ Loop Item Question having this code:

Create a new View named say, FAQ Questions List.

Set it to fetch entries from the FAQs CPT with layout style set to Unformatted and the field as FAQ Loop Item Question.

Step 4

Add

<a id="top"></a>

somewhere near the top of your site’s pages.

In iThemes Builder, the following can be added in child theme’s functions.php to add that right after the opening body tag.:

add_action('builder_layout_engine_render_header', 'add_after_opening_body', 20 );
function add_after_opening_body() { ?>
<a id="top"></a>
<?php }

Step 5

Go ahead and add the FAQ entries by going to FAQs > Add New in WordPress dashboard.

Step 6

Edit the location where you want the FAQ list to be shown and insert the shortcodes for both the views.

Step 7

This is the CSS I added:

.back-to-top {
background: url('images/up1.png') no-repeat;
display: block;
width: 20px;
height: 20px;
text-decoration: none;
text-indent: -9999em;
}

.faq-item {
margin-bottom: 3em;
padding-top: 0.5em;
}

That’s it.