Wordpress Web Application Development - Third Edition

Rakhitha Nimesh Ratnayake

• Publisher: Packt Publishing
• Year: 2017
• ISBN:
  9781787124752
• Edition: 3
• Topic: Informatique
• Subtopic: Systèmes de gestion de contenu

Learn in easy stages how to rapidly build leading-edge web applications from scratch.About This Book• Develop powerful web applications rapidly with WordPress• Explore the significant features and improvements introduced in WordPress 4.7 by learning the numerous tips and techniques in this book. • Unleash the power of REST API endpoints to make your interaction with websites new and innovative.Who This Book Is ForThis book is targeted at WordPress developers and designers who want to develop quality web applications within a limited time frame and maximize their profits. A prior knowledge of basic web development and design is assumed.What You Will Learn• Develop extendable plugins with the use of WordPress features in core modules• Develop pluggable modules to extend the core features of WordPress as independent modules• Manage permissions for a wide range of content types in web applications based on different user types• Follow WordPress coding standards to develop reusable and maintainable code• Build and customize themes beyond conventional web layouts• Explore the power of core database tables and understand the limitations when designing database tables for large applications• Integrate open source modules into WordPress applications to keep up with the latest open source technologies• Customize the WordPress admin section and themes to create the look and feel of a typical web applicationIn DetailWordPress is one of the most rapidly expanding markets on the Web. Learning how to build complex and scalable web applications will give you the ability and knowledge to step into the future of WordPress. WordPress 4.7 introduces some exciting new improvements and several bug fixes, which further improve the entire development process.This book is a practical, scenario-based guide to expanding the power of the WordPress core modules to develop modular and maintainable real-world applications from scratch. This book consistently emphasizes adapting WordPress features into web applications. It will walk you through the advanced usages of existing features such as access controlling; database handling; custom post types; pluggable plugins; content restrictions; routing; translation; caching; and many more, while you build the backend of a forum management application.This book begins by explaining how to plan the development of a web application using WordPress' core features. Once the core features are explained, you will learn how to build an application by extending them through custom plugin development. Finally, you will explore advanced non-functional features and application integration.After reading this book, you will have the ability to develop powerful web applications rapidly within limited time frames.Style and approachAn extensive, practical guide that explains how to adapt WordPress features, both conventional and trending, for web applications.

Customizing the Dashboard for Powerful Backends

Usually, full-stack PHP frameworks don't provide built-in admin sections. So, developers have to build an application's backend from scratch. WordPress is mainly built on an existing database, which makes it possible to provide a prebuilt admin section. Most of the admin functionality is developed to cater to the existing content management functionality. As developers, you won't be able to develop complex applications without having the knowledge of extending and customizing the capabilities of existing features.

The structure and content of this chapter is built in a way that enables the tackling of the extendable and customizable components of admin screens and features. We will be looking at the various aspects of an admin interface while building the forum management application.

In this chapter, we will cover the following topics:

• Understanding the admin dashboard
• Customizing the admin toolbar
• Customizing the main navigation menu
• Adding features with custom pages
• Building options pages
• Using feature-packed admin list tables
• Adding content restrictions to admin list tables
• Awesome visual presentation with admin themes
• The responsive nature of the admin dashboard

Understanding the admin dashboard

WordPress offers one of the most convenient admin sections among similar frameworks, such as Drupal and Joomla, for building any kind of application. In the previous chapters, we looked at the administration screens related to various areas such as user management, custom post types, and posts. Here, we will look at some of the remaining components from the perspective of web application development. Let's identify the list of sections we will consider:

• The admin toolbar
• The main navigation menu
• Option and menu pages
• Admin list tables
• Responsive design capabilities

Customizing the admin toolbar

The admin toolbar is located at the top of the admin screen to allow direct access to the most used parts of your website. Once you log in, the admin toolbar will be displayed on the admin dashboard as well as at the frontend. Typical web applications contain separate access menus for the frontend and backend. Hence, web developers might find it difficult to understand the availability of the admin toolbar at the frontend from the perspective of the functionality as well as the look and feel. In web applications, it's your choice whether to remove the admin toolbar from the frontend or customize it to provide a useful functionality. In this section, we will look at both methods to simplify your decision about the admin toolbar. First, let's preview the admin toolbar at the frontend with its default settings, as shown in the following screenshot:

Let's add a new class called class-wpwaf-dashboard.php to our main forum manager plugin for functionalities in the admin section:

 class WPWAF_Dashboard { 
 public function __construct() { } 
 } 
 ?> 

As usual, we need to include the class-wpwaf-dashboard.php file and initialize an object of this class inside the WPWAF_Forum class. Now, we are ready to get started with the implementation of admin features.

Removing the admin toolbar

WordPress allows us to configure the visibility settings of the admin toolbar at the frontend. Unfortunately, it does not provide a way to remove the toolbar from the backend. Let's consider the following implementation for removing the admin toolbar from the frontend:

 class WPWAF_Dashboard { 
 public function __construct() { 
 $this-> set_frontend_toolbar(FALSE); 
 } 
 public function set_frontend_toolbar($status) { 
 show_admin_bar($status); 
 } 
 } 

Here, we use a function called set_frontend_toolbar to dynamically set the visibility of the admin toolbar at the frontend. WordPress uses the show_admin_bar function with a Boolean condition to implement this functionality. You might have noticed the difference in implementation compared to the plugins developed in the previous chapters. Earlier, we used to initialize all the functions using actions and filters. Setting the admin toolbar can be implemented as a standalone function without actions or filters. Hence, we call the set_frontend_toolbar function on the admin_dashboard object. Here, we used the FALSE value to hide the admin toolbar at the frontend.

Managing the admin toolbar items

Default items in the admin toolbar are designed to suit generic blogs or websites, and hence it's a must to customize the toolbar items to suit web applications. The profile section in the top-right corner is suitable for any kind of application as it contains common functionalities such as the editing profile, log out, and setting a profile picture. Hence, our focus should be on the menu items on the left side of the toolbar. First, we have to identify how menu items are generated in order to make the customizations. So, let's look at the following code for retrieving the available toolbar menu items list:

 add_action( 'wp_before_admin_bar_render', array( $this, 
 'customize_admin_toolbar' ) ); 

Let's have a look at the following steps:

1. As usual, we start by adding the necessary actions to the constructor of the dashboard plugin, as shown in the following code:

 public function customize_admin_toolbar() { 
 global $wp_admin_bar; 
 $nodes = $wp_admin_bar->get_nodes(); 
 echo "<pre>"; 
 var_dump($nodes); 
 exit; 
 } 

We have access to the wp_admin_bar global object inside the customize_admin_toolbar function. All the toolbar items of the current page will be returned by the get_nodes function.

2. Then, we can use print_r() on the returned result to identify the nodes. The following code is a part of the returned nodes list, and you can see the main item IDs called user-actions and user-info:

 Array
 (
 [user-actions] => stdClass Object
 (
 [id] => user-actions
 [title] =>
 [parent] => my-account
 [href] =>
 [group] => 1
 [meta] => Array()
 )
 [user-info] => stdClass Object
 (
 [id] => user-info
 [title] =><img alt='' src='http://1.gravatar.com/avatar/d3e0fb2e11ff3767d1359c559afbe304? s=64&d=mm&r=g' /><span class='display-name'>Free Member</span>
 [parent] => user-actions
 [href] => http://localhost/packt/wordpress-web-
 develop-test/wp-admin/profile.php 
 ) 
 ) 

3. We need to use those unique IDs to add or remove menu items. Now we will remove all the items other than the first item and create menu items specific to the forum application. So, let's remove the preceding code and modify the customize_admin_toolbar function as follows:

 public function customize_admin_toolbar() { 
 global $wp_admin_bar; 
 $wp_admin_bar->remove_menu('updates'); 
 $wp_admin_bar->remove_menu('comments'); 
 $wp_admin_bar->remove_menu('new-content'); 
 $wp_admin_bar->remove_menu('customize'); 
 } 

4. By default, the admin toolbar contains four items for site updates, comments and new posts, pages, customize, and so on. Explore the result from print_r and you will find the respective keys for the preceding items such as updates, comments, customize, and new-content.
5. Then, use the remove_menu function on the wp_admin_bar object to remove the menu items from the toolbar. Now, the toolbar should look like the following screenshot:

6. Next, we need to add application-specific items to the toolbar. Since we are mainly focusing on forums, we can have a menu called Forums to contain links to forums and topics, as shown in the following updated code of the customize_admin_toolbar function:

 public function customize_admin_toolbar() { 
 global $wp_admin_bar; 
 // Remove menus 
 if ( current_user_can('edit_wpwaf_topics') ) { 
 $wp_admin_bar->add_menu( array( 
 'id' => 'wpwaf-forums', 
 'title' => __('Forum Components','wpwaf'), 
 'href' => admin_url() 
 )); 

 $wp_admin_bar->add_menu( array( 
 'id' => 'wpwaf-new-topics', 
 'title' => __('Topics','wpwaf'), 
 'href' => admin_url() . "post-new.php?post_type=wpwaf_topic", 
 'parent' => 'wpwaf-forums' 
 )); 
 } 

 if ( current_user_can('edit_posts') ) { 
 $wp_admin_bar->add_menu( array( 
 'id' => 'wpwaf-new-forums', 
 'title' => __('Forums','wpwaf'), 
 'href' => admin_url() . "post-new.php?post_type=wpwaf_forum", 
 'parent' => 'wpwaf-forums' 
 )); 
 } 
 } 

The WordPress wp_admin_bar global object provides a method called add_menu to add new top menus as well as submenus. The preceding code contains the top menu item for administrators, containing two submenu items for forums and topics. We restrict free members and premium members to one menu item called Topics using the respective capabilities.

Other menu items can be implemented similarly and have been omitted here for simplicity. When defining submenus, we have to use the ID of the top menu...