How To Set up a WordPress Development Environment

WordPress Environment — PopWebDesign.net

As such, a WordPress development environment is a similar workshop, where you can create your website before launching it live.

In this article, we will be discussing everything you need to know about WP development environments whether they are local or remote.

Why bother?

Why bother setting up a complete development environment and only then starting to get to work when you can basically start building with WP on the fly? For starters, having a great development environment creates a safe space for you to work on your projects and to explore your options, test changes, debug websites, and so on. And when you’re ready, just move your site to your live hosting and the public can access it.

What is a WP Development Environment?

At the most basic level, such an environment is just a private place where you can safely work on your WordPress website edits, or work on new WP sites overall.

Whether you’re building a site and you don’t want it to go live before all the finishing touches are added or working on an already existing site and you don’t want to make huge changes on the live version to confuse traffic/visitors, having a development environment at hand can be pretty useful.

When it comes to creating such an environment, you have two distinct approaches:

  • Local development environment
  • Remote or hosted development environment

Below, we will discuss both.

Local WordPress Development Environment

So, what is a local WordPress development environment? It’s a work environment that allows you to build and set up a fully functional WordPress website powered by your own laptop or computer. Even though it’s not accessible for online visitors, as long as you’re working on it from your computer, it pretty much works like any other WP site.

The biggest benefit of having a local is that you can work on your website even when you’re offline. Also, hosting speed won’t hamper your website, making it that much faster (as basically, everything happens on your own computer).

Apart from that, code editing can also become faster, as all of the files are just a few clicks away on your computer. You can experiment with your themes and plugin files via your favorite code editor and all the changes you make will be instantly visible on the local site once you save the file. You don’t need to download them, edit them, and re-upload them to make it happen.

What is a Hosted or Remote WordPress Development Environment?

This dev environment is at its core, a hosted WordPress website that is set up in a way that it will only be accessible to authorized visitors.

Because the site is hosted, you (along with your clients and project collaborators) can basically access the site from anywhere, which can make working on it a bit easier (or at least, more flexible) when comparing it to local development environments.

Opting for a hosted environment option can also make third-party service integrations easier as some of these connections can be rather difficult to configure properly locally since the site in that case isn’t accessible beyond your computer.

On the downside, you will have to deal with every single con that tends to come with internet connections. Namely, if you have a slower connection, it will be difficult and sometimes, even off-putting to work on your site as things will be screeching slow. On the other hand, if you have no connection at all, you won’t be able to access your project.

Editing files on a hosted site can also take a bit more time as you can’t edit them directly but have to re-upload them every time you change something.

Installing a Local WordPress Development Environment

So, here’s pretty much every step you need to take to set up a local WP development environment.

Choosing a Local Development Tool

Setting up your local development environment correctly basically means turning your computer into a fully functioning server. In the case of WordPress, you will need to install a LEMP or LAMP software bundle stack which essentially stands for:

This might sound like something complicated and difficult, but in reality, it’s not that hard.

If you want to easily set up these pieces of software in the right configuration, you can also use a dedicated local development tool. In essence, development tools are responsible for all the heavy lifting when it comes to creating the environment,.

Here are some of the most popular local development tools for WP:

  • Local — From Flywheel/WP Engine, this is a solid WordPress-specific tool that works either with Nginx or Apache.
  • VCCW — This is a local solution (Vagrant-based) that’s mostly geared for advanced users.
  • MAMP — A helpful tool to use your LAMP or LEMP stacks properly.
  • XAMPP — This is a handy cross-platform tool for using a LAMP stack (Apache)
  • DevKinsta — A WordPress-specific Nginx-only tool from Kinsta.
  • DesktopServer — Another rather popular and handy WordPress-specific tool.
  • Docker — A great tool that’s also geared toward advanced users as it requires you to use the command line.

The majority of these tools are free or at least have freemium versions. In the latter case, you probably won’t get to use every feature the premium packages have but they will still enable you to get the job done.

If you’re only working on WP and/or WP-related projects, it makes sense to use a WordPress-specific tool as they will be more convenient to use and will come with a handful of great features like database access and email tracking.

There are tools that will even let you share links to your site enabling your clients to preview it within your local environment.

Configuring Your Environment

To get started, all you need to do is to download one of these development tools we listed above. If you choose Local, you should know that it works great for Linux, Mac, and Windows, meaning that you will have to install it like you install any other program. During installation, Local might also install a few dependencies. Once you’re done, you’re ready to start working.

Creating Your Local Site

After launching Local, you should eventually end up in the dashboard, which will enable you to create a new site.

Click on the right button, fill out everything the tool asks you about your site, and so on. There are also some advanced features like preset themes and plugin configurations that can be great time-savers if you need to get started (and finish up) a project fast.

You will also have to choose your environment. Here, you will want to choose an environment that matches your live hosting environment so there aren’t any unpleasant surprises waiting for you at the end of the road.

Lastly, you will need to enter your WP info and once you’re finished you have a live site in your local development environment.

Please note, these things can get tricky and should only be reserved for people who are somewhat well-versed in WP development. As such, we don’t encourage you to do this on your own if you’re new to web dev. Instead, reach out to your web development agency, who will gladly help you hammer out the project.

Key Features of Local Development

As said above, some WP-specific tools will have some quite handy features that will make your life easier.

For instance, you can access databases and have access to full database management via built-in tools like Adminer.

Also, you can utilize email tracking and view all the transactional emails your site sends. This can help you greatly with debugging and testing several issues with emails.

There are also features that will help your computer access the local site’s SSL certificate which again, is a great feature, especially if you want to resolve issues easier with HTTPS.

Making Your Site Go Live

When you’re finished building your website, you will need to ultimately make it accessible to your visitor. In order to make that happen, you will need to push it to your live hosting.

Depending on what you are using, your tool might have built-in integrations to enable you to push your platforms easily to your hosting,

In other cases, you can perform an easy live WP site migration.

Again, these things can get complicated, especially if you don’t really know what you’re doing. As such, asking for help is highly advised so you don’t mess up this close to the finish line.

Setting up a Hosted/Remote WordPress Development Environment

If you’re not really fancying the approach we detailed above, or need a more flexible option because of your clients, you can also set up a hosted development environment. This can be a great way to work on an already existing site or a “staging site”.

If you want to go with this option, you should know that there are a lot of WordPress hosts that now offer some handy staging features even in the shared hosting space.

Chances are if you’re using managed WP hosting, you also have access to dedicated staging site features but you can find them with shared hosts as well.

On the other hand, if you don’t have access to these goodies, you can still create your own remote development environment.

Here’s how you go about it:

Setting up Your Site

If you want to get started, you will need to create a fresh WP install either on a subdomain on a separate development domain. On the other hand, if you’re working on a site that hasn’t been launched yet, you can also use the real domain name as well.

When working on an existing site, you can clone it to your new WP install, just make sure that you replace the URLs when you clone the site.

After this, there are still a few steps to take in order to make your environment private.

Make Sure the Site Can’t be Indexed

This is a vital step you want to make to make sure Google won’t index your development site to wreak havoc on your SEO. To avoid getting indexed, you literally need to tell Google to stay away.

You can do this simply by discouraging search engines in your WP settings. That’s it; Just don’t forget to disable this option once the site goes live.

Making Your Site Private

As the next step, you will want to make your site private to make sure that your staging site won’t track any unwanted attention.

For instance, if you are using Elementor, you can enable its “Coming Soon” feature to kill two birds with one stone: for starters, you will set your site private, and second, you will also have a “coming soon” page as a user-friendly message for visitors.

If you’re not using Elementor, you can use different features (like the .htaccess password protection on APache. Additionally, your hosts may also include a password protection feature on your hosting dashboard.

Disable Caching

Overall, caching is a great way to improve a live WordPress site, but it can be a pain in the back when you want to work on a development site peacefully.

That being said, if your host offers built-in caching, do yourself a favor and disable it for the time being. If you’re using a WP caching plugin, do the same.

Developer-Friendliness

Enable the built-in WordPress debug feature if you want to make your job easier when it comes to troubleshooting errors.

You can also see what your development tools have to offer in terms of debugging/troubleshooting,

As a matter of fact, you can also get a free WP debugging plugin.

Going Live

To make your hosted WordPress development site live, all you need to do is to clone your finished site to its original destination.

If you’re just only updating an existing site with content, things can get a little trickier because you will want to avoid overwriting important database changes.

For instance, if you also published a blog post after you first cloned the site, you would lose that latest blog post if you just overwrote the live version with your finished development copy.

If you need only to make some file changes to the live site, just try to upload the changed files rather than attempting to overwrite the entire site.

Finishing Thoughts

To sum it all up, a WordPress development environment, above all, gives you a safe private space to work on your projects.

You can either choose to go local and work on the sites on your own computer or choose private remote hosting environments.

Both of these strategies have their own advantages and drawbacks, and obviously, you should choose the approach which suits your needs better. Don’t forget, you can also start with one approach and switch to another if you find it more fitting.

At the end of the day, the key here is safety.

Originally published at https://www.popwebdesign.net on November 16, 2021.

--

--

--

PopArt is a full-service digital agency which provides you with graphic & web design, development, and marketing solutions. https://www.PopWebDesign.net

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What are static libraries in C for?

My Experience Building A Web Infrastructure From Scratch

Efficient and Secure Integration of Jeninks with ECR

✨Announcing Peekalink, an API to magically preview any link.

Clean Version Control with Git and Gerrit

Free Tastes Better with Amazon Web Service Amplify

Partitioning: Distributed Data System Patterns

Hashing Files Using Python and A Linux Terminal

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
PopArt Studio

PopArt Studio

PopArt is a full-service digital agency which provides you with graphic & web design, development, and marketing solutions. https://www.PopWebDesign.net

More from Medium

7 Tips to Design Better Web Forms

Top 8 React Bootstrap Themes for Enthusiasts and Pros

How to get started with Bootstrap and Eleventy

Bootstrap Starter Kit

Integrating Single Sign-On Capabilities with WordPress