Creating a FAQ Page in WordPress using ACF and jQuery

How to create a FAQ page in WordPress using Advanced Custom Fields and jQuery.

ACF (Advanced Custom Fields) Pro comes with a great inclusion called the Repeater field which allows a user to continually add additional rows of data of certain custom fields to a page or post (or custom post type) in WordPress.

This can be an ideal client solution for adding repetitive data without having to enter code or risk user error on inadvertently messing up code.

This tutorial uses the repeater field on a Genesis theme but the process would be roughly the same on any WordPress theme

Setting up Advanced Custom Fields

Download and install ACF Pro (the Pro version is a paid plugin) create a new page/post in WordPress called FAQs then create a new custom field group also called faqs – this will have 2 sub-fields called faq_question and faq_answer.

Also in the location area you can target which post/page that you want the custom fields to appear in.

Target post

Doing it via a Post

Setting up a Custom Post Template

You can add the code conditionally to a single post and position it using a hook.

I have added some extra HTML mark up to allow for the FAQ question and answer to be put in containers that will be manipulated by jQuery.

So far, the custom fields for the FAQs are created and will publish to the page, what is now needed is some jQuery open/close effects and some CSS for styling.

Doing it via a Page

Targeting a Page Template

If you were targeting a page template instead, you would use instead…

Setting Up the jQuery & CSS

The jQuery will open/close the container based on a click function. Create a file called faq.js and file in your themes js folder.

For CSS create a faq.css and add into your themes css folder

Set the jQuery script and CSS to fire only on this particular post by enqueing the script and style in your functions.php file. I also have enqueued fontawesome from a CDN as I want to use it’s + and – symbols.

So above the jQuery and CSS is set to load and also fontawesome is referenced for the icons. I have styled the format to be similar to the FAQ module from the Beaver Builder plugin.

Some examples below.