WordPress Local Development For Beginners: From Setup To Deployment

WordPress Local Development For Beginners: From Setup To Deployment

WordPress Local Development For Beginners: From Setup To Deployment

Nick Schäferhoff

2018-04-27T14:00:29+02:00
2018-04-27T12:15:55+00:00

When first starting out with WordPress, it’s very common to make any changes directly on your live site. After all, where else would you do it? You only have that one site, so when something needs changing, you do it there.

However, this practice has several drawbacks. Most of all that it’s very public. So, when something goes seriously wrong, it’s quite noticeable for people on your site.

Preventing Common Mistakes

When creating free or premium WordPress themes, you’re bound to make mistakes. Find out how you can avoid them in order to save yourself time and focus on actually creating themes people will enjoy using. Read more →

It’s ok, don’t feel bad. Most WordPress beginners have done this at one point or another. However, in this article, we want to show you a better way: local WordPress development.

What that means is setting up a copy of your website on your local hard drive. Doing so is incredibly useful. So, below we will talk about the benefits of building a local WordPress development environment, how to set one up and how to move your local site to the web when it’s ready.

This is important, so stay tuned!

The Benefits Of Local WordPress Development

Before diving into the how, let’s have a look at the why. Using a local development version of WordPress offers many benefits.

We already mentioned that you no longer have to make changes to your live site with all the risks involved with that. However, there is more:

  • Test themes and plugins
    With a local copy of your site, you can try out as many themes and plugin combinations as you want without risking taking your live site out due to incompatibilities.
  • Update safely
    Another time when things are prone to go wrong are updates. With a local environment, you can update WordPress core and components to see if there are any problems before applying the updates to your live site.
  • Independent of an online connection
    With your WordPress site on your computer, you can work on it without being connected to the Internet. Thus, you can get work done even if there is no wifi.
  • High performance/low cost
    Because site performance is not limited by an online connection, local sites usually run much faster. This makes for a better workflow. Also, as you will see, you can set it all up with free software, eliminating the need for a paid staging area.

Sounds good? Then let’s see how to make it happen.

How To Set Up A Local Development Environment For WordPress

In this next part, we will show you how to set up your own local WordPress environment. First, we will go over what you need to do and then how to get it right.

Tools You’ll Need

In order to run, WordPress needs a server. That’s true for an online site as well as a local installation. So, we need to find a way to set one up on our computer.

That server also needs some software WordPress requires to work. Namely, that’s PHP (the platform’s main programming language) and MySQL for the database. Plus, it’s nice to have a MySQL user interface like phpMyAdmin to make handling the database more convenient.

In addition to that, need your favorite code editor or IDE (integrated development environment) for the coding part. My choice is Notepad++ but you might have your own preferences.

Finally, it’s useful to have some developer tools to analyze and debug your site, for example, to look at HTML and CSS. The easiest way is to use Chrome or Firefox (read our article on Firefox’s DevTools), which have extensive functionality like that built in.

Available Software

We have several options at our disposal to set up local server environments. Some of the most well known are DesktopServer, Vagrant, and Local by Flywheel. All of these contain the necessary components to set up a local server that WordPress can run on.

For this tutorial we will use XAMPP. The name is an acronym and stands for “cross platform, Apache, MySQL, PHP, Perl”. If you have been paying attention, you will notice that we earlier noted MySQL and PHP as essential to running a WordPress website. In addition, Apache is an open source solution for creating servers. So, the software contains everything we need in one neat package. Plus, as “cross platform” suggests, XAMPP is available for both Windows, Mac and Linux computers.

To continue, if you haven’t done so already, head over to the official XAMPP website and download a copy.

How To Use XAMPP

Installing XAMPP pretty much works like every other piece of software.

On Windows:

  1. Run the installer (note that you might get a warning about running unknown software, allow to continue).
  2. When asked which components to install, make sure that Apache, MySQL, PHP, and phpMyAdmin are active. The rest is usually unnecessary, deactivate it unless you have good reason not to.
  3. Choose the location to install. Make sure it’s easy to reach as that’s where your sites will be saved and you will probably access them often.
  4. You can disregard the information about Bitnami.
  5. Choose to start the control panel right away at the end.

On Mac:

  1. Open the .dmg file
  2. Double click on the XAMPP icon or drag it to applications folder
  3. That’s it, well done!

After the installation is complete, the control panel starts. Should your operating system ask for Firewall permissions, make sure to allow XAMPP for private networks, otherwise, it won’t work.

Large preview

From the panel, you can start Apache and MySQL by clicking the Start buttons on the respective rows. If you run into problems with programs that use the same ports as XAMPP, quit those programs and try to restart the XAMPP processes. If the problem is with Skype, there is a permanent solution by disabling the ports under Tools → Options → Advanced → Connections.

Large preview

Under Config, you can also enable automatic start for the components you need.

Large preview

After that, it’s time to test your local server. For that, open your browser, and go to http://localhost.

If you see the following screen, everything works as it should. Well done!

Large preview

Installing WordPress Locally

Now that you have a local server, you can install WordPress in the same way that you do on a web server. The only difference: everything is done on your hard drive, not an FTP server or inside a hosting provider’s admin panel.

That means, to create a database for WordPress, you can simply go to http://localhost/phpmyadmin. Here, you find the same options as in the online version and can create a database, user and password for WordPress.

Large preview

Once that is done and you want to install WordPress, you can do so via the htdocs folder inside your installation of XAMPP. There, simply create a new directory, download the latest version of WordPress, unpack the files and copy them into the new folder. After that, you can start the installation by going to http://localhost/newdirectoryname.

Large preview

That’s basically it. Now that you have a running copy of WordPress on your website, you can install themes and plugins, set up a child theme, change styles, create custom page templates and do whatever your heart desires.

When you are satisfied, you can then move the website from a local installation to live environment. That’s what we will talk about next.

How To Deploy Your Site With A Plugin

Alright, once your local site is up to your liking, it’s time to get it online. Just a quick note: if you want to get a copy of your existing live site to your hard drive, you can use the same process as described below only in reverse. The overall principles stay the same.


Source: Smashing Magazine