How To Test And Troubleshoot WordPress Plugins And Themes

I had the incredible honor and privilege to speek at WordCamp Atlanta last week.

I gave a presentation on Testing & Troubleshooting WordPress Plugins & Themes, which is the culmination of all that I have learned from leading quality at 8BIT for the past three years.

I am posting my enture presentation along with bullet point cliff notes and resource links for each slide.

Michael Novotny

8BIT - Press Start

  • I have been working for 8BIT for three years.
  • I oversee quality for 8BIT, which means I test the integrity of our products before they are released.

Testing & Troubleshooting WordPress Plugins & Themes

Outline

Safeguards

jQuery And Other Default Scripts

  • Most theme, and especially plugin issues, can be mitigated by properly using jQuery.
  • Do not add your own version of jQuery.
  • Do not deregister the version of jQuery that comes with WordPress.
  • To use jQuery, properly enqueue the version of jQuery that comes with WordPress.
  • While jQuery is the most popular example, there are actually several included scripts that come with WordPress, so be sure and properly queue those versions instead of using your own.

WordPress Conditionals

  • Use WordPress conditionals to only display scripts on pages when they are needed. This reduces the changes of scripts conflicting with each other.
  • For example, only load the CSS and / or JavaScript for a widget plugin if that widget is being used and be displayed on the current page.

Testing

WP Test - Data

  • I created WP Test to help identify issues while developing WordPress themes and plugins.
  • It is a fantastically exhaustive set of test data to measure the integrity of your plugins and themes.
  • It contains lessons learned from over three years of theme and plugin support, and baffling corner cases, to create a potent cocktail of simulated, quirky user content.

Plugins

Setup wp-config.php

  • In your development environments, tell WordPress to start logging and reporting errors so you can address them.
  • Find your wp-config.php file, which should be at the root of your WordPress installation. Just replace the existing define( 'WP_DEBUG', false ); with the code below.

Debug Bar

  • Debug Bar is a debugging menu added to the admin bar that quickly shows query, cache, and other helpful debugging information.
  • A very useful way to view the errors being logged and reported.

Debug Bar Example

  • Notice the “Debug” button in the WordPress admin bar turns red when there is a error or warning.
  • Click it to open the Debug Bar panel.
  • Notice the message it’s reporting so you can fix them.

Debug Bar Extensions & Add-ons

There are many Debug Bar extensions that can provide a deeper view into what is happening.

Log Deprecated Notices

  • Log Deprecated Notices is a plugin that helps you identify old WordPress API functions your theme or plugin is currently using so you can update to the newer methods.

Log Deprecated Notices Example

  • Log Deprecated Notices logs its calls under the Tools menu in the WordPress admin.
  • Sometimes themes or plugins will want to keep these deprecated calls anyway, especially if they want to support older versions of WordPress, so you will need to make that call on your own when reported.
  • Note that it is a best practice to keep up-to-date with the newer methods instead of keeping legacy support whenever possible.

Theme-Check

  • Theme-Check is a simple and easy way to test your theme for all the latest WordPress standards and practices.
  • It is located under the Appearance menu in the WordPress admin.

Theme-Check Example

  • Sometimes Theme-Check reports false positives, so you will need to determine if something is a legitimate claim that needs to be fixed or not.

Theme Mentor

  • Theme Mentor is the cousin of Theme-Check plugin.
  • It does deeper code analysis to ensure best practices, like checking for the dequeueing of jQuery as we discussed above.

RTL Tester

  • RTL Tester is essential for troubleshooting for plugins and themes that offer support for right-to-left reading languages.

Slim Jetpack

  • Slim Jetpack is simply Jetpack without the need to connect to a WordPress.com account.
  • Handy for development environments who do not need the connection to WordPress.com to test Jetpack features.
  • Someone in the Q&A session mentioned that Jetpack does now ship with a “Developer Mode” which you can enable to not require the connection to WordPress.com while in development environments. Simply add the code below to wp-config.php to enable developer mode.

Troubleshooting

Browser Cache

  • At some point in your development career, you will be bit by browser cache.
  • If you are not seeing changes you’ve made to CSS and JavaScript files, try clearing your browser cache.

Plugins vs. Themes vs. WordPress Core

  • We use a process of elimination procedure at 8BIT to determine where to begin looking for a point of failure.
  • If things are not working, we first disable all plugins to see if that resolves the issue. If things start working again, then we enable plugins one by one until the issue reappears. Then we know we’ve found our culprit and we can begin troubleshooting the plugin.
  • If plugins are not the issue, then we try switching to one of the default WordPress themes like TwentyEleven or TwentyTwelve. If the issue goes away, then we know it’s a theme problem we need to resolve.
  • If both plugins and themes are not causing the issue, then you know you have an issue with WordPress core or a server configuration issue.

Chrome Developer Tools

  • Chrome Developer Tools is the most advanced way to inspect what is going on underneath the covers of your website.
  • The Firebug extension / add-on is a good alternative for other browsers, though it is not as capable as Chrome Developer Tools.

Launch Chrome Developer Tools

  • You can open Chrome Developer Tools by right-clicking anywhere on the website and select Inspect Element.
  • This will open a panel at the bottom of your browser (I have moved mine to the right).

Chrome Developer Tools - Elements Tab

  • The Elements tab contains markup and CSS for the current page.
  • In this panel you can select an element. In the screenshot I have selected the <div class="container"></div> element. This also highlights that element on the web page itself in a light blue overlay as seen in the top navigation of the website.
  • The far right of the screenshot also shows the CSS being applied to the element, the selector that is causing the CSS to be applied, as well as the order the CSS styles were loaded in. These CSS properties an values are editable, so you can make live changes to your website and see what it looks like without even refreshing your browser.

Chrome Developer Tools - Sources Tab

  • The Sources tab shows you all the CSS and JavaScript files that were loaded as a part of the page.
  • You can open files by clicking the little file browser icon above the line numbers or by pressing Control + R or ⌘R while in the tab.
  • The content of these files can be edited live and the changes will take place immediately without needing to refresh the page. This is a great way to quickly troubleshoot.
  • You can also set breakpoints by clicking on a line number. The next time the page is loaded, it will stop there and you can inspect variable values to see what is going wrong.

Chrome Developer Tools - Console Tab

  • The Console tab is a essentially a full on Terminal or Command Prompt.
  • For the sake of troubleshooting, all we need to use it for is to see if the site is throwing any errors. It will report things like not being able to find a file or if your JavaScript is throwing an error. Just keep it open at all timers during testing and make sure nothing pops up in there.
  • There can be false positives, like loading a YouTube video. These errors can just be ignored.

Cross Browser & Device Testing

Viewport Resizer

  • Viewport Resizer is a handy bookmarklet that will load your site in a viewport the size of common devices. This is helpful in testing responsive design.
  • It is one of the few plugins that accurately display websites that are not built to be fully responsive, yet you want to still see what it looks like on a mobile device.
  • Someone in the Q&A session also recommended the Web Developer extension as an alternative that properly displays websites with the correct user agents.

Viewport Resizer Example

  • Note that you can select different devices from the Viewport Resizer Toolbar in the upper left corner of the browser window.

BrowserStack

  • BrowserStack is a paid service that will give you access to testing your website on all browsers, devices, and operating systems.
  • It also comes with built-in debugging tools.
  • Someone in the Q&A session also mentioned that if you have a Mac, you can pair Xcode’s iPhone / iPad simulator to Safari’s Web Inspecter to debug. You can also plugin your iPhone / iPad via USB and use Safari 6 to live debug webpages on your iDevice with Web Inspecter. This Webdesigntuts+ article will walk you through that process.

BrowserStack Example

  • An example of a website in IE 8 running on a Windows 7 machine all from within my browser.
  • The websites are fully interactive not just a screenshots.

Questions?

A special thanks to Jared Erickson for making our team look united in our presentations. The guy can make anything look good, even slides and presentations.

And thanks to everyone who attended my talk and to everyone who came to WordCamp Atlanta. It was great to meet you all face-to-face and the conversations we had are priceless.

Please let me know if you have any additional questions about my talk or these notes. I would love to help answer them for you.

Slides

I am also making all the slides available in a single PDF, which you can download below.

Download Slides

Video

Below is the video recording of the session, if you would like to watch it “live” instead.

You can also watch this talk on WordPress.tv along with all the other WordCamp Atlanta 2013 videos.

5 Comments

I just finished reading and I have to say this is a phenomenal post. I was using some of the tools and now I have a few more in my testing arsenal which I think will help me improve my themes and plugins. Thank you very much, the info is greatly appreciated. Keep up the good work.

hi………
I am fresher to join SQA, i want to know that which tool can i use in automated testing of wordpress plugins??

Trackbacks and Pingbacks

[...] Follow this link: How To Test And Troubleshoot WordPress Plugins And Themes … [...]

Leave a Reply

Name and email address are required. Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>