In the previous part of the series, we did set up a WordPress development environment and installed all the necessary plugins required to help us with our theme development efforts.
Additionally, we edited
wp-config.php
enabling the debug mode in the WordPress core. With that done, it's important to have the right tools to aid us when working on our project, check for errors and see to it that we are conforming to WordPress coding standards.
In this part, will take a look at the following debugging plugins and the significant role they have in WordPress theme development:
- Debug Bar
- Debug Bar Console
- Debug Bar Cron
- Debug Bar Actions and Filter Addon
- Debug Bar List Script and Style Dependencies
- Debug Bar Post Types
Debug Bar
Debug Bar is a plugin that adds a debug menu on the admin bar within the WordPress dashboard. When you click on the debug menu, you can view query, caching, and other relevant debugging information.
This particular plugin acts as the main base for debugging with several other add-ons that deal with different aspects.
Debug Bar Console
After you have installed the main Debug Bar plugin, you will need to install Debug Bar Console in order to edit PHP and MySQL within the WordPress dashboard. Even though it has not been updated recently, the latest version added syntax highlighting using the Code Mirror text editor,explicit PHP and MySQL modes, and the UI changes to reflect updated Debug Bar User Interface
In the screenshot below, I copied
index.php
code from the Twenty Fourteen WordPress theme, added it to the console,clicked on run to test and see the output. .Debug Bar Cron
Cron can really be confusing, this is a useful add-on to the Debug Bar plugin. It displays important information about WordPress scheduled events such as;
- Current time
- List of core scheduled events
- List of custom scheduled events
- Time of next event
- If cron is currently running
In the below screenshot, we see the total number of events running on my development environment, time for the next event and if I have cron running, in this case is "No".
Debug Bar Actions and Filters Addon
Just as the name of the plugin suggest this particular addon adds two tabs to the main Debug Bar plugin. One tab displays the list of action hooks and the other list of filter hooks. The action tab displays the list of all actions hooked to current request.
While the filter tab displays the filter tags along with the functions attached to it. You can find more information about how action and filters work here.
Debug Bar List Script and Dependencies
When adding a script or style in WordPress we are required to use
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
andwp_enqueue_style( $handle, $src, $deps, $ver, $media )
. The main problem with this is being able to tell which one exists and in which order are they being loaded. With this particular addon, it will list all the dependencies.
Different scripts will be loaded for the front end pages of the site and back-end in this case the WordPress dashboard. In order to view scripts being loaded on the front-end, Go to the front-end, and on the admin bar click on Debug and then view Script and Style Dependencies
Next, go to the back-end, on the admin bar click Debug on the admin bar and then viewScript & Style Dependencies.
The front-end and back-end loads different scripts and styles. Also, different pages on the front-end and back-end can load different scripts and styles.
Debug Bar Post Types
This is an addon to the Debug Bar plugin that displays detailed information about the registered post types found on your project.
The various columns give information regarding various properties of post type
- Property being checked
- Post
- Page can either be true or false
- Attachment
- If it has
nav_menu_item
associated with post etc
Summary
We have gone through a number of debugging plugins required for a WordPress project. The main plugin is the Debug Bar plugin with the rest coming in as add-ons to extend the various roles of the plugin.
Some of this plugins were not listed on the Developer plugin we installed on the introductory part of the series, therefore I recommend you visit the plugin repository and add them to your WordPress installation.
No comments:
Post a Comment