How we use PhpStorm for WordPress Development

#

The majority of the Delicious Brains team use PhpStorm (everyone except Brad!), the PHP IDE from JetBrains, as their go-to code editor, development environment, and all-round PHP best friend.

Many people (like Brad!) swear by using a lean and fast code editor like Sublime Text, and would find PhpStorm much slower, larger and possibly daunting to use. However, as an integrated development environment, PhpStorm offers so much more than just editing code.

In this article I will walk you through some the features that make it great for WordPress development and show you why I, and many others, love it.

WordPress Integration

As of version 8.0, PhpStorm introduced some very neat WordPress integration which makes using PhpStorm for WordPress plugin, theme, and site development even easier. A complete rundown of the new WP features can be found here.

PhpStorm now recognizes a WordPress related project and will ask you to point it in the direction of your installation path. It will also check to see if you want to add the installation to the PHP Include paths:

WordPress Include Path

This will enable the IDE to fully understand the WordPress codebase giving you some excellent benefits. If your wp-content directory is outside of the installation path, you may want to also add that as an extra ‘included path’, to allow indexing of plugin and theme files.

Hooks Support

PhpStorm’s indexing of the WP codebase really supercharges the use of action and filter hooks. This is probably my favourite new feature and it comes in a number of parts.

Navigation to a Hook’s Callback

Do you find yourself copying the callback function name of a hook and using it to find the function declaration in your codebase? No more my friend, no more. Simply CMD+Click (Ctrl+Click on Windows/Linux) on the callback::

Hook callback navigation

Navigation to Hook Invocation

Have you ever hooked a function to a WordPress core action or filter and wondered where that code will get executed? Previously that meant doing another search of the codebase, but now just click on Hook Invocation in the left gutter next to the hook, et voilà:

Hook invocation navigation

Code Completion of Hooks

There are so many action and filter hooks in the WordPress codebase that I find myself frequently checking the Codex for the correct naming. This is now taken care of with the new code completion of action and filter names.

If your wp-content directory is in a different location to the WordPress core files, you can add it as an extra include path so that hooks and filters for plugins and themes are indexed also:

Hook name autocomplete

Search on WordPress.org

Talking of the Codex: Have you ever wanted to look at the documentation for a WordPress function? Now this is super simple by highlighting the function and selecting ‘Search on WordPress.org’ from the content menu:

Hook WordPress search

Searching for where a hook is registered in WordPress? You can do this quickly within PhpStorm using ‘Navigate to Symbol’. Simply use CMD-ALT-O (Ctrl+Alt+Shift+N on Windows/Linux) and enter the name of the hook to find:

Hook navigate

Code Style

Here at Delicious Brains we are big on developing with the WordPress coding standards in mind, and the next couple of PhpStorm features make this much easier to integrate into our development workflow.

PhpStorm allows you to define coding styles for the languages you are developing with. It now comes with a WordPress-specific style that helps you automatically format your code to the coding standards (check out ‘Code > Reformat Code’).

We have forked the style with a few tweaks of our own, which you can find here. Feel free to use and let us know if you find any issues.

PHP Code Sniffer

Code styles are great for formatting code to standards, but the standards are more than just formatting, as they define rules about how the code should be written. PhpStorm allows you to integrate easily with PHP Code Sniffer to detect any issues with your code against the WordPress coding standards, defined as by the WordPress PHP Sniffer rules.

An installation guide for both PHP Code Sniffer and the WordPress rules can be found here.

Code sniffing is about prevention instead of cure, and the integration in the PhpStorm editor alerting you to issues is extremely helpful. Once you have it all installed, you will instantly start to receive feedback on any issues in your code:

PHP Sniffer

Development Tools

PhpStorm is stacked with lots of non-WordPress specific features that are great for modern development practices, but there are too many to mention here. Let me take you through some of my favourites.

Xdebug

I can’t bring myself to remember a time when I debugged PHP without using Xdebug. It is the debugging and profiling extension for PHP, that allows you to literally step through your code as it executes to troubleshoot code, watch values, evaluate expressions, and much more. PhpStorm integrates seamlessly with Xdebug with minimal installation, giving you so much more insight than var_dump.

Once you have set a breakpoint, and your code has hit that point, you can really take a second and look under the hood. You can expand objects and arrays, view the stacktrace, and in PhpStorm 9.0 there is a lovely tooltip hover detail, which evaluates expression inline. Take a look at my quick demo of troubleshooting code with Xdebug:

Profiler

Xdebug also includes a profiling tool which is useful for debugging performance of plugins, applications and processes. Although it is bundled with Xdebug, there are a few further steps to enable it with PhpStorm.

Once installed and turned on, you can run the process you want to profile and it will start capturing data, in the format cachegrind.out.%p as defined in your php.ini. You can then open this capture in PhpStorm for analysis via ‘Tools > Analyze Xdebug Profiler Snapshot’. You will see something like the following, where you can view the execution stats of each function, sort functions by time taken and calls made, as well as drilling down into the call stack for the functions:

Profiler

VCS

Although I can use Git and SVN in the command line, I like to use the VCS integration in PhpStorm as it stops me from moving between the terminal or another program. The integration is pretty slick: auto detecting VCS roots in your project, presenting a powerful file diff and merge UI, as well as displaying the version history of selections or whole files.

Since we have started to regularly contribute to WordPress core using SVN, I have found its ‘Apply’ and ‘Create’ patch features an invaluable timesaver. Simply select a patch file in your project and choose ‘Apply Patch’ from the context menu. To create a patch from your changes, go to ‘VCS > Create Patch’, or for specific files select the file(s) in the ‘Local Changes’ tab of the ‘Version Control’ panel, and choose ‘Create Patch’:

SVN patches

GitHub

If your project has Git repositories registered with remotes that are hosted on GitHub, PhpStorm gives you a couple of really nice features. You can actually create a ‘Pull Request’ from inside the IDE. Pretty handy right? Once you have committed some code to a branch, go to ‘VCS > Git > Create Pull Request’:

GitHub pull request

If you develop using the forking flow, or you contribute to open source repositories on GitHub, you will know what a hassle it is to keep your fork up to date with the master repo. PhpStorm handles this all for you, including adding an ‘upstream’ remote to your checked out fork. Go to ‘VCS > Git > Rebase My GitHub Fork’. Check out my quick demonstration video below:

If you are a PhpStorm user then I hope you found something new and useful here. If not, then perhaps it convinced you to take a look?

Over at Laracasts there is a great free series of videos on how to be awesome in PhpStorm which, although geared towards Laravel at times, is an excellent resource for developers using PhpStorm.

Let me know what your favourite features are and if I missed any you think are worth a mention.