WordPress is widely renowned for its hassle-free user experience, but website, plugin, or theme developers have different requirements than end users. Many have heard the advice to “never work on a live site,” setting up a WordPress development environment is crucial to keeping the WordPress police from your door. In this article, we’ll explore what a WordPress development environment is, why it’s vital for your workflow, and how to set yours up in five steps. Let’s get cracking!
What a WordPress Development Environment Is (And Why You Need One)
A WordPress development environment is a collection of tools that enable you to test your projects before they go live safely. However, your choices will depend on your unique needs (and your tastes!). It’s almost always a good idea to try out any major features in a testing environment before deploying them, for the following reasons:
- It enables you to test your changes locally and spot any problems, without any risk.
- You can configure your testing environment to your liking. This will enable you to test if any themes or plugins you created show compatibility errors, for example.
- Relying on a local testing environment is usually faster (and cheaper!) than connecting to a remote server.
- It enables you to work on your projects even when you don’t have access to the internet.
- Depending on which tools you use, deploying a local WordPress site might only take minutes.
With that in mind, let’s walk through the process of setting up a full-featured WordPress development environment.
How to Set Up Your WordPress Development Environment
As we alluded to earlier, there’s no one-size-fits-all solution when it comes to development environments – not even for WordPress. By the time you’re finished navigating these steps, you’ll have set up your own WordPress development environment. Along the way, we’ll also offer our opinion on some of the best tools for your needs. However, let’s start with one of the hardest choices – picking a server solution.
1. Choose a Suitable Server Solution
First off, you’re going to need a dedicated server, and there are two choices available – virtual or local:
- A virtual server: This involves creating a compartmentalized ‘computer within a computer’. Both the software you’ll need and WordPress are installed within, and you configure it in order to access it from a browser.
- A local server: This involves setting up both the server software and WordPress directly on your computer, as you would with any other software.
On the whole, local servers are easier to install and access, but there are downsides. For instance, setup can be complicated without a guide. What’s more, your chosen solution may not be WordPress-specific. Uninstalling them can also be a hassle unless you use a full stack. Solutions such as XAMPP, MAMP, or WampServer often bundle together everything you need into one package.
Virtual servers can also be complicated to set up if you’re not familiar with them. However, in contrast to local servers, you’re able to create as many virtual systems as your computer’s resources permit without running into compatibility issues. Furthermore, once you’re done with a particular installation, you can delete its virtual system cleanly. Take Vagrant, for example This is a tool that enables you to create portable development environments (and WordPress websites) through the command line. Two main advantages are its lightweight environments and a wide library of user configurations. Some of the most popular choices for WordPress users include Varying Vagrant Vagrants (VVV) and VIP Quickstart.
Finally, there’s a sort of new, middle ground between the local and virtual approaches. Two of our favorite tools in this category are DesktopServer and Local by Flywheel. Both enable you to create an unlimited number of WordPress websites, customize your choice of server, and delete your sites cleanly when you’re done. In practice, this approach provides you with all the benefits of virtualization mixed with those of local setups, and it’s the option we recommend.
2. Find a Suitable Text Editor or IDE
Once you have your server set up, you’ll need a good text editor. Experienced developers often have their favorites – they already know that a good, easy-to-use development-oriented text editor will increase your efficiency.
There are plenty of text editors available, and discussions about their various merits tend to be heated. In our case, we’re big fans of Atom thanks to its variety of packages (or extensions) and auto-completion system. If you choose to follow in our footsteps, here’s an excellent introduction to the tool.
If you’re looking for something a little more than a text editor, you should consider an Integrated Development Environment (IDE). These combine the functionality of a text editor with other development and project management features. They’re not necessarily better, but they can be more efficient if you’d rather keep the number of tools in your environment to a minimum. As far as IDEs go, NetBeans is one of the best choices for WordPress development. For a start, it’s optimized for PHP coding – ideal for our particular needs. This tool can also help you correct mistakes in your code and help make it simple to find key sections in critical files.
3. Pick a Suitable Browser
Most modern browsers ship with their own set of developer tools, which makes them ideal for working on WordPress websites. For example, take the Chrome DevTools. They enable you to debug sites and test them for responsiveness, all without leaving your browser. Each browser’s set of developer tools is different, but a few share some significant functionality, such as Chrome and Firefox. The latter even provides a browser tailor-made for your needs, called Firefox Developer Edition.
Since you’ll do a lot of testing from your browser, it makes sense to pick an option with the set of tools you feel most comfortable with. After testing both Chrome DevTools and Firefox Developer Edition, we feel confident in recommending both of them. However, it’s worth noting those aren’t the only browsers that include development-related features. Safari also has its own set of app development tools, as does Edge and Opera.
4. Enable Debugging for Your WordPress Installation
At this stage, you should have a working server setup, a text editor or an IDE, and a set of browser developer tools. If you haven’t installed WordPress within your environment (or set up a new site if you’re using a tool such as Local by Flywheel) do so now.
We need to enable WordPress’ debugging function, which is an important step. This feature enables WordPress to display a list of any generated errors. It can be a lifesaver during development since it’ll enable you to catch any errors that arise as you tinker with your project. Depending on your configuration, you can save these issues on a log, or display them on your front page.
5. Install Any Optional WordPress Development Tools
By now, you should have a full set of WordPress development tools, and a way to catch bugs. That should be everything you need to get cracking, but there’s always room for more depending on your personal needs.
For example, using the WordPress Command Line (WP-CLI) tool can help you streamline your development process, and its commands are easy to memorise. There are also plenty of tools that can make your life easier (bundled with a handy plugin called Developer), such as Query Monitor. This enables you to debug your database queries, hooks, conditionals, and HTTP requests.
If you’re a theme developer, you might also want to consider using Theme Check. This plugin automatically checks your active theme to make sure it meets all of the latest WordPress standards. Finally, you should also consider importing WordPress’ official Theme Unit Test data kit if you’re testing on a bare site. This file will automatically populate your site with the elements a real one would include, such as posts, pages, and comments, and a host of unique formatting. Importing this data will enable you to work with real-world content, and enable you to spot any mistakes before pushing your site live, and without spending time populating it with your own content.
What to Do Once You’ve Set Up Your WordPress Development Environment
Now you have a complete WordPress development environment, you need to learn how to use it. Often, you’ll need to implement new features, plugins, or themes to your live website. Since it’s bad practice to make live changes, the best option is to clone your site using a plugin such as Duplicator. Using this plugin, you can create a carbon copy of a live site and set it up in your testing environment. This will enable you to test any changes safely before uploading it back to your live server. This process is commonly known as ‘staging’, and it’s key to a safe web development workflow.
However, some web hosts such as WP Engine, Flywheel, and SiteGround offer advanced staging options within their plans, and we’d recommend plumping for this option if it’s available.
Finally, if you’re new to WordPress development and want to delve into creating your own themes and plugins, we recommend searching the web for relevant tutorials. For example, Torque has recently published a series on how to develop WordPress plugins, and there are plenty of resources related to theme development to get your teeth into.
Conclusion
We won’t lie – setting up a WordPress development environment is time-consuming. However, this small investment should pay off big time as you continue using it. The right environment will not only increase your productivity, but it’ll also enable you to iron out any bugs in your project along the way.
In this piece, we’ve walked you through five steps to create your own WordPress development environment. Let’s quickly recap them:
- Choose a suitable server solution.
- Find a good text editor or IDE.
- Pick a suitable browser.
- Enable debugging for your WordPress installation.
- Install any optional WordPress tools you need.
At IT Chimes, we specialise in custom WordPress development, WordPress plugin development, and white-label WordPress development. Whether you need help with WordPress design and development or custom WordPress plugin development, our team can help you build your website to meet your specific needs. Contact us today to learn more about our services!