FAQ Post Type

Many times we need to list facts with their explanations. This is quite common for programs or devices that have to be explained on how to use them. This tutorial shows the making of a FAQ sheet from a list of FAQ post types. I will make use of a great new HTML5 feature to hide and show the FAQ answers. This can also be used on other browsers with a simple jQuery script as well.

New Post Type

A great feature of WordPress is the ability to make new types of posts. If you look into it, all pages, posts, nav menus, etc. are really the same thing in the database for WordPress. Therefore, it is really easy to create a new type.

First, you need to download the icon for the FAQ post type to be used on the Admin screen. You can get it here:

Next, create a WPPHP script called ‘faqposttype’. If you are not sure about how to do this, please refer to the Documentation for Script Manager. Next, add the following code to that script. This code simply creates a new post type called ‘FAQ’:

//
// This is for registering the tutorial post type.
//
$result = register_post_type('FAQ',array(
   'public'=> true,
   'supports' => array('title',
      'editor',
   ),
   'query_var' => 'FAQs',
   'rewrite' => array(
      'slug' => 'FAQ',
      'with_front' => false,
   ),
   'labels' => array(
      'name' => 'FAQs',
      'singular_name' => 'FAQ',
      'add_new' => 'Add New FAQ',
      'add_new_item' => 'Add New FAQ',
      'edit_item' => 'Edit FAQ',
      'new_item' => 'New FAQ',
      'view_item' => 'View FAQ',
      'search_items' => 'Search FAQs',
      'not_found' => 'FAQ not found',
      'not_found_in_trash' => 'No FAQs are in the Trash'
   ),
   'taxonomies' => array( 'post_tag' ),
   'menu_icon' => 'http://www.customct.com/wp-content/uploads/2012/03/faq.png'
));

To create a new post type, you simply use a single WordPress function call ‘register_post_type’. That one function really does a lot of work. The required parameters to the function is a string with the name of the new post type and an array of data. The data array is were we specify all the functionality that the new post type will have.

This tutorial is not designed to be exhaustive description of this function and the data array. For more information about this function, please refer to the WordPress Codex for register_post_type.

A description of each section that we will use is as follows:

public
If you want the users to be able to search these post types, you have to make them public with this flag. It is a boolean.
supports
These are the types of data that your post type will support. For the FAQ post type, we listed title and editor. This gives the post type a title and content that is editable. The title will be the question and the post contents will be the answer to the question.
query_var
This is a unique global variable that will contain the query for this post type.
labels
This is a large array of strings to use for different areas when talking about this post type. You will want to use the ‘__()’ function on strings that you plan to translate. We are not coding for translation in this example, but you can very easily add this yourself.
taxonomies
This is a very important area. This is were you list the taxonomies that this post will use. If left blank, no taxonomies will be usable with this post type. I set up the post tags taxonomy to enable different types of FAQs based on tags. All of the FAQs for the Script Manager has the taxonomy tag of ‘script-manager’.
menu_icon
This is where you put the path to the menu icon for this post type. If no icon is given, then the menu will have a blank area. Since that is not user friendly, you should supply the proper path to a nice icon. If you have a better one that you made, use it instead.

Now that we have the script for creating the FAQ post type, we need to run it in WordPress each time WordPress sends a page to a viewer. The best way to do this is with an WordPress Action. Go to the ‘Action’ tab in Script Manager, click ‘New’ for a new Action, then supply the name ‘init’. After you click the ‘New’ button under the new name, you will see the script under the Action tab. This new Action will be ran each time WordPress is serving up a page. This will happen after all the plugins, but before the creation of the header for the page. In this script, click the ‘Insert Code’ button in the editor, select ‘WPPHP’, and then select the name of the script. Your script should look like this:

[CodeInsert lang='WPPHP' name='faqposttype' param='']

Now, when you go to the admin screen, you should see the new FAQ post type menu. The menu allows you to view all FAQ post types, add a new one, or look at and add new tags. The tags are important for classifying what product or program that particular FAQ is about. Since you can have more than one tag per FAQ, one FAQ can be used with multiple products.

Now, you need to just create some FAQs. You do this just like you would for the post. Make sure you attach the correct tag for the FAQ. We will be printing out the FAQs by their tag names.

Once you have created some FAQs, we now need to display them in a sheet or page. To create the page, we first need a PHP script that will generate the FAQs from an SQL query. Therefore, create a new WPPHP script with the name ‘FAQList’ and place in it the following code:

//
//Query FAQs from the database.
//
$loop = new WP_Query( array(
   'post_type' => 'FAQ',
   'orderby' => 'title',
   'order' => 'ASC',
   'posts_per_page' => 99,
   'tag' => $list
));

//
// Check if any FAQs were returned.
//
if ( $loop->have_posts() ) {
   //
   // Loop through the FAQs (The Loop).
   //
   while ( $loop->have_posts() ) {
      //
      // Get the post contents into the class variable.
      //
      $loop->the_post();

      //
      // Open the list item and set the div for FAQ class.
      //
      echo '
'; // // Display the FAQ title. // the_title( '
', '', true ); // // Display the excerpt for the FAQ. // echo '

'; echo get_the_content(); echo "

"; } } else { // // If no FAQs are found. // echo '

No FAQ facts have been published.'; }

The first thing the script does is query the database using wp_query. This function starts the ‘Loop’ for cycling through all posts that match the given criteria. Here, we are looking for posts with the FAQ type, a tag supplied by the variable $list, it will be ordered by the ‘title’ in ascending order, and all of the posts that meet this criteria will be given. The $list variable will be filled by the calling of the function inside the page. Therefore, you can use the exact same function for every tag type. That is a lot of functionality in one line!

We start the loop by making sure that we have some FAQ posts to show. Notice, we find out everything we need to know about the database query from the $loop variable we received from the query. If we don’t have any posts, then just say ‘No FAQ facts have been published.’ After the check, we start looping through the posts with a while loop. While we have some posts, we have to get the post into the global variables for the helper functions to work. That is accomplished by ‘$loop->post();’ call.

Now, to formatting the FAQs on the page. We start by setting the div for the FAQ to sit in. This is to set off the rest of the HTML code from what has already been given. It also sets an ID name for referring to in the CSS formatting script. Next, we get the title of the FAQ, which is the question that we will be answering. We get the title from the WordPress ‘Loop’ helper function ‘the_title()’. It is called a ‘Loop’ helper function because it is one of the functions that is only available within the query set up with the wp_query() function. The ‘the_title()’ function accepts two strings: what to place before the title, and what to place after the title. We prefix the title with the details/summary tags for the HTML 5 hidden details tag. It is a great new tag for doing this type of page creation.

With the title in place, we just need the contents. I wrapped the contents inside of a p tag with the id ‘faq_excerpt’. With the id, it is easy to set any type of formatting that we want. We get the content with the function ‘get_the_content()’. This is another of the WordPress ‘Loop’ helper functions. After that, just close out the p and div tags. I also put in a div that clears both sides. That is all we need for creating the FAQ sheet.

Now, create a page for displaying the FAQ. In that page, place the following code:

[CodeInsert lang='JavaScript' name='detail_polyfil' param='']
[CodeInsert lang='WPPHP' name='FAQList' param='$list="Script Manager";']

The first line installs the JavaScript for allowing other browsers that do not currently support the detail/summary tags to perform them properly. That script is obtained from details crossbrowser support. Download that code and place in the JavaScript script with the name ‘detail_polyfil’. The next line is the invoking of the script that we just wrote above with the variable $list set to ‘Script Manger’. That is it!

Conclusion

To view an example of these scripts in use, just go to the FAQ page for Script Manager. There are many other ways you can use this code. Have fun experimenting!

comments powered by Disqus