From a while we are getting an enquiry,on, how to add FAQ page or Question and Answer  They also asked how to group them as well so that they can create multiple sets of Q&A.

So this allow’s me  to create this piece of article.

In case you dont want to write any code, simply use the Spice FAQ plugin for wordpress

What do we need to create FAQ system ?

• Need a set of fields for creating Question and Answer pair, will do this with the help of custom post types.
• Need labels to categorise the set of Q&A pairs. Technically we need to custom taxonomy for this post type.
• Need a shortcode to embed all in posts/pages.

Lets begin by creating custom post types.

Step 1 Creating Custom Post Type.

WordPress provides a function register_post_types() for creating custom post types. But I dint want to get in the details of this function in this article. So for the sake of simplicity you can use  a plugin “Custom Post Type Ui” for creating this. This plugin provides you an UI for creating this. Below find the code snippet

add_action('init', 'webr_faq_post_type');
function webr_faq_post_type() {
	register_post_type('webr_faq', array(
		'label' => 'Faq',
		'description' => '',
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'capability_type' => 'post',
		'map_meta_cap' => true,
		'hierarchical' => false,
		'rewrite' => array('slug' => 'faq', 'with_front' => true),
		'query_var' => true,
		'supports' => array('title','editor','excerpt','thumbnail','author','page-attributes'),
		'labels' => array (
		'name' => 'Faq',
		'singular_name' => 'Faq',
		'menu_name' => 'Faq',
		'add_new' => 'Add Faq',
		'add_new_item' => 'Add New Faq',
		'edit' => 'Edit',
		'edit_item' => 'Edit Faq',
		'new_item' => 'New Faq',
		'view' => 'View Faq',
		'view_item' => 'View Faq',
		'search_items' => 'Search Faq',
		'not_found' => 'No Faq Found',
		'not_found_in_trash' => 'No Faq Found in Trash',
		'parent' => 'Parent Faq',
		)
		) 
	); 
}

Step 2 Creating Custom Taxonomy

If you don’t care regarding categorizing sets of questions you can ignore this step but if you do need to categorize than follow this step. As many of you are are already aware that WordPress provides this functionality in the form of custom taxonomy.

The essential function here is register_taxonomy(). But again you can use “Custom Post Type Ui” for adding it graphically.

Below find the code snippet

add_action('init', 'webr_faq_post_type_taxonomy');
function webr_faq_post_type_taxonomy() {
		register_taxonomy( 'webr_faq_categories',array (
		  0 => 'webr_faq',
		),
		array( 'hierarchical' => true,
			'label' => 'FAQ Categories',
			'show_ui' => true,
			'query_var' => true,
			'show_admin_column' => false,
			'labels' => array (
		  'search_items' => 'Faq Category',
		  'popular_items' => '',
		  'all_items' => '',
		  'parent_item' => '',
		  'parent_item_colon' => '',
		  'edit_item' => '',
		  'update_item' => '',
		  'add_new_item' => 'Add New Faq Category',
		  'new_item_name' => 'New Faq Category',
		  'separate_items_with_commas' => '',
		  'add_or_remove_items' => '',
		  'choose_from_most_used' => '',
		)
		) 
	); 
}

Now , for categorizing sets of questions add categories as you normally do in case of  WordPress.  Go to Faq tag and create FAQ Categories.

Step 3 Creating  FAQ  shortcode

Here comes the most technical part of this article creating shortcode. I am a big time fan of these WordPress shortcodes. Basically we are going to make these question answers embeddable into posts and pages.

Now we need to focus on

• Query these faq post type
• Creating an attribute in shortcode for filtering.
•  Displaying  question and answer as title and content.

 

if ( ! function_exists( 'webr_faq_shortcode' ) ) {

    function webr_faq_shortcode( $atts ) {
        extract( shortcode_atts(
                array(
                    // category slug attribute - defaults to blank
                    'category' => '',
                    // full content or excerpt attribute - defaults to full content
                    'excerpt' => 'false',
                ), $atts )
        );

        $output = '';

        $query_args = array(
            // show all posts matching this query
            'posts_per_page'    =>   -1,
            // show the 'webr_faq' custom post type
            'post_type'         =>   'webr_faq',
            // query related to shortcode attributes on faq
            'tax_query'         =>   array(
                array(
                    'taxonomy'  =>   'webr_faq_categories',
                    'field'     =>   'slug',
                    'terms'     =>   $category,
                )
            ),            
        );

        // get the posts with our query arguments
        $faq_posts = get_posts( $query_args );

        $output .= '<div class="webr-faq">';

        // handle our custom loop
        foreach ( $faq_posts as $post ) {
            setup_postdata( $post );
            $faq_item_title = get_the_title( $post->ID );
            $faq_item_permalink = get_permalink( $post->ID );
            $faq_item_content = get_the_content();
            if( $excerpt == 'true' )
                $faq_item_content = get_the_excerpt() . '<a href="' . $faq_item_permalink . '">' . __( 'More...', 'webr_faq' ) . '</a>';

            $output .= '<div class="webr-faq-item">';
            $output .= '<h2 class="faq-item-title">' . $faq_item_title . '</h2>';
            $output .= '<div class="faq-item-content">' . $faq_item_content . '</div>';
            $output .= '</div>';
        }

        wp_reset_postdata();

        $output .= '</div>';

        return $output;
    }

    add_shortcode( 'faq', 'webr_faq_shortcode' );

}

Here I am not concerned regarding the style of faq system. But you can style it with the help of these classes added here webr-faq-item,faq-item-title and faq-item-content

Step 4 : Wrapping all the above snippet in plugin.

Since WordPress consider the custom post types as a part of plugin territory, hence, creating a plugin for the above snippet.

Your plugin snippet looks somewhat like this.

<?php
/*
Plugin Name: FAQ System By Webriti
Plugin URI: https://webriti.com
Description: Helps you create an FAQ section for your WordPress site
Version: 1.0
Author: webriti
Author URI: https://webriti.com
License: Public Domain
*/

add_action('init', 'webr_faq_post_type');
function webr_faq_post_type() {
register_post_type('webr_faq', array(
'label' => 'Faq',
'description' => '',
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'capability_type' => 'post',
'map_meta_cap' => true,
'hierarchical' => false,
'rewrite' => array('slug' => 'faq', 'with_front' => true),
'query_var' => true,
'supports' => array('title','editor','excerpt','thumbnail','author','page-attributes'),
'labels' => array (
'name' => 'Faq',
'singular_name' => 'Faq',
'menu_name' => 'Faq',
'add_new' => 'Add Faq',
'add_new_item' => 'Add New Faq',
'edit' => 'Edit',
'edit_item' => 'Edit Faq',
'new_item' => 'New Faq',
'view' => 'View Faq',
'view_item' => 'View Faq',
'search_items' => 'Search Faq',
'not_found' => 'No Faq Found',
'not_found_in_trash' => 'No Faq Found in Trash',
'parent' => 'Parent Faq',
)
)
);
}

add_action('init', 'webr_faq_post_type_taxonomy');
function webr_faq_post_type_taxonomy() {
register_taxonomy( 'webr_faq_categories',array (
0 => 'webr_faq',
),
array( 'hierarchical' => true,
'label' => 'FAQ Categories',
'show_ui' => true,
'query_var' => true,
'show_admin_column' => false,
'labels' => array (
'search_items' => 'Faq Category',
'popular_items' => '',
'all_items' => '',
'parent_item' => '',
'parent_item_colon' => '',
'edit_item' => '',
'update_item' => '',
'add_new_item' => 'Add New Faq Category',
'new_item_name' => 'New Faq Category',
'separate_items_with_commas' => '',
'add_or_remove_items' => '',
'choose_from_most_used' => '',
)
)
);
}

if ( ! function_exists( 'webr_faq_shortcode' ) ) {

function webr_faq_shortcode( $atts ) {
extract( shortcode_atts(
array(
// category slug attribute - defaults to blank
'category' => '',
// full content or excerpt attribute - defaults to full content
'excerpt' => 'false',
), $atts )
);

$output = '';

$query_args = array(
// show all posts matching this query
'posts_per_page' => -1,
// show the 'webr_faq' custom post type
'post_type' => 'webr_faq',
// query related to shortcode attributes on faq
'tax_query' => array(
array(
'taxonomy' => 'webr_faq_categories',
'field' => 'slug',
'terms' => $category,
)
),
);

// get the posts with our query arguments
$faq_posts = get_posts( $query_args );

$output .= '<div class="webr-faq">';

// handle our custom loop
foreach ( $faq_posts as $post ) {
setup_postdata( $post );
$faq_item_title = get_the_title( $post->ID );
$faq_item_permalink = get_permalink( $post->ID );
$faq_item_content = get_the_content();
if( $excerpt == 'true' )
$faq_item_content = get_the_excerpt(); . '<code><a href="</code>' . $faq_item_permalink . '">' . __( 'More...', 'webr_faq' ) . '</a>';
$output .= '<div class="webr-faq-item">';
$output .= '<h2 class="faq-item-title">' . $faq_item_title . '</h2>';
$output .= '<div class="faq-item-content">' . $faq_item_content . '</div>';
$output .= '</div>';
}

wp_reset_postdata();

$output .= '</div>';

return $output;
}

add_shortcode( 'faq', 'webr_faq_shortcode' );

}
?>

Now all you need to do is activate the faq plugin and set all your question and answers pairs in the Faq menu created on plugin activation.

Hope you will find this article helpful.