WordPress Theme Development Tutorial Manual - Setting Up Development Environment
Why do I need to set up a development environment?
When developing a theme, it is best to do so in the same development environment as the WordPress server. The development environment can be local or remote, but setting up a local development environment will be very convenient because:
- We can test the theme locally without relying on a remote server. This speeds up the development process and after modifying the theme code, we can immediately view the results in a local browser.
- No internet connection is required to create topics.
- We can test the theme in all aspects. This is important, especially if we intend to release the theme, and these tests ensure maximum compatibility.
WordPress Local Development Environment
Before developing a WordPress theme, we need to set up a proper development environment. First, we need a local server and a code editor. There are many options for local development environments, including:
local development server
- Configuring LAMP on our computer ( Linux Apache MySQL/MariaDB PHP) or WAMP ( Windows Apache MySQL / MariaDB P(HP) server environment (very similar to that running on a web server)). We can use a number of integration packages such as MAMP(for Mac) or XAMPP(Mac or Windows) to quickly set up your local development environment. If you know Laravel.Valet It's also a good choice.
virtualized environment
- Creating virtual machines with Vagrant and VirtualBox allows us to run the same development environment on different computers.Vary Vagrant Vagrant (VVV)is a popular Vagrant project that helps us quickly create a WordPress development environment.
text editor
In addition to a local development environment, we need a text editor to write code. We can choose the editor according to our preference, but a handy text editor can speed up our development process. The choice of editor can be a basic text editor with code highlighting, code debugging, or an IDE with a rich set of integrated features, some of which offer specialized support for WordPress. The more popular choices are Visual Studio Code, Sublime Text and PhpStorm.
We can find it at the bottom of the page List of tutorials on setting up the development environment The
Compatible with older versions of WordPress
It is standard practice for WordPress themes to(say the) leastbe in favor oftwo versionsto ensure minimal backward compatibility. For example, if the current version of WordPress is 4.6, then we should also make sure that the theme works well in versions 4.5 and 4.4.
We can find out more about this in the WordPress Roadmap page to access the old version of WordPress, download and install the old version of WordPress, and create multiple development sites, each running a different version of WordPress for testing.
WP_DEBUG
Configuring debugging is an important part of WordPress theme development.WordPress provides many constants to support our debugging efforts, including:
WP_DEBUG
WP_DEBUG Constants are used to enable the built-in "debug" mode of the WordPress site. It makes it easier for us to see the errors in the theme. To enable it:
- Open the WordPress site's wp-config.php file
- Modification:
define('WP_DEBUG', false).
because ofdefine('WP_DEBUG', true);
In the official version of WordPress wp-config.php The WP_DEBUG constant in the file is set to "false" by default, and the WP_DEBUG constant has been set to "true" by default in WordPress-alpha and beta versions.
WP_DEBUG_DISPLAY and WP_DEBUG_LOG
WP_DEBUG_LOG respond in singing WP_DEBUG_DISPLAY are other constants that extend WP_DEBUG.
WP_DEBUG_LOG works in conjunction with WP_DEBUG to log all error messages to debug.log in the WordPress /wp-content/ directory. To enable this feature, set WP_DEBUG_LOG to true in the wp-config.php file.
define( 'WP_DEBUG_LOG', true );
WP_DEBUG_DISPLAY is used to control whether debug messages are displayed on the front-end page. To display the error message on the page, add the wp-config.php file configures this setting to "true".
define( 'WP_DEBUG_DISPLAY', true );
When WP_DEBUG and WP_DEBUG_DISPLAY are enabled, error messages are displayed at the top of the site page.
Errors will be displayed in the front-end and back-end areas of the site. These debugging tools are for local testing and temporary installations, not for official sites.
Other WordPress Development Tools
In addition to WP_DEBUG, the following plugins and unit test datasets are Development Toolset An important component that can help us develop better WordPress themes.
Test data
WordPress.org Theme Unit Test Data
WordPress.org Theme Unit Test Data is an XML file containing virtual test data that we can upload and import to test how the theme displays various different layouts and data.
WordPress.com Theme Unit Testing Data
WordPress.com Theme Unit Testing Data Also a virtual set of test data that we can upload to our WordPress site to test our theme, this set of data contains WordPress.com specific features.
Plugins
Debug Bar (WordPress plugin)
Debug Bar Added an admin toolbar for WordPress administrators that provides a display center for debugging.
Query Monitor (WordPress plugin)
Query Monitor Allows us to debug database queries, API requests, and AJAX used to generate theme pages and theme functionality.
Log Deprecated Notices (WordPress Plugin)
Log Deprecated Notices Documenting incorrect function usage and the use of deprecated files and functions in WordPress themes.
Monster Widget (WordPress plugin)
Monster Widget Integrating the core WordPress widgets into a single widget allows us to test widget styles and functionality within the theme.
Developer (WordPress plugin)
Developer Plugins for code debugging and quality checking can be installed with one click to help optimize our development environment.
Theme-Check(WordPress plugin)
Theme-Check Used to test our themes for compliance with the latest WordPress standards and practices.
WordPress Theme Review Guidelines
In addition to the development tools mentioned above, it is recommended to learn about the WordPress.org Theme Review Team's Theme Submission Guidelines and the WordPress Code StandardsGuidelines. ThesecriterionIt's the "gold standard" for quality themes, and even if we don't plan to publish a theme to WordPress.org, it's useful to know the guidelines.
More resources
- Developing WordPress Locally with MAMP(Mac, MAMP)
- How to set up a WordPress development environment for Windows(Windows, XAMPP)
- WordPress Theme Review VVV: Quick Vagrant Setup for Testing Themes(Cross-platform, Vagrant)
- Setting up the development environment (WordPress.com VIP)
- wptest.io - through (a gap) WordPress Theme Unit Testing An exhaustive WordPress test dataset.