Create a custom FAQ system with WordPress using custom post types

I recently worked with one of my clients who works as a professional consultant in her field of work. She asked me if I could implement a Q&A system, a FAQ page to be exact. I said, "Sure, we could create a page and paste the questions and answers in different styles" but she said she would create different pages and categorize the questions and answers, and to be more organized she needed a different method.

To do this, I will show you how to handle her request with a few simple lines of code using custom post types, taxonomies, and shortcodes.

Custom post types and categories

What is needed to build a FAQ system?

• We need fields for questions and answers.
• We need categories to classify and distinguish different types of questions and their answers.
• In our case, we need a shortcode to embed these question groups or all questions into a page or post.

Let’s start by creating a custom post type.

Step 1: Create a custom post type

Of course, we'll start by setting up a custom post type for our FAQ project. We will create a new custom post type with the help of the register_post_type() function, but if you want a GUI for creating post types, you can generate one using GenerateWP’s post type generator tool It, like me in this example:

<?php

if ( ! function_exists( 'tuts_faq_cpt' ) ) {

// register custom post type
	function tuts_faq_cpt() {

		// these are the labels in the admin interface, edit them as you like
		$labels = array(
			'name'                => _x( 'FAQs', 'Post Type General Name', 'tuts_faq' ),
			'singular_name'       => _x( 'FAQ', 'Post Type Singular Name', 'tuts_faq' ),
			'menu_name'           => __( 'FAQ', 'tuts_faq' ),
			'parent_item_colon'   => __( 'Parent Item:', 'tuts_faq' ),
			'all_items'           => __( 'All Items', 'tuts_faq' ),
			'view_item'           => __( 'View Item', 'tuts_faq' ),
			'add_new_item'        => __( 'Add New FAQ Item', 'tuts_faq' ),
			'add_new'             => __( 'Add New', 'tuts_faq' ),
			'edit_item'           => __( 'Edit Item', 'tuts_faq' ),
			'update_item'         => __( 'Update Item', 'tuts_faq' ),
			'search_items'        => __( 'Search Item', 'tuts_faq' ),
			'not_found'           => __( 'Not found', 'tuts_faq' ),
			'not_found_in_trash'  => __( 'Not found in Trash', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'              => $labels,
			// we'll only need the title, the Visual editor and the excerpt fields for our post type
			'supports'            => array( 'title', 'editor', 'excerpt', ),
			// we're going to create this taxonomy in the next section, but we need to link our post type to it now
			'taxonomies'          => array( 'tuts_faq_tax' ),
			// make it public so we can see it in the admin panel and show it in the front-end
			'public'              => true,
			// show the menu item under the Pages item
			'menu_position'       => 20,
			// show archives, if you don't need the shortcode
			'has_archive'         => true,
		);
		register_post_type( 'tuts_faq', $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_cpt', 0 );

}

?>

Tip: If your project will involve more custom post types that may be more complex than this simple FAQ post type, I can recommend a cool tool called SuperCPT, It allows you to create new post types with simpler code. I also wrote a tutorial about SuperCPT, which you can view here.

Step 2: Create a custom category

In order to differentiate between different types of questions (such as my client's questions and answers about miscarriage and postpartum depression), we need a category system. As many of you already know, WordPress provides this functionality through custom taxonomies.

The basic function here is register_taxonomy() But again, if you want a graphical interface, you can use GenerateWP's taxonomy generator tool.

code show as below:

<?php

if ( ! function_exists( 'tuts_faq_tax' ) ) {

	// register custom taxonomy
	function tuts_faq_tax() {

		// again, labels for the admin panel
		$labels = array(
			'name'                       => _x( 'FAQ Categories', 'Taxonomy General Name', 'tuts_faq' ),
			'singular_name'              => _x( 'FAQ Category', 'Taxonomy Singular Name', 'tuts_faq' ),
			'menu_name'                  => __( 'FAQ Categories', 'tuts_faq' ),
			'all_items'                  => __( 'All FAQ Cats', 'tuts_faq' ),
			'parent_item'                => __( 'Parent FAQ Cat', 'tuts_faq' ),
			'parent_item_colon'          => __( 'Parent FAQ Cat:', 'tuts_faq' ),
			'new_item_name'              => __( 'New FAQ Cat', 'tuts_faq' ),
			'add_new_item'               => __( 'Add New FAQ Cat', 'tuts_faq' ),
			'edit_item'                  => __( 'Edit FAQ Cat', 'tuts_faq' ),
			'update_item'                => __( 'Update FAQ Cat', 'tuts_faq' ),
			'separate_items_with_commas' => __( 'Separate items with commas', 'tuts_faq' ),
			'search_items'               => __( 'Search Items', 'tuts_faq' ),
			'add_or_remove_items'        => __( 'Add or remove items', 'tuts_faq' ),
			'choose_from_most_used'      => __( 'Choose from the most used items', 'tuts_faq' ),
			'not_found'                  => __( 'Not Found', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'                     => $labels,
			// taxonomy should be hierarchial so we can display it like a category section
			'hierarchical'               => true,
			// again, make the taxonomy public (like the post type)
			'public'                     => true,
		);
		// the contents of the array below specifies which post types should the taxonomy be linked to
		register_taxonomy( 'tuts_faq_tax', array( 'tuts_faq' ), $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_tax', 0 );

}

?>

That's it! Now you have an FAQ post type with taxonomies called "FAQ Categories" that link to each other! Check your admin panel and you will see the "FAQ Category" menu item under "FAQ".

Just like regular post categories, you can add, edit, or delete them in the FAQ Categories page, or add new categories when writing a new FAQ item.

Step 3: Create [faq] Shortcode

Now comes the fun part: building the shortcode. (If you’ve read my previous posts, you know I’m a big fan of WordPress shortcodes.) We’ll basically embed FAQ items into posts and pages.

What happens next:

• Query in our new custom post type,
• Use shortcode parameters to filter its categories,
• Display questions and answers as title and content,
• Display an answer excerpt via a "More..." link, controlled by another shortcode parameter.

Let’s start building the shortcode. As with the code above, I'll add some helpful comments:

<?php

if ( ! function_exists( 'tuts_faq_shortcode' ) ) {

	function tuts_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 = '';
		
		// set the query arguments
		$query_args = array(
			// show all posts matching this query
			'posts_per_page'	=>	-1,
			// show the 'tuts_faq' custom post type
			'post_type'			=>	'tuts_faq',
			// show the posts matching the slug of the FAQ category specified with the shortcode's attribute
			'tax_query'			=>	array(
				array(
					'taxonomy'	=>	'tuts_faq_tax',
					'field'		=>	'slug',
					'terms'		=>	$category,
				)
			),
			// tell WordPress that it doesn't need to count total rows - this little trick reduces load on the database if you don't need pagination
			'no_found_rows'		=>	true,
		);
		
		// get the posts with our query arguments
		$faq_posts = get_posts( $query_args );
		$output .= '<div class="tuts-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...', 'tuts_faq' ) . '</a>';
			
			$output .= '<div class="tuts-faq-item">';
			$output .= '<h3 id="faq-item-title">' . $faq_item_title . '</h3>';
			$output .= '<div class="tuts-faq-item-content">' . $faq_item_content . '</div>';
			$output .= '</div>';
		}
		
		wp_reset_postdata();
		
		$output .= '</div>';
		
		return $output;
	}

	add_shortcode( 'faq', 'tuts_faq_shortcode' );

}

?>

That's it! Now we have a neat shortcode to embed our questions and answers. You can use the class names tuts-faq, tuts-faq-item, tuts-faq-item-title and tuts-faq-item- content Style it. Still, it should be fine even if you don't include the extra styles.

Step 4: Summarize the code

Since these codes not only involve front-end styling, but also introduce new features, it counts as a plugin area. That's why we have to save the code as a plugin. When we do this, we should also refresh the rewrite rules on activation and deactivation.

The complete code is as follows:

<?php
/*
Plugin Name: Simple FAQ System
Plugin URI: http://code.tutsplus.com/
Description: Helps you create an FAQ section for your WordPress website. Shortcode usage: <code>[faq]</code>
Version: 1.0
Author: Barış Ünver
Author URI: http://hub.tutsplus.com/authors/baris-unver
License: Public Domain
*/

if ( ! function_exists( 'tuts_faq_cpt' ) ) {

// register custom post type
	function tuts_faq_cpt() {

		// these are the labels in the admin interface, edit them as you like
		$labels = array(
			'name'                => _x( 'FAQs', 'Post Type General Name', 'tuts_faq' ),
			'singular_name'       => _x( 'FAQ', 'Post Type Singular Name', 'tuts_faq' ),
			'menu_name'           => __( 'FAQ', 'tuts_faq' ),
			'parent_item_colon'   => __( 'Parent Item:', 'tuts_faq' ),
			'all_items'           => __( 'All Items', 'tuts_faq' ),
			'view_item'           => __( 'View Item', 'tuts_faq' ),
			'add_new_item'        => __( 'Add New FAQ Item', 'tuts_faq' ),
			'add_new'             => __( 'Add New', 'tuts_faq' ),
			'edit_item'           => __( 'Edit Item', 'tuts_faq' ),
			'update_item'         => __( 'Update Item', 'tuts_faq' ),
			'search_items'        => __( 'Search Item', 'tuts_faq' ),
			'not_found'           => __( 'Not found', 'tuts_faq' ),
			'not_found_in_trash'  => __( 'Not found in Trash', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'              => $labels,
			// we'll only need the title, the Visual editor and the excerpt fields for our post type
			'supports'            => array( 'title', 'editor', 'excerpt', ),
			// we're going to create this taxonomy in the next section, but we need to link our post type to it now
			'taxonomies'          => array( 'tuts_faq_tax' ),
			// make it public so we can see it in the admin panel and show it in the front-end
			'public'              => true,
			// show the menu item under the Pages item
			'menu_position'       => 20,
			// show archives, if you don't need the shortcode
			'has_archive'         => true,
		);
		register_post_type( 'tuts_faq', $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_cpt', 0 );

}

if ( ! function_exists( 'tuts_faq_tax' ) ) {

	// register custom taxonomy
	function tuts_faq_tax() {

		// again, labels for the admin panel
		$labels = array(
			'name'                       => _x( 'FAQ Categories', 'Taxonomy General Name', 'tuts_faq' ),
			'singular_name'              => _x( 'FAQ Category', 'Taxonomy Singular Name', 'tuts_faq' ),
			'menu_name'                  => __( 'FAQ Categories', 'tuts_faq' ),
			'all_items'                  => __( 'All FAQ Cats', 'tuts_faq' ),
			'parent_item'                => __( 'Parent FAQ Cat', 'tuts_faq' ),
			'parent_item_colon'          => __( 'Parent FAQ Cat:', 'tuts_faq' ),
			'new_item_name'              => __( 'New FAQ Cat', 'tuts_faq' ),
			'add_new_item'               => __( 'Add New FAQ Cat', 'tuts_faq' ),
			'edit_item'                  => __( 'Edit FAQ Cat', 'tuts_faq' ),
			'update_item'                => __( 'Update FAQ Cat', 'tuts_faq' ),
			'separate_items_with_commas' => __( 'Separate items with commas', 'tuts_faq' ),
			'search_items'               => __( 'Search Items', 'tuts_faq' ),
			'add_or_remove_items'        => __( 'Add or remove items', 'tuts_faq' ),
			'choose_from_most_used'      => __( 'Choose from the most used items', 'tuts_faq' ),
			'not_found'                  => __( 'Not Found', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'                     => $labels,
			// taxonomy should be hierarchial so we can display it like a category section
			'hierarchical'               => true,
			// again, make the taxonomy public (like the post type)
			'public'                     => true,
		);
		// the contents of the array below specifies which post types should the taxonomy be linked to
		register_taxonomy( 'tuts_faq_tax', array( 'tuts_faq' ), $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_tax', 0 );

}

if ( ! function_exists( 'tuts_faq_shortcode' ) ) {

	function tuts_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 = '';
		
		// set the query arguments
		$query_args = array(
			// show all posts matching this query
			'posts_per_page'	=>	-1,
			// show the 'tuts_faq' custom post type
			'post_type'			=>	'tuts_faq',
			// show the posts matching the slug of the FAQ category specified with the shortcode's attribute
			'tax_query'			=>	array(
				array(
					'taxonomy'	=>	'tuts_faq_tax',
					'field'		=>	'slug',
					'terms'		=>	$category,
				)
			),
			// tell WordPress that it doesn't need to count total rows - this little trick reduces load on the database if you don't need pagination
			'no_found_rows'		=>	true,
		);
		
		// get the posts with our query arguments
		$faq_posts = get_posts( $query_args );
		$output .= '<div class="tuts-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...', 'tuts_faq' ) . '</a>';
			
			$output .= '<div class="tuts-faq-item">';
			$output .= '<h2 id="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', 'tuts_faq_shortcode' );

}

function tuts_faq_activate() {
	tuts_faq_cpt();
	flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'tuts_faq_activate' );

function tuts_faq_deactivate() {
	flush_rewrite_rules();
}
register_deactivation_hook( __FILE__, 'tuts_faq_deactivate' );

?>

Room for improvement

When I showed my client how to use it, she was delighted with the results. But here we can extend the code with more features like...

1. Accordion Effect: If you want to make the FAQ section more attractive with some switching effects, you can use some great jQuery plugins. If you want to use jQuery UI, Shane Osbourne has a great tutorial on how to do it.
2. Paging: If you have a lot of questions and answers for a certain category and don't want to display all the items at once, you can limit the number of posts by changing the posts_per_page parameter of the query with a custom shortcode, And add the code required for pagination links below the line using wp_reset_postdata(); code. Remember to remove the 'no_found_rows' => true, line, but if you don't remove it, pagination won't work!
3. Random Question: Suppose you want to display a random question and answer on your home page, and you want it to change every time the page refreshes. All you need to do is go to your custom query, change the posts_per_page parameter from -1 to 1 and add another line of code 'orderby' => 'random', and you'll be fine!

in conclusion

This is how you can build a simple FAQ system in WordPress by using custom post types, custom taxonomies, and shortcodes. I hope you enjoyed this tutorial and can use it in your next project. If you liked this article, don’t forget to share it!

Do you have any ideas for improving this FAQ system? Share your comments below!

The above is the detailed content of Create a custom FAQ system with WordPress using custom post types. For more information, please follow other related articles on the PHP Chinese website!