I recently worked with a client of mine, who works as a professional consultant in her area of work. She asked if I could implement a Q&A system, or a FAQ page, to be exact. I said, "Sure, we can just create a page and paste the questions and answers there with different styling," but she said she would create different pages and categorize questions and answers, and for the sake of being more organized, she needed a different approach.
To that end, I'm going to show you how I handled her requests with some simple lines of code using custom post types, taxonomies, and shortcodes.
The Custom Post Type and the Taxonomy
What do we need to build an FAQ system?
We need fields for questions and answers.
We need categories to classify and separate different types of questions and their answers.
In our case, we need a shortcode to embed these question groups or all questions in a page or a post.
Let's begin by creating the custom post type.
Step 1: Creating the Custom Post Type
Naturally, we're going to start off by setting up a custom post type for our FAQ items. We're going to create a new custom post type with the help of the register_post_type() function, but if you want a GUI for creating your post type, you can generate it with GenerateWP's Post Type Generator tool as I did in this example:
Tip: If your project is going to involve more custom post types that can be more complex than this simple FAQ post type, I can suggest a cool tool called SuperCPT which allows you to create new post types with even simpler code. I've written a tutorial about SuperCPT, too, you can check it out here.
Step 2: Creating the Custom Taxonomy
In order to separate different types of questions (like my client's questions and answers about miscarriage and postpartum depression), we're going to need a category system. As many of you already know, WordPress provides this functionality with custom taxonomies.
The essential function here is register_taxonomy() but again, you can use GenerateWP's Taxonomy Generator tool if you need a graphical interface.
Here's the code:
That's it! Now you have an FAQ post type with a taxonomy called "FAQ Categories" linked to each other! Check your administration panel and you'll see the "FAQ Categories" menu item under the "FAQ".
Just like regular post categories, you can add, edit or remove them in the "FAQ Categories" page, or you can add new categories while you're writing a new FAQ item.
Step 3: Creating the [faq] Shortcode
Here comes the fun part: building the shortcode. (If you've read my previous posts, you know that I'm a huge fan of WordPress shortcodes.) We're basically going to make the FAQ items embeddable into posts and pages.
Here's what's going to happen:
query inside our new custom post type,
filter its categories with a shortcode parameter,
display the questions and answers as titles and content,
show an excerpt of the answer with a "More..." link, controlled by another shortcode parameter.
Let's begin building the shortcode. Like the code above, I'm going to include some helpful comments:
That's it! Now we have a neat shortcode to embed our questions and answers. You can style it with the class names tuts-faq, tuts-faq-item, tuts-faq-item-title, and tuts-faq-item-content. Although, it should be fine even if you don't include additional styling.
Step 4: Wrapping Up the Code
Since these bits of code aren't just about styling the front-end but also introducing new functionality, it counts as plugin territory. That's why we must save the code as a plugin. And while we're at it, we should also flush the rewrite rules upon activation and deactivation.
Here's the full code:
Room for Improvement
My client was happy with the results when I showed her how to use it. But here, we can expand the code with more functionality, like...
Accordion Effect: If you'd like to make your FAQ sections more attractive with some toggle effects, you can use some terrific jQuery plugins. If you want to use jQuery UI, there's an amazing tutorial by Shane Osbourne that shows how to do it.
Pagination: If you have a lot of questions and answers for a 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 in the custom query of our shortcode, and add the required code for pagination links below the line with the wp_reset_postdata(); code. Remember to remove the 'no_found_rows' => true, line, though - pagination will not work if you don't remove that!
Random Question: Let's say you want to display one random question and answer on homepage and you want it to change every page refresh. All you need to do is to head to the custom query, change the posts_per_page parameter from -1 to 1 and add another line with the code 'orderby' => 'random', and you're good to go!
Conclusion
This is how you build a simple FAQ system in WordPress through the use of custom post types, custom taxonomies, and shortcodes. I hope you enjoyed this tutorial and you can utilize it in your next project. Don't forget to share the article, if you liked it!
Do you have any ideas to improve this FAQ system? Share your comments below!