WordPress Development Quick Start Guide

Since its inception, WordPress was used as a basic CMS with the primary focus on blogging. After so many years, posts and pages are still the main aspect of WordPress, with the addition of custom post types. The primary feature of many sites is the management of posts. So, you need to master each and every aspect of post creation, editing, displaying, and managing additional data. With the arrival of custom post types, developers can match many of the user data capturing application requirements. Since the basic features such as creating, editing, displaying, and listing are inbuilt with custom post types, developers can focus on extending these features at a rapid pace.

Many large-scale applications such as event management systems, online shops, realestate sites, and job management sites are modeled using custom post types, and hence it's a primary feature in WordPress development.

This is another built-in module with comprehensive functionality for user data, access levels, and permissions. You may find the need for registered members in many modern applications and sites. So, you can use the features of existing user modules to handle basic user data and permissions, while developing advanced features such as frontend login, registration, and profile management with the extension of core features.

Similar to custom post types, you will find many applications with one of the primary features as user management. Forums, online student management systems, and CRMs are some of the examples of high-level user management applications with WordPress.

The process of capturing, processing, and displaying user data is the primary feature of many websites. We already discussed the use of custom post types for simplifying the data modeling process. However, inbuilt custom post type features are only available in the backend. Form management is essential for capturing the user data to the custom post types from the frontend. There are certain limitations that force us to use form management from scratch without using custom post types on some occasions. Such limitations include the use of existing database tables, hooks, and built-in templates in custom post types.

We can add forms using theme templates, shortcodes, or existing hooks. Modern JavaScript libraries will be used to process them while using custom database tables to enhance flexibility. So, this is another essential skill in WordPress development.

Each WordPress site or application is built around a theme and set of plugins. In general, most people prefer to use a high-quality existing theme, while some of them require a complete theme built for them from scratch. Regardless of these preferences, you need to be skilled in theme development, in order to cater to modern trends. Widget-based dynamic screens, responsive layouts, and dynamic content displays based on user preferences are some of the modern trends used in themes. The most common form of development is the customization of existing theme layouts and building new post/page templates.

Modern applications may also require you to add complex features into the theme instead of separating them into plugins. So, you need to have hands-on experience in theme files as well as common theme hooks for building advanced user interfaces.

These are some of the frequently involved areas in WordPress development, and hence you need to be familiar in order to deliver rapid solutions. Apart from these areas, you can extend most WordPress features using existing hooks, as well as build custom features such as APIs, integration of third-party UI components, and so on.

The most basic requirements for running WordPress include PHP, Apache server, and a MySQL database. So, we need to either install these components from scratch or use existing tools such as WAMP, XAMPP, or MAMP. Since this book is about a quick start to WordPress development, we are going to use existing tools without wasting time on manual installation. You can choose the tool depending on your operating system. For this book, we are going to use the WAMP server on the Windows platform.

The WAMP server offers a built-in installation process, and all you need is to provide the requested inputs while going through several well-defined installation screens. Since this is already discussed in several online resources, we are not going to explain the installation process here. You can refer to http://www.wampserver.com/en/ for instructions on setting up WAMP.

Even though we can start the development right away, it's important to have the necessary tools that make our tasks easier as developers, while saving precious time. You can find hundreds of developer tools created to test and debug the code and help you pinpoint the issues in your implementations. Here, we are going to look at some of the most essential tools to support your development.

Client-side monitoring with browser development tools

There was a time when we had to install different extensions to use development tools in different browsers. Now, development tools have become the norm in the latest versions of all modern browsers. These tools provide a wide range of facilities to debug your code. The following screenshot previews the developer tools section of the Chrome browser:

The preceding screenshot previews the Console tab, where you will see errors, notices, and information related to user requests. This tab simplifies the process of tracking and fixing errors in your client-side coding. We can also use other tabs such as Sources, Network, Performance, Security to track AJAX requests, file loading precedence, memory, and bandwidth usage, along with possible security risks.

"AJAX is a short term for Asynchronous JavaScript and XML. AJAX is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page."

– Wikipedia

Other browsers provide built-in development tools with similar features. The Firefox browser consists of Inspector,Console, Debugger, Style Editor, Performance, Memory, Network, and Storage tabs. Internet Explorer consists of DOM Explorer, Console, Debugger, Network, UI Responsiveness, Profiler, and Memory tabs. The main feature set is consistent across all browsers. As a developer, you should use browser tools at least for simple tasks, such as monitoring errors, inspecting HTML tags, tracking AJAX requests, and testing CSS styles.

Server-side monitoring with WordPress plugins

The WordPress plugin repository provides quite a few plugins to help developers track errors, performance issues, styles used in requests, executed hooks, loaded scripts, and various kind of other useful features. It's up to you to choose the number of plugins to use, and which plugins to use. In this section, we are going to look at some of the most popular plugins for debugging and testing.

Query Monitor

This is the most widely used plugin among the recently updated plugins in the debug category. The primary functionality of this plugin is to monitor the database queries in user requests and help you optimize them. We use many plugins to build a WordPress site, and hence each user request may execute a large number of queries. In most scenarios, a considerable amount of queries are not relevant to the user request and executed due to low quality coding from plugin developers. This plugin allows you to track queries by plugin, making it easier to identify the plugins responsible for executing a large number of queries, as well as unnecessary ones.

The following screenshot previews the use of Query Monitor to track the queries executed by the WordPress core and individual plugins:

Apart from monitoring queries, you can also use this plugin to check hooks, scripts, and styles loaded in the current user request. Query Monitor is a must-use plugin for WordPress. You can find more details about Query Monitor plugin at https://wordpress.org/plugins/query-monitor/.

Debug This

This is one of the more recently created plugins to support developers. Unlike Query Monitor, this plugin doesn't have a primary feature. Instead, it offers a wide range of features for tracking all types of features in WordPress. You can track shortcodes, post types, PHP class/function usage, media attachments, and many other things, along with the features we already discussed in Query Monitor.

The following screenshot previews the use of Debug This with the list of available features:

As you may notice, this is an extremely useful tool for developers. The only drawback is the output of information as plain arrays, making it difficult to read. Even though it lacks the proper organization of information using user-friendly screens, you can resolve complex issues without using your own var_dump inside the code. You can find more details about the Debug This plugin at https://wordpress.org/plugins/debug-this/.

Apart from these two plugins, there are more useful plugins to help developers write quality code and save time with error handling and optimization. The following is a list of such plugins to be used in development:

• What The File (https://wordpress.org/plugins/what-the-file/): This plugin allows you to quickly track the templates and template parts used in the current user request. It also supports BuddyPress-based themes.
• Debug Bar (https://wordpress.org/plugins/debug-bar/): This plugin is similar to the Debug This plugin. However, it provides fewer features and a better user interface.

We looked at most popular testing and debugging plugins in the WordPress plugin repository. There are premium plugins and online services for further improving the development process. You can test these plugins and see which ones fit into your development environment.

WordPress uses a configuration file called wp-config.php, located inside the root directory of your WordPress installation. In the preceding section, we went through the installation process, and this file was generated automatically based on the specified information. In order to use the advanced features of WordPress, as well as making manual modifications based on system changes, we will explain this file thoroughly. Let's take a quick look at the initial contents of this file using the following code:

define('DB_NAME', 'wpquick'); 
define('DB_USER', 'wpdadmin'); 
define('DB_PASSWORD', ' GBm+Hq1T1Clyq '); 
define('DB_HOST', 'localhost'); 
define('DB_CHARSET', 'utf8mb4'); 
define('DB_COLLATE', ''); 
 
define('AUTH_KEY',         '}ezywl=_z-&_r-Ter]^)GafZQ!;T}sG{`RI?y.!BDgKKtW6WLqk>FnH<p1@ZsHZ`'); 
define('SECURE_AUTH_KEY',  'm1+,]G-])dt)%T:9ziw;|,]s&k^ ^Z0Vp.7DaSC0U)GT>*GY:jW@'); 
define('LOGGED_IN_KEY',    '&W_%WB%jjS0+_oBN:-cz5]qK<Jv*1{oM vji[~}k(uN*`g>wczC}<6?8t!BX{Z;G'); 
define('NONCE_KEY',       'vL9gM*pJPP3BC>I29+8*f[[)%kI$>)^clg%T;`9ONsl7RXAkzm]oX18Y~1c.;n%6'); 
define('AUTH_SALT',        'y>:&&$GBm+Hq1T1Clyq=Vp{Mk>f;nRofa/f!i}ex(m&-rs&dkT!ja0ilwJD~Lk4qQ'); 
define('SECURE_AUTH_SALT', 'PQMwuucwM`=0z7AwEJO@## }kQ]+o,bl2CZ()!d|*_FEl)>iI'); 
define('LOGGED_IN_SALT',   'XDlT]5pBg4jTg=e#XA2u{CTrdP!SU|aD o&Rq4/}: !Gu_2;)u-nW}0(/EEu4Ysb'); 
define('NONCE_SALT',       'CCX2?iAcCJ{Se5!ViEUO(/E0~/`ez_TZ=oAFrZ?DMru/RzLz(iPv(LwV%L0#a5px'); 
 
$table_prefix  = 'wp_'; 
define('WP_DEBUG', false); 
 
if ( !defined('ABSPATH') ) 
   define('ABSPATH', dirname(__FILE__) . '/'); 
require_once(ABSPATH . 'wp-settings.php'); 

The first section of the file handles database configurations for your site. As you can see, database details are already added based on the inputs you provided in the installation process. You need to modify this section manually when you move the site from a local environment to a live environment, or when you make changes in database details such as username and password. Once database details are modified and saved, it will immediately impact the loading of your site.

The next section defines the WordPress security keys. These keys are automatically generated on WordPress installation. In scenarios where you don't have the security keys, you can go to https://api.wordpress.org/secret-key/1.1/salt/ and generate a new set of keys. This section consists of four keys and four salts for your website. These keys are used to secure the cookies for your users. You don't have to know the meaning of each key or remember the keys. WordPress will use these keys to generate hash values of cookie names as well as cookie values, making it difficult to hack your authentication details. No matter how many security precautions we take, there is a chance of your site getting hacked due to the open source nature of WordPress and use of third-party plugins. In such situations, you can regenerate and add these keys to the config file. This will invalidate all existing cookies and hence all users will have to log in again.

The next two lines define the table prefix and the debug mode. The prefix is configured by the input you provide in the installation process. It's recommended to change the prefix to anything other than wp, to improve security. By default, the debug mode is set to FALSE and hence you won't see any PHP errors on your site. In a development environment, you should change this value to TRUE, in order to identify the errors in code. Once development is completed, you should change it back to FALSE before uploading the file to a live server. The final few lines define the file path, and load the settings file.

This is the most basic version of the wp-config.php file, and it's adequate for handling basic WordPress sites.

As a developer, you will have to build from simple WordPress blogs to fully functional web applications. So, advanced configurations become important for security, advanced features, and the performance of applications. Let's take a quick look at how you can modify the configuration file using other configuration options.

define( 'WP_PLUGIN_DIR', $_SERVER['DOCUMENT_ROOT'] . '/example.com/modules/' ); 
define( 'WP_PLUGIN_URL', 'http://localhost/ example.com /modules/'); 
define( 'UPLOADS', 'modules/media' ); 

define( 'SCRIPT_DEBUG', true ); 
define( 'CONCATENATE_SCRIPTS', false ); 

@ini_set( 'log_errors', 'On' ); 
@ini_set( 'display_errors', 'Off' ); 
@ini_set( 'error_log', '/home/example.com/logs/php_error.log' ); 

The process of WordPress development is slightly more challenging compared to other PHP frameworks. With any other framework, we choose a specific framework version and develop the features for that specific version. It's entirely optional to upgrade our solution's future versions of the framework. However, it's the opposite with WordPress. We can't stick with a specific WordPress version for a long time, especially due to security concerns. Most of you will want to upgrade the version as soon as WordPress releases a new version. Therefore, it's important to develop solutions that don't break with version upgrades. Basically, we should be able to upgrade WordPress without touching any of our code.

So, the first thing you need to understand is where you can place your code files and how you can use the core WordPress files/directories in development. We discussed the main files and directories inside the WordPress directory in the previous section. Let's narrow it down to the files and folders used for custom development. Basically, we have to choose files and folders that are not replaced by WordPress updates. Among the files and folders we discussed, wp-content, wp-config.php, and htaccess are not affected by upgrades. So, our development should focus on these files and folders.

As we mentioned, wp-content is the directory where all the user-uploaded files are stored. So, we need to add our code files inside this directory. Let's explore the contents of this directory to understand where and what kinds of files can be created.

The following is a screenshot of files and folders inside your wp-content folder:

The preceding screenshot contains both default directories and custom directories created based on custom requirements. Let's have a brief overview of the role of each folder:

After having a quick overview of files and directories, we can come to the conclusion that our primary focus should be on the plugins, themes, and uploads directories inside the wp-content directory. Using code and media files in these directories ensures our solutions are not wiped out by version upgrades.