Ideal WordPress Plugin Development Using PhpStorm 8

The upcoming PhpStorm 8 features built-in WordPress support, as explained in this support document. However what’s the best way to set up your WordPress install in order to write plugins? Here’s my personal answer — feel free to suggest alternatives in the comments section.

When working on a WordPress plugin, you don’t want functions, classes, variables, etc. from other plugins to leak into your current plugin through auto-complete or other types of automation. For this reason, I suggest avoiding opening a whole WordPress checkout with all of your plugins inside of it using PhpStorm. At the same time, you don’t want to have a separate copy of WordPress for each plugin that you work on. This is redundant and makes keeping WordPress up to date harder.

So instead do a single checkout of WordPress to its own folder and then define WP_PLUGIN_DIR and WP_PLUGIN_URL, as described on the Codex, so that your plugins folder will live outside of your WordPress folder. This way you can open and index the WordPress folder without getting all of your plugins along with it.

Now create a new project for each individual plugin. When doing so, you’ll want to add the WordPress folder as an include path in PhpStorm, as described in their documentation.

All of this will result in only your individual plugin’s folder showing up in PhpStorm but with WordPress showing up under the “External Libraries” list. This one WordPress install can be used in your browser to test all of your plugins but the plugin codes won’t overlap.

Portable PhpStorm

I use PhpStorm to write all of my code for my job at Automattic. It’s an amazing IDE and has made me so much more productive.

However I am an outlier at my company in that I use two different computers rather than only a laptop — my powerful desktop with a big screen at home and my super portable ultrabook laptop when on the go. In order to keep my working environment identical on both machines, I install all of my work applications in portable mode. That is they store their configuration options in files alongside themselves rather than in my user directory or in the computer’s registry. This allows me to keep the applications stored on Dropbox which in turn keeps them synced between my two machines.

PhpStorm by default stores your configuration settings in files inside of your user directory. This is ideal for multi-user machines where each user should have separate settings. This however doesn’t apply to me. So how do you get PhpStorm to store those settings somewhere else?

After installing PhpStorm inside of your Dropbox directory (I have a “Programs” folder for these kinds of things), you need to go into the bin folder inside of PhpStorm’s directory and then open up the idea.properties configuration file in your favorite basic text editor such as Sublime Text or even just Notepad.

EDIT: You don’t even have to install it. If you take the direct download link and swap out .exe for .zip, you’ll get a ZIP file containing all of PhpStorm. You can then extract it to your Dropbox. I’m sure the process is something similar for Mac users.

At the top of the file you’ll find some commented out that have values with ${user.home}/.WebIde/ in them. You need to uncomment these lines and then replace ${user.home}/.WebIde/ with something like ${idea.home}/prefs/ which will instead store things inside of a “prefs” folder inside of your PhpStorm folder.

Lastly you should probably copy the contents of your old .WebIde folder (instructions to locate it can be found here) into the new location so that you don’t lose your existing settings.

Enjoy!

Google Maps For iOS Is Amazing

The new Google Maps app is simply amazing, by far the best mobile map app that I’ve used even if you take accuracy off the table. I used it this morning and its vocal driving directions are actually better than Apple’s app. They give more detail in road names and things like that and honestly I think the voice is better and more natural too. If you have an iPhone and haven’t tried it out, you really need to. The Verge has a good write-up about what’s new.

Calling iPhone App “Gas Cubby” Users — I Need Your Help!

Do you use Gas Cubby on your iPhone? If so, would you mind helping me out by sending me an export of your data?

I’m writing a new WordPress plugin that will allow you display data similar to Gas Cubby’s data on your website. You’ll have the option to manually enter gas fillups and such, but you’ll also be able to import from the Gas Cubby app. I’ve been using my data as a test and it’s working great but I’d appreciate being able to use a larger sample size.

If you’d like to help me out, here’s how:

  1. Open up Gas Cubby and press the left arrow until you get to “All Vehicles” shown at the bottom.
  2. Tab the magnifying glass in the upper-left so that it says “Search” at the top.
  3. An “Export” button will now be shown in the upper-right. Press it.
  4. An e-mail prompt will show up. Send the e-mail to “gascubby” at this domain (viper007bond.com).

While there isn’t really any personal data in the export file other than perhaps your gas station location if you fill that in, I still promise not to share this information with anyone. I’ll only be using it for testing in my local machine’s WordPress installation.

Thanks!

Sublime 2: Open New Tabs On The Right

One of the few things that bugged me about my favorite text editor, Sublime 2, is that new tabs would open up next to the current tab instead on the far right. Since I usually have about a half-dozen tabs open at once, this made keeping them in a sane order frustrating.

Thankfully Stylishmedia has written a simple little Sublime 2 plugin that makes new tabs open on the right side. Perfect. :)

Two Handy Sublime Text 2 Plugins

After using EditPlus for the better part of a decade, I made the switch to the totally awesome Sublime Text 2 text editor a few weeks back. One of the great things about Sublime is it’s support for plugins.

Two such plugins I’d like to recommend are SublimeBrackets and SublimeTagmatcher. Both improve how the highlighting of opening and closing items are handled.

By default, Sublime just underlines paired brackets. When you have a ton of code, this can be really hard to see. SublimeBrackets changes this to something more apparent:

Much better, right? I personally use the solid background green style.

SublimeTagmatcher does something similar but for HTML tags. When you have your cursor inside of an HTML tag, it will highlight both the current tag and it’s opening or closing counterpart. This is helpful for making sure you have the correct number of opening and closing tags.