The frequently asked questions section will be helpful for your audience to get the answers to common queries. For basic questions, your customer doesn’t need to reach you. You should put the FAQs section on your website so your users find solutions easily.

In this article, I show you how one can add the FAQs section easily in WordPress without using any plugins. If you are a non-technical person then it’s fair using a plugin for smaller tasks. But as a WordPress developer, your focus should be on keeping minimum plugins. It will save all future work of maintaining plugins.

Manage Frequently Asked Questions in WordPress

Managing the FAQs section on WordPress is super easy. It just requires a few lines of code and you are done. I am going to use Bootstrap accordion styling for FAQs. We will create a post type ‘faq’ in WordPress, so the admin can easily insert/update their FAQs.

Open your active themes functions.php file and create a ‘faq’ post type as follows.

add_action('init', 'create_post_types');
function create_post_types() {
    register_post_type( 'faq',
        array(
            'labels' => array(
                'name' => __( 'FAQs' ),
                'singular_name' => __( 'faq' ),
                'add_new_item'          => __( 'Add New FAQ' ),
                'new_item'              => __( 'New FAQ' ),
                'edit_item'             => __( 'Edit FAQ' ),
                'view_item'             => __( 'View FAQ' ),
                'all_items'             => __( 'All FAQs' ),
                'search_items'          => __( 'Search FAQs' ),
                'parent_item_colon'     => __( 'Parent FAQs:' ),
                'not_found'             => __( 'No FAQs found.' ),
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'faq', 'with_front' => false,),
            'show_in_rest' => true,
            'supports' => array( 'title', 'editor'),
        )
    );
}

Go to your WordPress backend and you will see the FAQs menu. Its structure is the same as posts and pages. Add your question as a title and answer as a description. In this way, you can add as many FAQs as you wish to display on the website.

Next, we need to include Bootstrap assets(JS and CSS) in the WordPress website. WordPress provides its own way of adding JS and CSS to the application.

The following code will go inside the functions.php file to include Bootstrap assets.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('bootstrap-script', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js', array('jquery'), false, true);
    wp_enqueue_script('bootstrap-script');
 
    wp_register_style( "bootstrap-style", "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css", array(), false, "all" );
    wp_enqueue_style( "bootstrap-style" );
}

Here I have used the CDN path for Bootstrap assets. You can keep these files in your theme directory and adjust the path.

Display FAQs Section in WordPress

We are now ready with a few frequently asked questions that need to be displayed on the WordPress front end. The user can place it anywhere on the website. You may want to show it on a separate page or as a subsection under any page. The choice is yours.

Use the code below which will put the Bootstrap accordion containing your FAQs content.

<?php
$args = array(
    'post_type' => 'faq',
    'post_status' => 'publish',
    'posts_per_page' => '-1',
    'order' => 'ASC',
);
$faq_posts = new WP_Query( $args );
?>

<?php if ( $faq_posts->have_posts() ) { ?>
    <div class="accordion" id="accordionExample">
        <?php $i = 1; ?>
        <?php while ( $faq_posts->have_posts() ) { $faq_posts->the_post(); ?>
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading<?php echo $i; ?>">
                    <button class="accordion-button <?php echo ($i>1) ? "collapsed" : ""; ?>" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<?php echo $i; ?>" aria-expanded="true" aria-controls="collapse<?php echo $i; ?>">
                        <?php the_title(); ?>
                    </button>
                </h2>
                <div id="collapse<?php echo $i; ?>" class="accordion-collapse collapse <?php echo ($i==1) ? "show" : ""; ?>" aria-labelledby="heading<?php echo $i; ?>" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <?php the_content(); ?>
                    </div>
                </div>
            </div>
            <?php $i++; ?>
        <?php } ?>
        <?php wp_reset_postdata(); ?>
    </div>
<?php } ?>

Test it on your website. It should display something like the screenshot below.

I hope you understand adding the frequently asked questions section in WordPress. Please share your thoughts and suggestions in the comment section below.

Related Articles

• How to Add Custom Endpoints to WordPress API
• How to Add Image Field to Taxonomy in WordPress
• How to Send WordPress Email Using SMTP Server

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.