9 Tools You Should Be Using In Your Plugin Development
Tags: github, wordpress, productivity
Published: 2019-09-16 15:32:27

These are nine tools you should be using for plugin development. A few are WordPress specific, but most of these are usable regardless of what you're developing for.
<h2>How We Chose Our Plugin Development Tools</h2>
Plugin development is serious business, regardless of whether you're building an <a href="https://pagely.com/blog/citizen-guide-open-source-community/">open-source</a> or otherwise. Anyone using your plugin will want your code to run smoothly, quickly, and cohesively with the rest of their WordPress setup.

There are a <a href="https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/" target="_blank" rel="noopener noreferrer">number of WordPress standards</a>, and quite a few tools to help you meet them more easily. If you learn about the possibilities at your disposal, you can focus on solving problems <em>with</em> code rather than in your code.

Our criteria for any development tools are:
<ol>
 	<li>Having a big enough community behind it that you can get help if something goes wrong.</li>
 	<li>There are existing tutorials explaining how to use it.</li>
 	<li>Developers have used it on production-ready work, not just experimental projects.</li>
 	<li>Optionally (but preferably), at least one or two prominent WordPress developers have backed it in some way.</li>
</ol>
Now it's time to have a look at what tools your should be using in your plugin development. By choosing the right solutions for your workflow, you'll be able to produce plugins that suit modern code and WordPress standards quickly and efficiently.
<h2>9 Tools You Should Be Using In Your Plugin Development</h2>
We have broken down the nine tools into four sections (writing, running, automating, and testing code) that should be part of your workflow. We recommend giving each tool a spin and seeing what works best for you and your projects.

Regardless of what you opt for, all are worth learning about so you can curate your own developer toolbox. In addition, the tools below are completely free to use -- much like our previous article on <a href="https://pagely.com/blog/free-wordpress-developer-tools/">essential web development solutions</a>.
<h3>Write Code: Open-Source Coding Editors</h3>
Technically, code can be written in any plain text editor. However, doing so is easier when using a dedicated code editor as they come packed with a myriad of features to help speed up your work.

When choosing a coding editor, you'll want to look for features such as syntax highlighting, language-specific code snippets, and <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Git syncing</a>. A few years ago, accessing these features meant paying a premium. Of course, you can still find stellar paid editors, but it's now possible to find competitive editors for zero outlay.
<h4>1. <a href="https://atom.io/" target="_blank" rel="noopener noreferrer">Atom<b></b></a></h4>
<img class="aligncenter size-full wp-image-12444" src="https://pagely.com/wp-content/uploads/2017/11/atom.png" alt="The Atom webpage." width="1400" height="885" />

<a href="https://atom.io/" target="_blank" rel="noopener noreferrer">Atom</a> is <a href="https://pagely.com/kb/en/what-is-github/">GitHub</a>'s open-source, hackable editor. It's designed so users can completely customize it to work to their exact requirements. It's extensible through <a href="https://atom.io/packages" target="_blank" rel="noopener noreferrer">community 'packages'</a> (think plugins), which enables you to add support for non-standard features.

Even so, it's still an impressive tool out of the box. For starters, there are a myriad of supported <a href="https://github.com/atom/atom/releases/tag/v1.22.1" target="_blank" rel="noopener noreferrer">Operating Systems (OS)</a> and package formats, and an intuitive file system browser for viewing project files. In addition, there's a smart autocompletion tool to help you write code faster, and an advanced 'find and replace' feature so you can quickly update the same string across your entire project. The <a href="https://atom.io/docs" target="_blank" rel="noopener noreferrer">extensive and comprehensive documentation</a> outlines the many aspects of using Atom.

As for installing packages, we recommend some of the WordPress-specific ones (<a href="https://atom.io/packages/wordpress-api" target="_blank" rel="noopener noreferrer">WordPress API</a> and <a href="https://atom.io/packages/autocomplete-wordpress-hooks" target="_blank" rel="noopener noreferrer">Autocomplete WordPress Hooks</a>), along with more code-specific packages such as <a href="https://atom.io/packages/atom-autocomplete-php" target="_blank" rel="noopener noreferrer">Autocomplete PHP</a> and <a href="https://atom.io/packages/autoclose-html" target="_blank" rel="noopener noreferrer">Autocomplete HTML</a>.
<h4>2. <a href="http://brackets.io/" target="_blank" rel="noopener noreferrer">Brackets<b></b></a></h4>
<img class="aligncenter size-full wp-image-12445" src="https://pagely.com/wp-content/uploads/2017/11/brackets.png" alt="The Brackets website." width="1400" height="750" />

<a href="http://brackets.io/" target="_blank" rel="noopener noreferrer">Brackets</a> is another stand-out editor, produced by Adobe. The feature set here is focused on live editing, which enables you to see live changes in a browser while working. The tool offers inline editors (enabling you to jump between related code snippets), and preprocessor support, to help render <a href="https://fileinfo.com/extension/scss" target="_blank" rel="noopener noreferrer">SCSS</a> and <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">LESS</a> files.

In contrast to Atom's packages, <a href="https://registry.brackets.io/" target="_blank" rel="noopener noreferrer">Brackets offers 'extensions'</a>. In our opinion, <a href="https://github.com/Tusko/brackets-wp-hint/" target="_blank" rel="noopener noreferrer">WordPress Hint</a> is a must-have add-on for any WordPress developer. Finally, Brackets has a <a href="https://github.com/adobe/brackets/wiki/Troubleshooting" target="_blank" rel="noopener noreferrer">dedicated wiki</a> to help get you up and running, along with helping you when you're stuck.
<h3>Run Code: Local Development Programs</h3>
While it <em>is</em> possible to develop on a live server, it is incredibly inefficient to do so. It is better to set up your local computer to support PHP and MySQL so you can write and test code quickly before trying it out on a live website. Your options are to configure your computer manually, or use a program to automatically manage the server elements. Unless you're incredibly comfortable with Linux server management, the second of these options is usually the best choice.

With that in mind, let's take a look at a couple of solutions you may be interested in.
<h4>3. <a href="https://brew.sh/" target="_blank" rel="noopener noreferrer">Homebrew</a> (macOS Only)</h4>
<img class="aligncenter size-full wp-image-12447" src="https://pagely.com/wp-content/uploads/2017/11/homebrew.png" alt="The Homebrew website." width="1400" height="976" />

In a nutshell, <a href="https://mallinson.ca/osx-web-development/" target="_blank" rel="noopener noreferrer">package managers</a> help you set up your own local server development without relying on your computer's defaults. These are run from the terminal, and enable you to quickly download and configure different server packages (such as PHP and MySQL) to work on your computer.

<a href="https://brew.sh/" target="_blank" rel="noopener noreferrer">Homebrew</a> is the package manager of choice for Mac users. The home page concisely outlines what the package manager does, but in short, it installs over <a href="https://github.com/Homebrew/homebrew-core/tree/master/Formula" target="_blank" rel="noopener noreferrer">4,000 files</a> that you'll need when developing on your computer. The script itself is very user-friendly, and will walk you through the process as it installs.

For Windows users, <a href="http://scoop.sh/" target="_blank" rel="noopener noreferrer">Scoop</a> is that platforms' answer to Homebrew, and the <a href="https://siglarblog.wordpress.com/2016/10/19/installing-web-server-on-windows-10/" target="_blank" rel="noopener noreferrer">command line can be used</a> to quickly install the necessary components.
<h4><b>4. </b><a href="https://www.apachefriends.org/index.html" target="_blank" rel="noopener noreferrer"><b>XAMPP</b></a></h4>
<img class="aligncenter size-full wp-image-12454" src="https://pagely.com/wp-content/uploads/2017/11/xampp.png" alt="The XAMPP website." width="1400" height="860" />

<a href="https://www.apachefriends.org/index.html" target="_blank" rel="noopener noreferrer">XAMPP</a> is a perennial server distribution program, enabling you to run an independent server on which to develop locally. There are a few variations (including <a href="https://bitnami.com/stack/wamp/installer" target="_blank" rel="noopener noreferrer">WAMP</a>, <a href="https://www.mamp.info/en/" target="_blank" rel="noopener noreferrer">MAMP</a>, and <a href="https://bitnami.com/stack/lamp/installer" target="_blank" rel="noopener noreferrer">LAMP</a> designed for various platforms), but XAMPP offers the most bang for your buck.

You can get a local WordPress environment up and running pretty quickly, and a primary benefit is that XAMPP offers a close experience to a live server, while giving you the flexibility to tweak your installation to your exact requirements.
<h4><b>5. </b><a href="https://www.vagrantup.com/" target="_blank" rel="noopener noreferrer"><b>Vagrant</b></a></h4>
<img class="aligncenter size-full wp-image-12451" src="https://pagely.com/wp-content/uploads/2017/11/vagrant.png" alt="The Vagrant website." width="1400" height="681" />

For those looking to take their WordPress development to the next level, <a href="https://www.vagrantup.com/">Vagrant</a> offers higher control over your server environments than other options. It's a <a href="https://premium.wpmudev.org/blog/vagrant-wordpress-test-environment/" target="_blank" rel="noopener noreferrer">little more complex to set up</a>, but shouldn't be out of reach for most developers.

The primary benefit of Vagrant is to offer you the ability to fine-tune your settings to ensure wide compatibility on a variety of different server setups. Depending on your project, this will be invaluable for getting a solid and stable plugin out of the door.
<h4><b>6. </b><a href="https://serverpress.com/" target="_blank" rel="noopener noreferrer"><b>DesktopServer</b></a></h4>
<img class="aligncenter size-full wp-image-12446" src="https://pagely.com/wp-content/uploads/2017/11/desktopserver.png" alt="The DesktopServer website." width="1400" height="790" />

The last tool in this section is <a href="https://serverpress.com/" target="_blank" rel="noopener noreferrer">DesktopServer</a>. This is a new breed of local development tool, which is essentially a full WordPress installation in one box, that can be deployed within seconds. It's cross-platform, and the base version is completely free.

Compared to XAMPP, there are a number of more advanced features in DesktopServer, including a way to test sending and receiving email. However, it's still incredibly simple to use. We recommend reading through the <a href="http://docs.serverpress.com/" target="_blank" rel="noopener noreferrer">detailed documentation</a> to get up to speed with the tool.
<h3>Automate Code: Terminal Packages</h3>
If you really want to crank up your development to the next level, you should consider terminal packages. The terminal (or 'command line') may seem intimidating at first because it lacks a familiar Graphical User Interface (GUI). However, it can save you hours of time while also improving your code structure through automation.

For example, the can help <a href="https://developer.wordpress.org/cli/commands/scaffold/" target="_blank" rel="noopener noreferrer">'scaffold'</a> a project (i.e. generate essential plugin files with starter code), and allow for rapid creation of new sites complete with a bespoke default setup. You can also carry out general WordPress management, and test whether your code aligns with WordPress' own standards. Let's take a look at some solutions.
<h4><b>7. </b><a href="http://wp-cli.org/" target="_blank" rel="noopener noreferrer"><b>WP-CLI</b></a></h4>
<img class="aligncenter size-full wp-image-12453" src="https://pagely.com/wp-content/uploads/2017/11/wp-cli.png" alt="The WP-CLI website." width="1400" height="727" />

If you are frequently creating new WordPress sites to test out your plugins, <a href="http://wp-cli.org/" target="_blank" rel="noopener noreferrer">WP-CLI</a> is a must have to speed up your development workflow. Like package managers, WP-CLI is a command line tool enabling you to run scripts in the terminal. The difference is, WP-CLI is specific to WordPress-related tasks.

There are <a href="https://developer.wordpress.org/cli/commands/" target="_blank" rel="noopener noreferrer">quite a number of commands</a> enabling you to install WordPress from scratch without a browser, import and export databases, search and replace database values, and even manage plugins and themes. There are even commands that work with<a href="https://make.wordpress.org/cli/handbook/tools/" target="_blank" rel="noopener noreferrer"> many popular WordPress plugins</a>. What's more, <a href="http://wp-cli.org/#installing" target="_blank" rel="noopener noreferrer">installation takes</a> just a few minutes.

Once you're up and running with WP-CLI, you can get even more done with it by using <a href="http://wp-cli.org/package-index/" target="_blank" rel="noopener noreferrer">WP-CLI Community Packages</a>:

<img class="aligncenter size-full wp-image-12452" src="https://pagely.com/wp-content/uploads/2017/11/wp-cli-package.png" alt="The WP-CLI Community Packages web page." width="1400" height="928" />

These are essentially additional commands for specific tasks. Our favorite related to <a href="https://github.com/wpup/wp-cli-lint" target="_blank" rel="noopener noreferrer">'code linting'</a> as it checks your code, automatically corrects simple formatting errors to match WordPress' standards, and lets you know what else is left for you to fix manually.

You can check out all available community packages at the <a href="http://wp-cli.org/package-index/">WP-CLI Package Index</a>, and each has its own dedicated installation instructions, so be sure to follow them carefully.
<h3>Test Code: Code Testing Scripts</h3>
Coding plugins that work as expected with no bugs sounds like a pipe dream, although it's not as far-fetched as it sounds. While it's impossible to create a completely perfect software product, it <em>is</em> possible to launch a fairly rock solid one.

Writing test-driven code means every feature you include is run through a series of tests and data trials to see how it reacts. If you add a new piece of code and something breaks, you can immediately be notified and rectify the problem during the initial development phase. Of course, there are a few code testing options you can integrate into your WordPress plugins. Let's look at two.
<h3><b>8. </b><a href="https://phpunit.de/" target="_blank" rel="noopener noreferrer"><b>PHPUnit</b></a></h3>
<img class="aligncenter size-full wp-image-12449" src="https://pagely.com/wp-content/uploads/2017/11/phpunit.png" alt="The PHPUnit website." width="1400" height="777" />

<a href="https://phpunit.de/" target="_blank" rel="noopener noreferrer">PHPUnit</a> is a testing framework tool for PHP-based code, such as WordPress. To get a handle on how it works in relation to your code and wrap your head around the concept, you may want to write a <a href="https://phpunit.de/getting-started.html" target="_blank" rel="noopener noreferrer">few simple tests</a> before jumping into the WordPress-specific work.

Noted WordPress developer Pippin Williamson wrote an entire guide on <a href="https://pippinsplugins.com/series/unit-tests-wordpress-plugins/" target="_blank" rel="noopener noreferrer">how to integrate PHPUnit</a> into your own plugins. You can follow his step-by-step instructions and be well on your way to knowing your plugins will perform well under pressure. From there, you'll likely want to peruse the <a href="https://phpunit.de/documentation.html" target="_blank" rel="noopener noreferrer">wealth of documentation</a> to learn all you'll need to know about the tool.
<h4><b>9. </b><a href="https://travis-ci.org/" target="_blank" rel="noopener noreferrer"><b>Travis CI</b></a></h4>
<img class="aligncenter size-full wp-image-12455" src="https://pagely.com/wp-content/uploads/2017/11/travis-cl.png" alt="The Travis CI website." width="1400" height="1242" />

Travis CI is a complementary <a href="https://docs.travis-ci.com/user/languages/php/" target="_blank" rel="noopener noreferrer">tool for PHPUnit</a> that automatically runs your tests as you commit changes to <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>. It's free for all open-source projects and will help you ensure your code isn't going to break under various server environments.

The tool works on the basis of Continuous Integration (CI), essentially small code merges implemented frequently, rather than irregular sweeping commits. The testing process will clone your <a href="https://pagely.com/kb/en/what-is-github/">GitHub</a> repository in a virtual server, carry out some builds and tests, and if the code passes, will then deploy it to your server. The <a href="https://docs.travis-ci.com/user/getting-started/" target="_blank" rel="noopener noreferrer">online documentation</a> will be your friend while getting to grips with the tool, and it's well worth a read regardless of your level of expertise.
<h2>Conclusion</h2>
Keeping your skills up to date with modern development tools allows you to stay competitive, while improving your own work in the meantime. You can significantly improve your plugin development by adopting these tools into your workflow.

Between modern open-source editors, local server environments, terminal packages, and code testing, there are quite a number of tools to help you improve the quality of your WordPress plugin code. Some of our favorites include <a href="https://atom.io/" target="_blank" rel="noopener noreferrer">Atom</a>, <a href="https://serverpress.com/" target="_blank" rel="noopener noreferrer">DesktopServer</a>, <a href="http://wp-cli.org/" target="_blank" rel="noopener noreferrer">WP-CLI</a>, and <a href="https://phpunit.de/" target="_blank" rel="noopener noreferrer">PHPUnit</a>.