WordPress Web Application Development

A vast majority of web development frameworks are built to work with MVC architecture, where an application is separated into independent layers called models, views, and controllers. In MVC, we have a clear understanding of what goes where and when each of the layers will be integrated in the process.

So, the first thing most developers will look at is the availability of MVC in WordPress. Unfortunately, WordPress is not built on top of the MVC architecture. This is one of the main reasons why developers refuse to choose it as a development framework. Even though it is not MVC, we can create custom execution process to make it work like a MVC application. Also, we can find frameworks such as WP MVC, which can be used to take advantage of both WordPress's native functionality and a vast plugin library and all of the many advantages of an MVC framework. Unlike other frameworks, it won't have the full capabilities of MVC. However, unavailability of the MVC architecture doesn't mean that we cannot develop quality applications with WordPress. There are many other ways to separate concerns in WordPress applications.

WordPress on the other hand, relies on a procedural event-driven architecture with its action hooks and filters system. Once a user makes a request, these actions will get executed in a certain order to provide the response to the user. You can find the complete execution procedure at http://codex.wordpress.org/Plugin_API/Action_Reference.

In the event-driven architecture, both model and controller code gets scattered throughout the theme and plugin files. In the upcoming chapters, we will look at how we can separate these concerns with the event-driven architecture, in order to develop maintainable applications.

Built-in user management features are quite advanced in order to cater to the most common requirements of any web application. Its user roles and capability handling makes it much easier to control the access to specific areas of your application. We can separate users into multiple levels using roles and then use capabilities to define the permitted functionality for each user level. Most full stack frameworks don't have a built-in user management features, and hence, this can be considered as an advantage of using WordPress.

File uploading and managing is a common and time consuming task in web applications. Media uploader, which comes built-in with WordPress, can be effectively used to automate the file-related tasks without writing much source code. A super-simple interface makes it so easy for application users to handle file-related tasks.

WordPress offers a simple template management system for its themes. It is not as complex or fully featured as a typical template engine. However, it offers a wide range of capabilities in CMS development perspective, which we can extend to suit web applications.

In most scenarios, we will be using the existing database table structure for our application development. WordPress database management functionalities offer a quick and easy way of working with existing tables with its own style of functions. Unlike other frameworks, WordPress provides a built-in database structure, and hence most of the functionalities can be used to directly work with these tables without writing custom SQL queries.

Comprehensive support for routing is provided through permalinks. WordPress makes it simple to change the default routing and choose your own routing, in order to built search engine friendly URLs.

Building an API is essential for allowing third-party access to our application. WordPress provides built-in API for accessing CMS-related functionality through its XML-RPC interface. Also, developers are allowed to create custom API functions through plugins, making it highly flexible for complex applications.

Caching in WordPress can be categorized into two sections called persistent and nonpersistent cache. Nonpersistent caching is provided by WordPress cache object while persistent caching is provided through its Transient API. Caching techniques in WordPress is a simple compared to other frameworks, but it's powerful enough to cater to complex web applications.

As developers, you might have worked with cron jobs for executing certain tasks at specified intervals. WordPress offers same scheduling functionality through built-in functions, similar to a cron job. However, WordPress cron execution is slightly different from normal cron jobs. In WordPress, cron won't be executed unless someone visits the site. Typically, it's used for scheduling future posts. However, it can be extended to cater complex scheduling functionality.

The power of WordPress comes from its plugin mechanism, which allows us to dynamically add or remove functionality without interrupting other parts of the application. Widgets can be considered as a part of the plugin architecture and will be discussed in detail further in this chapter.

The design of a WordPress site comes through the theme. This site offers many built-in template files to cater to the default functionality. Themes can be easily extended for custom functionality. Also, the design of the site can be changed instantly by switching compatible theme.

Actions and filters are part of the WordPress hook system. Actions are events that occur during a request. We can use WordPress actions to execute certain functionalities after a specific event is completed. On the other hand, filters are functions that are used to filter, modify, and return the data. Flexibility is one of the key reasons for the higher popularity of WordPress, compared to other CMS. WordPress has its own way of extending functionality of custom features as well as core features through actions and filters. These actions and filters allow the developers to build advanced applications and plugins, which can be easily extended with minor code changes. As a WordPress developer, it's a must to know the perfect use of these actions and filters in order to build highly flexible systems.

WordPress offers a fully featured backend for administrators as well as normal users. These interfaces can be easily customized to adapt to custom applications. All the application-related lists, settings, and data can be handled through the admin section.

The overall collection of features provided by WordPress can be effectively used to match the core functionalities provided by full stack PHP frameworks.

Most of us are used to seeing WordPress as a CMS. In its default view, a theme is a collection of files used to skin your web application layouts. In web applications, it's recommended to separate different components into layers such as models, views, and controllers. WordPress doesn't adhere to the MVC architecture. However, we can easily visualize themes or templates as the presentation layer of WordPress.

In simple terms, views should contain the HTML needed to generate the layout and all the data it needs, should be passed to the views. WordPress is built to create content management systems, and hence, it doesn't focus on separating views from its business logic. Themes contain views, also known as template files, as a mix of both HTML code and PHP logic. As web application developers, we need to alter the behavior of existing themes, in order to limit the logic inside templates and use plugins to parse the necessary model data to views.

Typically, posts or pages created in WordPress consist of five common sections. Most of these components will be common across all the pages in the website. In web applications, we also separate the common layout content into separate views to be included inside other views. It's important for us to focus on how we can adapt the layout into web application-specific structure. Let's visualize the common layout of WordPress using the following screen:

Having looked at the structure, it's obvious that header, footer, and the content area are mandatory even for web applications. However, the footer and comments section will play a less important role in web applications, compared to web pages. Sidebar is important in web applications, even though it won't be used with the same meaning. It can be quite useful as a dynamic widget area.

Web applications can be categorized as projects and products. A project is something we develop targeting specific requirements of a client. On the other hand, a product is an application created based on the common set of requirements for wide range of users. Therefore, customizations will be required on layouts of your product based on different clients.

WordPress themes make it simple to customize the layout and features using child themes. We can make the necessary modifications in the child theme while keeping the core layout in the parent theme. This will prevent any code duplications in customizing layouts. Also, the ability to switch themes is a powerful feature that eases the layout customization.

The administration interface of an application plays one of the most important roles behind the scenes. WordPress offers one of the most powerful and easy-to-access admin areas amongst other competitive frameworks. Most of you should be familiar with using admin area for CMS functionalities. However, we will have to understand how each component in the admin area suits the development of web applications.

In normal circumstances, WordPress developers use functions that involve application logic scattered across theme files and plugins. Even some of the developers change the core files of WordPress, which is considered a very bad practice. In web applications, we need to be much more organized.

In the Role of WordPress theme section, we discussed the purpose of having a theme for web applications. Plugins will be and should be used to provide the main logic and content of your application. The plugins architecture is a powerful way to add or remove features without affecting the core. Also, we have the ability to separate independent modules into their own plugins, making it easier to maintain. On top of this, plugins have the ability to extend other plugins.

The official documentation of WordPress refers to widgets as a component that adds content and features to your sidebar. In a typical blogging or CMS user's perspective, it's a completely valid statement. Actually, the widgets offer more in web applications by going beyond the content that populates sidebars. The following screenshot shows a typical widgetized sidebar of a website:

We can use dynamic widgetized areas to include complex components as widgets, making it easy to add or remove features without changing source code. The following screenshot shows a sample dynamic widgetized area. We can use the same technique for developing applications with WordPress.

Throughout these sections, we covered the main components of WordPress and how they fit into the actual web application development. Now, we have a good understanding of the components in order to plan our application developed throughout this book.

Developers and designers who work online as freelancers know the importance of a personal profile to show your skills for improved reputation. However, most people, including experts who work full-time jobs don't maintain such profiles, and hence get unnoticed among co-developers. The application developed throughout this book is intended to provide the opportunity for web professionals to create their public profiles and connect with the experts in the field.

This application will be targeted towards all the people who are involved in web development and design. I believe that both output of this application and the contents of the book will be ideal for the PHP developers who want to jump into WordPress application development.

Basically, our application consists of both frontend and backend, which is common to most web applications. In the frontend, both registered and unregistered users will have different functionalities based on their user roles. The following diagram shows the structure of our application home page:

The backend will be developed by customizing the built-in admin features of WordPress. Existing and new functionalities of the admin area will be customized based on the user role permissions.

Application consists of four user roles, including the built-in admin role. User roles and their respective functionalities are explained in the following section:

Our main intention of building this application is to learn how WordPress can be adapted to advanced web application development. Therefore, we will be considering various small requirements, rather than covering all aspects of a similar system. Each of the functionalities will be focused on explaining various modules in web applications and the approach of WordPress in building similar functionality.

Let's consider the following list of functions, which we will be developing throughout this book:

While these are our main functionalities, we will also develop small features and components on top of them to explain the major aspects of web development.

If you are still not convinced, you can take a look at the various types of WordPress powered web applications at http://www.innovativephp.com/demo/packt/wordpress_applications.

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.

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

Now, it's time to get things started.

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:

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:

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

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.

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

Once the users provide their answers, the creator of the question should be able to mark them as correct or incorrect answers. So, we will implement a button for each answer to mark the status. Only the creator of the questions will be able to mark the answers. Once the button is clicked, an AJAX request will be made to store the status of the answer in the database.

Implementation of the wpwa_comment_list function goes inside the wpwa-questions.php file of our plugin. This function contains lengthy code, which is not necessary for our explanations. Hence, I'll be explaining the important sections of the code. It's ideal to work with the full code for the wpwa_comment_list function from the source code folder:

function wpwa_comment_list( $comment, $args, $depth ) {
  global $post;
  $GLOBALS['comment'] = $comment;
  // Get current logged in user and author of question
  $current_user = wp_get_current_user();
  $author_id = $post->post_author;
  $show_answer_status = false;
  // Set the button status for authors of the question
  if ( is_user_logged_in() && $current_user->ID == $author_id ) {
      $show_answer_status = true;
    }
    // Get the correct/incorrect status of the answer
    $comment_id = get_comment_ID();
    $answer_status = get_comment_meta( $comment_id, "_wpwa_answer_status", true );
    // Rest of the Code
}

The wpwa_comment_list function is used as the callback function of the comments list, and hence, it will contain three parameters by default. Remember that the button for marking the answer status should be only visible to the creator of the question.

In order to change the status of answers, follow these steps:

Before this, we need to see how we can include our scripts and styles into WordPress plugins. Here is the code for including custom scripts and styles for our plugin. Copy the following code into the wpwa-questions.php file of your plugin:

function wpwa_frontend_scripts() {
  wp_enqueue_script( 'jquery' );
  wp_register_script( 'wpwa-questions', plugins_url( 'js/questions.js', __FILE__ ), array('jquery'), '1.0', TRUE );
  wp_enqueue_script( 'wpwa-questions' );
  wp_register_style( 'wpwa-questions-css', plugins_url( 'css/questions.css', __FILE__ ) );
  wp_enqueue_style( 'wpwa-questions-css' );
  $config_array = array(
    'ajaxURL' => admin_url( 'admin-ajax.php' ),
    'ajaxNonce' => wp_create_nonce( 'ques-nonce' )
  );
  wp_localize_script( 'wpwa-questions', 'wpwaconf', $config_array );
}
add_action( 'wp_ajax_mark_answer_status', 'wpwa_mark_answer_status' );

WordPress comes in-built with an action hook called wp_enqueue_scripts, for adding JavaScript and CSS files. The wp_enqueue_script action is used to include script files into the page while the wp_register_script action is used to add custom files. Since jQuery is built-in to WordPress, we can just use the wp_enqueue_script action to include jQuery into the page. We also have a custom JavaScript file called questions.js, which will contain the functions for our application.

Inside JavaScript files, we cannot access the PHP variables directly. WordPress provides a function called wp_localize_script to pass PHP variables into script files. The first parameter contains the handle of the script for binding data, which will be wp_questions in this scenario. The second parameter is the variable name to be used inside JavaScript files to access these values. The third and final parameters will be the configuration array with the values.

Then, we can include our questions.css file using the wp_register_style and wp_enqueue_style functions, which will be similar to JavaScript, file inclusion syntax, we discussed previously. Now, everything is set up properly to create the AJAX request.

Once the author clicks the button, the status has to be saved to the database as true or false depending on the current status of the answer. Let's go through the jQuery code located inside the questions.js file for making the AJAX request to the server:

jQuery(document).ready(function($) {
  $(".answer-status").click( function() {
    $(body).on("click", ".answer-status" , function() {
      // Get the button object and current status of the answer
      var answer_button = $(this);
      var answer_status  = $(this).attr("data-ques-status");
      // Get the ID of the clicked answer using hidden field
      var comment_id = $(this).parent().find(".hcomment").val();
      var data = {
      "comment_id":comment_id,
      "status": answer_status
    };
  // Create the AJAX request to save the status to database
  $.post( wpwaconf.ajaxURL, {
    action:"mark_answer_status",
    nonce:wpwaconf.ajaxNonce,
    data : data,
  }, function( data ) {
    if("success" == data.status){
      if("valid" == answer_status){
         answer_buttonval("Mark as Incorrect");
         answer_button.attr(" data-ques-status","invalid");
      }else{
        answer_button.val("Mark as Correct");
        answer_button.attr(" data-ques-status","valid");
        }
      }
    }, "json");
  });
});

The preceding code creates a basic AJAX request to the mark_answer_status action. Most of the code is self-explanatory and code comments will help you to understand the process.

The next step of this process is to implement the server-side code for handling AJAX request. First, we need to define AJAX handler functions using the WordPress add_action function. Since logged-in users are permitted to mark the status, we don't need to implement the add_action function for wp_ajax_nopriv_{action}:

add_action( 'wp_ajax_mark_answer_status', 'wpwa_mark_answer_status' );

Implementation of the wpwa_mark_answer_status function is given in the following code:

function wpwa_mark_answer_status() {
  $data = isset( $_POST['data'] ) ? $_POST['data'] : array();
  $comment_id     = isset( $data["comment_id"] ) ? absint($data["comment_id"]) : 0;
  $answer_status  = isset( $data["status"] ) ? $data["status"] : 0;
  // Mark answers in correct status to incorrect
  // or incorrect status to correct
  if ("valid" == $answer_status) {
    update_comment_meta( $comment_id, "_wpwa_answer_status", 1 );
  } else {
  update_comment_meta( $comment_id, "_wpwa_answer_status", 0 );
  }
  echo json_encode( array("status" => "success") );
  exit;
}

We can get the necessary data from the $_POST array and use to mark the status of the answer using the update_comment_meta function. This example contains the most basic implementation of data saving process. In real applications, we need to implement necessary validations and error handling.

Now, the author who asked the question has the ability to mark answers as correct or incorrect. So, we have implemented a nice and simple interface for creating a question-answer site with WordPress. The final task of the process will be the implementation of questions list.

Usually, WordPress uses the archive.php file of the theme, for generating post lists of any type. We can use a file called archive-{post type}.php for creating different layouts for different post types:

Throughout this section, we looked at how we can convert the existing functionalities of WordPress for building a simple question-answer interface. We took the quick and dirty path for this implementation by mixing HTML and PHP code inside both, themes and plugins.

This is one of the major requirements in such an application. Here, we have a very basic layout and it's difficult to know whether this is a question or just a normal post. Consider the following screenshot for a well-designed question interface:

Remember that we customized the comments list for adding new options. Similarly, we can customize the design of questions to create an interface such as the previous screenshot by using a separate template file for the questions custom post type. We have to create a file called single-wpwa_question.php and change the design and functionality as we want.

Categories allow us to filter the results and limit it to a certain extent. It's an essential feature in the question-answer application so that users can directly view questions related to their topic instead of browsing all the questions. WordPress provides categories by default. However, these categories are mainly intended for posts. Therefore, we have to use custom taxonomies to create categories for custom post types such as questions. More details about taxonomies will be discussed in the following chapters.

Currently, our application can post questions without any approval process. However, this is not the ideal implementation as it can create a lot of spam questions. In a well-built application, there should be a feature to approve/reject questions when needed. This feature can be easily built with WordPress admin lists. We have a list of questions in the backend, and we can use the Bulk Actions dropdown on top to add custom actions and implement this feature.

The author who asked the question can mark the answers as correct or incorrect. However, there can be scenarios where answers are not marked as correct are more suitable than answers marked as correct. Therefore, we can introduce star rating features to answers so that public can rate the answers. The person who looks for the answer can consider the rating before choosing answers. Implementation of this requirement is similar to the functionality of the Mark as Correct button. We have to get a js plugin for star rating and integrate to the interface through the wpwa_comment_list function. Then we can use AJAX to mark the status of answers.

We have looked at some of the possible enhancements to such an application. You can think of many more such functionalities and implement them in your own version.

In the following chapters, we'll see the limitations in this approach in complex web applications and how we can organize things better to write quality and maintainable code.