Custom Post Type with FAQs using ACF Pro Repeater Field and Expand Collapse Functionality

This members-only tutorial provides the steps to develop an Oxygen template for single pages of a "service" Custom Post Type with an attached "faq" ACF Pro Repeater field automatically appearing with expand-collapse functionality using jQuery Collapse.

Backend:

Frontend:

Step 1

Install and activate Custom Post Type UI.

Go to CPT UI > Add/Edit Post Types.

Add service post type like so:

Click "Add Post Type" button.

Step 2

Install and activate Advanced Custom Fields Pro.

Go to Custom Fields > Tools and import this field group.

This should add a "FAQ" field group having questions_and_answers repeater field with question and answer sub fields.

Ensure that the field group is attached to the service CPT.

Step 3

Go to Services > Add New.

Add your service post type entries with Title, Content, Featured image and as many Question and Answer pairs as you want for each.

Step 4

Go to Oxygen > Templates.

Add a new template named say, "Service CPT Single".

Set it to inherit from your Main template having the site header and footer.

Apply it to Singular > Services with a priority of 1 (or more depending on how your template for sitewide single entries is setup).

Edit it with Oxygen.

Step 5

Add a Section and add your desired elements like the Post Title, Featured image and Content.

Let's loop through the questions_and_answers field and output the question and answer sub fields for each row.

Add a Code Block.

Go to Advanced > Size & Spacing and set Width to 100%.

PHP & HTML:

This is a premium members-only content.

To view the rest of the content, please sign up for membership (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

I am using Local By Flywheel. Trying to figure out how to do Step 7. Since it is local, all files are on my computer. Not sure where, though. Asking on Local By Flywheel, but if anyone knows Flywheel and help me out, I would appreciate it. Newbie at every step. Sigh. 🙂

Ok. Found my site files. Made it, I believe, to the last instruction and it is somewhat intimidating. Here is the file. It absolutely is not laid out like below. Notepad makes it all a run-on sentence. Need a code editor, I guess. But I still do not know where to put the code for certain:

if ( ! is_singular( ‘service’ ) ) {
return;
}

/** * loads JS files in the footer. */ wp_enqueue_script( 'jquery-collapse', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.collapse.js', array( 'jquery' ), '1.1.2', true );

wp_enqueue_script( 'collapse-init', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.collapse.init.js', array( 'jquery-collapse' ), '1.0.0', true );

Where do I put the code above?

<?php
/*
Plugin Name: My Custom Functionality
Plugin URI: https://example.com
Description: My custom functions.
Version: 1.0.0
Author: Your Name
Author URI: https://example.com
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.txt

This plugin is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
any later version.

This plugin is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with This plugin. If not, see {URI to Plugin License}.
*/

if ( ! defined( ‘WPINC’ ) ) {
die;
}

add_action( ‘wp_enqueue_scripts’, ‘custom_enqueue_files’ );
/**
* Loads .
*/
function custom_enqueue_files() {
// if this is not the front page, abort.
// if ( ! is_front_page() ) {
// return;
// }

// loads a CSS file in the head. // wp_enqueue_style( 'highlightjs-css', plugin_dir_url( __FILE__ ) . 'assets/css/style.css' );


/**

* loads JS files in the footer.

*/

// wp_enqueue_script( 'highlightjs', plugin_dir_url( __FILE__ ) . 'assets/js/highlight.pack.js', '', '9.9.0', true );

// wp_enqueue_script( 'highlightjs-init', plugin_dir_url( __FILE__ ) . 'assets/js/highlight-init.js', '', '1.0.0', true );

}

Sridhar Katakam says:

October 1, 2018 at 12:19 pm

Hey.

Here is the fully modified plugin.php file: https://pastebin.com/raw/fc2Hvr3G

For editing the files, I recommend Visual Studio Code or Sublime Text.

Loading...

Reply

Yeah…I broke it. I can’t get back into. The template is broken. I messed up the field in the php and just now caught that, but I can not get back in to correct it.

Here is the error.

https://kayenterprises.co/test/Broke.PNG

Sridhar Katakam says:

October 4, 2018 at 1:59 am

Check the FAQ on the plugin page of Code Snippets. They provided a way to fix this problem.

Loading...

Reply

I’ve not been able to find an FAQ plugin that I’m happy with & want to use CPT & ACF to create a page with categories of FAQ’s.
So I would create a ‘faqs’ CPT & add an ACF field for a drop down of FAQ Categories.

But what I need help with that I cant get from this tutorial is the query to filter the Post Type + the ACF category field.

Richard,

Do you want to display the FAQs grouped by their categories?

If so, do you want the expand/collapse functionality or just want to link the question to its single page that shows the question and answer?

Yes I want to group by category & to use the expand/collapse functionality

There are two ways in which you can have the content (question and answer pairs) in your WordPress site.

Entries of faq custom post type.
In subfields of a repeater field attached to the faq entry.

Which do you prefer?

With #1, you do not need ACF. This is my recommendation.

https://cl.ly/c59c456e4358

https://wpdevdesign.com/faqs-grouped-by-categories-in-oxygen/

HI,

How can i apply this template to an existing page on my site?

You can use this sample PHP in a Code Block element:

<?php

// check if the repeater field has rows of data.
if ( have_rows( 'questions_and_answers', 49 ) ) {

    echo '<div class="faqs">';

    // loop through the rows of data.
    while ( have_rows( 'questions_and_answers', 49 ) ) : the_row(); ?>
        <div class="faq">
            <h3 class="question">
            <!-- <h3 class="question open"> -->
                <?php the_sub_field( 'question' ); ?>
            </h3>

            <div class="answer">
                <?php the_sub_field( 'answer' ); ?>
            </div>
        </div>

        <?php

    endwhile;

    echo '</div>';
}

else {
    // no rows found
}

?>

You have to replace both the instances of 49 with the ID of your CPT entry from which you want to show the repeater’s fields.

Thanks Shridhar, this is what I needed.

Thanks, Sridhar. This worked great!

For my implementation, I modified step 7 to serve jQuery Collapse from the jsDelivr CDN and added the script tag and init code to the Oxygen template. I did this to eliminate the need for the custom plugin.

I’d appreciate any thoughts you have on this method.

https://sampoornacollege.com/faq/

Sridhar Katakam says:

November 17, 2018 at 4:40 am

That is fine and will work as well.

I personally prefer to use wp_enqueue_script() and wp_enqueue_style() functions as that is considered to be the standard way in which assets should be loaded in WordPress.

Loading...

Reply

« Archive Template for Audio CPT with Play/Pause buttonPrev

The Events Calendar in Oxygen »Next

WPDevDesign