How to Create a FAQ Page with WordPress

Final Product What You'll Be Creating

Download Source Files

Demo View It Online

In the web world, a FAQ page is created specifically for the viewers/customers, and contains general questions and their respective answers about a particular product or service. This tutorial details the process of creating a dedicated FAQ section in the WordPress backend with custom post types, as well as how to spice up the actual page a bit by using jQuery and CSS.

To accomplish our goal, we require a dedicated custom FAQ WordPress post type. That way, we can use the title and the content of these posts to display the FAQs in an innovative and user-friendly way.

Step 1: Installing WordPress

To begin creating the FAQ page, we, of course, must first install WordPress on our localhost. Installing WordPress is a piece of cake; however, if you’re new to this, here is a guide that details the process.
The TwentyTen template is the default theme that ships with WordPress.
Once WordPress is ready to go, we should next create our custom theme, which will implement the FAQ functionality. There are various methods of creating a custom theme. Some prefer to create a new blank white template, while others like to create child themes of the new TwentyTen template. I have been using the Starker’s theme, by Elliot Jay Stocks for a long time now; we’ll use it to create the new theme for our FAQ system.
Download the latest version of the Starker’s blank theme, and move the folder into ‘wp-content/themes’, located within the WordPress installation folder. Also, be sure to rename it to FAQ. Next, login to the backend administration panel of WordPress, click on ‘appearance/themes.’ You will find that the default ‘TwentyTen’ theme is activated, while the new theme, ‘Starkers,’ is listed below it. Activate the Starkers theme.
activate starkers theme
Upon activation, preview the site to verify that everything is, indeed, working properly. If all went according to plan, the site should look somewhat like the following image:
blank starkers theme

Step 2: Implementing the FAQ Custom Post

To implement the FAQ system, we are going to create a custom post type solely for this purpose. This will enable us to manage all the FAQs in one place, especially if the FAQ question base increases with time.
To implement a custom post, edit the functions.php file located in the FAQ theme folder. It will contain a good bit of code, so don’t be scared or confused. Scroll down to the bottom and append the following to add a new custom post. We begin by creating hooking a custom function to the initialization (init) action.
  1. // ADDING CUSTOM POST TYPE FAQ  
  2. add_action('init', 'my_custom_init');  
This custom function will contain all the metadata for the custom post, and will also register the custom post within the WordPress database. Now, within the function, we are first going to define the labels which will be used in the backend administration panels. By labels, I mean the text that is going to show up in the user interface for adding, editing, and searching the FAQs in the admin panel.
  1. $labels = array(  
  2.    'name' => _x('FAQs', 'post type general name'),  
  3.    'singular_name' => _x('FAQ', 'post type singular name'),  
  4.    'add_new' => _x('Add New', 'FAQ'),  
  5.    'add_new_item' => __('Add New FAQ'),  
  6.    'edit_item' => __('Edit FAQ'),  
  7.    'new_item' => __('New FAQ'),  
  8.    'view_item' => __('View FAQ'),  
  9.    'search_items' => __('Search FAQs'),  
  10.    'not_found' =>  __('No FAQs found'),  
  11.    'not_found_in_trash' => __('No FAQs found in Trash'),  
  12.    'parent_item_colon' => ''  
  13.  );  
After we’ve defined the labels, we next define the arguments array for the register_post_type method. These arguments contain all the important information which will define the components of our FAQ post. For example, will it have a tag box; an excerpt box? We pass the array of labels defined above as an argument, as well.
  1. $args = array(  
  2.     'labels' => $labels,  
  3.     'public' => true,  
  4.     'publicly_queryable' => true,  
  5.     'show_ui' => true,  
  6.     'query_var' => true,  
  7.     'rewrite' => true,  
  8.     'capability_type' => 'post',  
  9.     'hierarchical' => false,  
  10.     'menu_position' => 5,  
  11.     'supports' => array('title','editor','thumbnail','custom-fields')  
  12.   );  
Now that the arguments are defined, we can register the custom post type using the register_post_type method. You can learn more about this method by referring to its documentation in the WordPress Codex.
  1. function my_custom_init()  
  2. {  
  3.   $labels = array(  
  4.     'name' => _x('FAQs', 'post type general name'),  
  5.     'singular_name' => _x('FAQ', 'post type singular name'),  
  6.     'add_new' => _x('Add New', 'FAQ'),  
  7.     'add_new_item' => __('Add New FAQ'),  
  8.     'edit_item' => __('Edit FAQ'),  
  9.     'new_item' => __('New FAQ'),  
  10.     'view_item' => __('View FAQ'),  
  11.     'search_items' => __('Search FAQs'),  
  12.     'not_found' =>  __('No FAQs found'),  
  13.     'not_found_in_trash' => __('No FAQs found in Trash'),  
  14.     'parent_item_colon' => ''  
  15.   );  
  16.   $args = array(  
  17.     'labels' => $labels,  
  18.     'public' => true,  
  19.     'publicly_queryable' => true,  
  20.     'show_ui' => true,  
  21.     'query_var' => true,  
  22.     'rewrite' => true,  
  23.     'capability_type' => 'post',  
  24.     'hierarchical' => false,  
  25.     'menu_position' => 5,  
  26.     'supports' => array('title','editor','thumbnail','custom-fields')  
  27.   );  
  28.   register_post_type('faq',$args);  
  29. }  
Check the administration panel to determine if the FAQ type post has, in fact, been added successfully. Hopefully, you’ll see the FAQ tab in the sidebar.
Custom post added to dashboard

Dummy FAQ Posts

Now go ahead and add some demo FAQs, because we need some data for creating and testing the template. The title of each FAQ post should be the question, and the content will be the answer.
Adding some demo posts

Step 3: Coding the Template

So far, we’ve created FAQ custom posts, as well as inserted a set of sample data. Now, we’ll code the template to display the FAQs, accordingly. The main logic I have used for organizing the template is: use the FAQ’s unique ID to link the question to the answers. Hence, we have two parts in the template: the questions section, listing all the FAQ titles; and the answer section, which displays the content of each of the FAQs.
Find the header.php file, open it, delete the div with an id of “access” at the bottom, and also the paragraph which contains the description of the blog. Now add the following code.
  1. <body >  
  2.     <div id="page-wrap">  
  3.     <h1>  
  4.         <a href="" title="" rel="home">  
  5.     </h1>  
  6.     <?php  
  7.     /**  
  8.      * The main template file.  
  9.      *  
  10.      * This is the most generic template file in a WordPress theme  
  11.      * and one of the two required files for a theme (the other being style.css).  
  12.      * It is used to display a page when nothing more specific matches a query.  
  13.      * E.g., it puts together the home page when no home.php file exists.  
  14.      * Learn more: http://codex.wordpress.org/Template_Hierarchy  
  15.      *  
  16.      * @package WordPress  
  17.      * @subpackage Starkers  
  18.      * @since Starkers 3.0  
  19.      */  
  20.      get_header(); ?>  
  21.     <?php  
  22.         query_posts('post_type=faq&order=ASC')  
  23.     ?>  
After we retrieve our FAQ post data, we must frame the architecture of how the questions will be displayed. We shall do it in the following manner. All the content is wrapped within a div with an id of “content.”
  1. <div id="content">  
  2.     <?php if (have_posts()) : ?>  
  3.         <h3>FAQs</h3>  
  4.         <div id="questions">  
  5.             <ul>  
  6.                 <?php while (have_posts()) : the_post(); ?>  
  7.                 <li><a href="#answer<?php the_id() ?>"><?php the_title(); ?></a></li>  
  8.                 <?php endwhile; ?>  
  9.             </ul>  
  10.         </div>  
  11.     <?php else : ?>  
  12.         <h3>Not Found</h3>  
  13.         <p>Sorry, No FAQs created yet.</p>  
  14.     <?php endif; ?>  
The most important part here is where we assign the hyperlink with a value of ‘#answer’ and append the post’’s id to it. We can use this to jump to the answers, when clicked.
After we’ve displayed all of the questions, we “rewind” our posts to return to the beginning.
  1. <?php rewind_posts(); ?>  
Now we will structure how the answers are going to appear, just below the questions.
  1. <?php if (have_posts()) : ?>  
  2.     <div id="answers">  
  3.         <ul>  
  4.             <?php while (have_posts()) : the_post(); ?>  
  5.                 <li id="answer<?php the_id(); ?>">  
  6.                     <h4><?php the_title(); ?></h4>  
  7.                     <?php the_content(); ?>  
  8.                 </li>  
  9.             <?php endwhile; ?>  
  10.         </ul>  
  11.     </div>  
  12.     <?php endif; ?>  
  13.     <?php wp_reset_query(); ?>  
  14. </div>  
  15. <?php get_footer(); ?>  
You can see that we are going to list the content of each post in a list element. Each list element will have an id of “answers” with the post ID appended to it. This is important: when the question is clicked, the view jumps to the content of the respective post. If you’re working along, preview your site; you should see all the posts listed in the architecture described above.
FAQ displated without any styling

Step 4: Styling the Template

Styling of the FAQ page depends entirely on your tastes; you can proceed in any manner you wish. If you’re a designer, feel free to skip Step 4. What I have personally implemented is a smooth and clean layout. When the user clicks on the question, the page smoothly scrolls down to the respective answer and highlights it by changing the colour and increasing the font size. To achieve this, we’ll start by styling the template with CSS. We can make use of CSS3 to add some shadows and transition effects, too. Add the following CSS to styles.css.
  1. body{  
  2.     background-color: #bcbcbc;  
  3. }  
  4. .clear {  
  5.     clear: both;  
  6. }  
  7. h1,h2,h3,h4,h5,h6{  
  8.     color:#424242;  
  9.     font-family:Georgia,Arial,Helvetica,sans-serif;  
  10.     text-shadow: #fff 1px 1px 0px;  
  11. }  
  12. h1 a{  
  13.     color:#424242;  
  14.     font-size:50px;  
  15.     position:relative;  
  16.     top:11px;  
  17.     font-weight: normal;  
  18.     z-index: 100;  
  19. }  
  20. h3{  
  21.     font-size: 20px;  
  22.     font-weight: bold;  
  23.     margin-bottom: 20px;  
  24. }  
  25. h4{  
  26.     font-size: 14px;  
  27.     font-weight: bold;  
  28.     margin-bottom: 10px;  
  29. }  
  30. a{  
  31.     color: #3299bb;  
  32.     text-decoration: none;  
  33.     -moz-transition: all 0.2s ease-in-out;  
  34.     -webkit-transition: all 0.2s ease-in-out;  
  35.     -o-transition: all 0.2s ease-in-out;  
  36.     transition: all 0.2s ease-in-out;  
  37. }  
  38. #page-wrap{  
  39.     width: 750px;  
  40.     position: relative;  
  41.     margin: 0px auto 20px auto;  
  42.     padding-top: 50px;  
  43. }  
  44. #content{  
  45.     background-color: #e9e9e9;  
  46.     padding: 64px 35px 22px;  
  47.     font-size: 14px;  
  48.     font-family: Arial, Helvetica, sans-serif;  
  49.     -webkit-box-shadow: rgba(0,0,0,1) 0px 0px 4px;  
  50.     -moz-box-shadow: rgba(0,0,0,1) 0px 0px 4px;  
  51.     box-shadow: rgba(0,0,0,1) 0px 0px 4px ;  
  52. }  
  53. #content p{  
  54.     text-align:justify;  
  55.     font-size: 12px;  
  56.     line-height: 18px;  
  57.     margin-bottom: 10px;  
  58. }  
  59. #questions{  
  60.     margin-bottom: 50px;  
  61. }  
  62. #questions li{  
  63.     margin-bottom: 20px;  
  64.     color: #3299bb;  
  65.     list-style-type: disc;  
  66.     list-style-position: inside;  
  67. }  
  68. #questions ul li a{  
  69.     font-weight: bold;  
  70. }  
  71. #questions ul li a:hover{  
  72.     color: #00befd;  
  73. }  
  74. #questions ul li a:active{  
  75.     color: #e78c03;  
  76. }  
  77. #answers ul li{  
  78.     margin-bottom: 30px;  
  79.     clear: both;  
  80. }  
  81. #footer{  
  82.     padding-top:5px;  
  83.     text-align:center;  
  84. }  
  85. #footer p{  
  86.     color: #424242;  
  87. }  
  88. #footer a{  
  89.     color: #424242;  
  90.     font-weight: bold;  
  91. }  
After styling the page, we should style the current FAQ. Note that we’ve also added a ‘Top’ button to the current FAQ. To create the button, we’ll use a handful of CSS3 properties.
  1. .current-faq{  
  2.     background-color: #424242;  
  3.     color: #e9e9e9;  
  4.     padding:30px 30px 23px;  
  5. }  
  6. .current-faq h4{  
  7.     color: #e9e9e9;  
  8.     font-weight: bold;  
  9.     font-size:22px;  
  10.     text-shadow: #000 1px 1px 0px;  
  11. }  
  12. .top-button {  
  13.     border-top: 1px solid #96d1f8;  
  14.     background: #2289a8;  
  15.     background: -webkit-gradient(linear, left top, left bottombottom, from(#3299bb), to(#2289a8));  
  16.     background: -moz-linear-gradient(top, #3299bb, #2289a8);  
  17.     padding: 4px 8px;  
  18.     -webkit-border-top-left-radius: 6px;  
  19.     -moz-border-radius-topleft: 6px;  
  20.     border-top-left-radius: 6px;  
  21.     -webkit-box-shadow: rgba(0,0,0,1) -1px -1px 0;  
  22.     -moz-box-shadow: rgba(0,0,0,1) -1px -1px 0;  
  23.     box-shadow: rgba(0,0,0,1) -1px -1px 0;  
  24.     text-shadow: rgba(0,0,0,.4) -1px -1px 0;  
  25.     color: #ffffff;  
  26.     font-size: 11px;  
  27.     font-family: Georgia, serif;  
  28.     text-decoration: none;  
  29.     vertical-align: middle;  
  30.     font-weight: bold;  
  31.     float: rightright;  
  32.     rightright:-30px;  
  33.     position: relative;  
  34. }  
  35. .top-button:hover {  
  36.     border-top-color: #0b93bd;  
  37.     background: #0b93bd;  
  38.     color: #ffffff;  
  39. }  
  40. .top-button:active {  
  41.     border-top-color: #e78c03;  
  42.     background: #e78c03;  
  43. }  
Check if the ‘current’ class is working properly by assigning the class to any of the list elements. The current FAQ should look like the following:
Current Class Styling

Step 5: Adding a Pinch of jQuery UI

We’ll use jQuery UI to add some effects to the page. You can download jQuery UI here. We only need limited use of the whole UI library, hence, downloading only the UI core components will suffice. We also need the jQuery scrollTo plug-in for achieving the smooth scrolling effect — though you could also easily code this functionality on your own. Nonetheless, to save time, you can download the plug-in here.
First, we reference jQuery, the jQuery UI Core files, and the scrollTo plug-in within the header.php file. You can do this by adding the following code just before the wp_head() method.
  1. <?php wp_enqueue_script("jquery"); ?><!--VERY IMPORTANT-->  
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>  
  3. <script src="<?php bloginfo('template_url') ?>/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>  
  4. <script src="<?php bloginfo('template_url') ?>/js/jquery.scrollTo.js" type="text/javascript"></script>  
  5. <script src="<?php bloginfo('template_url') ?>/js/main.js" type="text/javascript"></script>  
The wp_enqueue_script statement is needed in order to load jQuery safely.
To enable our desired functionality, we fetch the value of the href attribute from the clicked element (i.e. the question). This value is the id of the list element which contains the answer. Then, we scroll to the list element, and apply the ‘current’ class. jQuery UI will ensure that the class is implemented on the list element smoothly and dynamically.
  1. $(document).ready(function(){  
  2.     $("div#questions ul a").click(function(){  
  3.         var selected = $(this).attr('href');  
  4.         selected += '"'+selected+'"';  
  5.         /*--Removing the Current class and the top button from previous current FAQs---*/  
  6.         $('.top-button').remove();  
  7.         $('.current-faq').removeClass();  
  8.         $.scrollTo(selected, 400 ,function(){  
  9.             $(selected).addClass('current-faq', 400, function(){  
  10.                 $(this).append('<a href="#" class="top-button">TOP</a>');  
  11.             });  
  12.         });  
  13.         return false;  
  14.     });  
As mentioned earlier, we also have a ‘Top’ button which scrolls the page back to the top.
  1. $('.top-button').live('click',function(){  
  2.         $(this).remove();  
  3.         $('.current-faq').removeClass('current-faq',400,function(){  
  4.             $.scrollTo('0px', 800);  
  5.         });  
  6.         return false;  
  7.     })  
  8. });  

Step 6: Conclusion

What you’ve learned today is merely one way of implementing a FAQ page. WordPress provides the power of custom fields, which can be used to further improve the functionality of the FAQ system. When it comes to adding other features to our FAQ page, your own creativity is the only limit! Feel free to share your ideas in the comments!

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)