Building a question-answer interface

Throughout the previous sections, we learned the basics of web application frameworks while looking at how WordPress fits into web development. By now, you should be able to visualize the potential of WordPress for application development and how it can change your career as developers. Being human, we always prefer practical approach to learn new things over the more conventional theoretical approach.

So, I will complete this chapter by converting default WordPress functionality into a simple question-answer interface such as Stack Overflow, to give you a glimpse of what we will develop throughout this book.

Prerequisites for building a question-answer interface

We will be using version 4.2.2 as the latest stable version; this is available at the time of writing this book. I suggest that you set up a fresh WordPress installation for this book, if you haven't already done so.

Tip

Also, we will be using the Twenty Fourteen theme, which is available with default WordPress installation. Make sure that you activate the Twenty Fourteen theme in your WordPress installation.

First, we have to create an outline containing the list of tasks to be implemented for this scenario:

1. Create questions using the admin section of WordPress.
2. Allow users to answer questions using comments.
3. Allow question creators to mark each answer as correct or incorrect.
4. Highlight the correct answers of each question.
5. Customize the question list to include a number of answers and number of correct answers.

Now, it's time to get things started.

Creating questions

The goal of this application is to let people submit questions and get answers from various experts in the same field. First off, we need to create a method to add questions and answers. By default, WordPress allows us to create posts and submit comments to the posts. In this scenario, a post can be considered as the question and comments can be considered as the answers. Therefore, we have the capability of directly using normal post creation for building this interface.

However, I would like to choose a slightly different approach by using custom post types plugin, which you can find at http://codex.wordpress.org/Post_Types#Custom_Post_Types, in order to keep the default functionality of posts and let the new functionality be implemented separately without affecting the existing ones. We will create a plugin to implement the necessary tasks for our application:

1. First off, create a folder called wpwa-questions inside the /wp-content/plugins folder and add a new file called wpwa-questions.php.
2. Next, we need to add the block comment to define our file as a plugin: /* Plugin Name: WPWA Questions Plugin URI: - Description: Question and Answer interface for developers Version: 1.0 Author: Rakhitha Nimesh Author URI: http://www.innovativephp.com/ License: GPLv2 or later Text Domain: wpwa-questions */
3. Having created the main plugin file, we can move into creating a custom post type called wpwa-question using the following code snippet.
4. Include this code snippet in your wpwa-questions.php file of the plugin: add_action('init', 'register_wp_questions'); function register_wp_questions() { $labels = array( 'name' => __( 'Questions', 'wpwa_questions' ), 'singular_name' => __( 'Question', 'wpwa_questions'), 'add_new' => __( 'Add New', 'wpwa_questions'), 'add_new_item' => __( 'Add New Question', 'wpwa_questions'), 'edit_item' => __( 'Edit Questions', 'wpwa_questions'), 'new_item' => __( 'New Question', 'wpwa_questions'), 'view_item' => __( 'View Question', 'wpwa_questions'), 'search_items' => __( 'Search Questions', 'wpwa_questions'), 'not_found' => __( 'No Questions found', 'wpwa_questions'), 'not_found_in_trash' => __( 'No Questions found in Trash', 'wpwa_questions'), 'parent_item_colon' => __( 'Parent Question:', 'wpwa_questions'), 'menu_name' => __( 'Questions', 'wpwa_questions'), ); $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => __( 'Questions and Answers', 'wpwa_questions'), 'supports' => array( 'title', 'editor', 'comments' ), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post' ); register_post_type( 'wpwa_question', $args ); }

   This is the most basic and default code for custom post type creation, and I assume that you are familiar with the syntax. We have enabled title, editor, and comments in the support section of the configuration. These fields will act the role of question title, question description, and answers. Other configurations contain the default values and hence explanations will be omitted. If you are not familiar, make sure to have a look at documentation on custom post creation at http://codex.wordpress.org/Function_Reference/register_post_type.

   Note

   
   

   Beginner- to intermediate-level developers and designers tend to include the logic inside the functions.php file in the theme. This is considered a bad practice as it becomes extremely difficult to maintain because your application becomes larger. So, we will be using plugins to add functionality throughout this book and drawbacks of the functions.php technique will be discussed in later chapters.

5. Once the code is included, you will get a new section on the admin area for creating questions. This section will be similar to the posts section inside the WordPress admin. Add few questions and insert some comments using different users before we move into the next stage.

Before we go into the development of questions and answers, we need to make some configurations so that our plugin works without any issues. Let's look at the configuration process:

1. First, we have to look at the comment-related settings inside Discussion Settings the WordPress Settings section. Here, you can find a setting called Before a comment appears.
2. Disable both checkboxes so that users can answer and get their answers displayed without approval process. Depending on the complexity of application, you can decide whether to enable these checkboxes and change the implementation.
3. The second setting we have to change is the Permalinks. Once we create a new custom post type and view it on browser, it will redirect you to a 404 page not found page. Therefore, we have to go to the Permalinks section of WordPress Settings and update the Permalinks using the Save Changes button. This won't change the Permalinks. However, this will flush the rewrite rules so that we can use the new custom post type without 404 errors.

Now, we can start working with the answer-related features.

Customizing the comments template

Usually, the comments section is designed to show comments of a normal post.

While using comments for custom features such as answers, we need to customize the existing template and use our own designs.

1. So, open the comments.php file inside the Twenty Fourteen theme.
2. Navigate through the code and you will find a code section similar to the following one: wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 34, ) );
3. First, we need to customize the existing comments list to suit the requirements of the answers list. By default, WordPress will use the wp_list_comments function inside the comments.php file to show the list of answers for each question. We need to modify the answers list in order to include the answer status button. So, we will change the previous implementation as following: if(get_post_type( $post ) == "wpwa_question"){ wp_list_comments('avatar_size=60&type=comment&callback=wpwa_comment_list&style=ol'); }else{ wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 34, ) ); }
4. Here, we will include a conditional check for the post type in order to choose the correct answer list generation function. When the post type is wpwa_question, we call the wp_list_comments function with the callback parameter defined as wpwa_comment_list, which will be the custom function for generating answers list.

   Note

   
   

   Arguments of the wp_list_comments function can be either an array or string. Here, we have preferred array-based arguments over string-based arguments.

In the next section, we will be completing the customization of comments template by adding answer statuses and allowing users to change the statuses.

Changing the status of answers

Once the users provide their...