[print-me]

How to Setup A Local Development Environment

Dev Tutorials

 Last Updated: Time to Read: 4 minutes

There are a number of ways to develop themes and plugins for WordPress, and a number of applications. This article aims to walk those of you just starting out with WordPress Development through setting up a local web server on your Mac or PC using common techniques and open-source software.

Browsers

If you don’t already have multiple browsers installed, you should. At a minimum, your system should have Chrome, Firefox and Safari installed.

Windows users should also have the current version of Internet Explorer installed.

Recommended Firefox Extensions:

Recommended Chrome Extensions:

Be sure to turn off all other Chrome extensions during development or testing, especially Adblock!

Recommended Safari Config for Windows:

  1. Go to Options → Preferences
  2. Ensure Always Prompt Before Downloading is checked
  3. Click Advanced
  4. Check Show Develop Menu

Recommended Safari Config for Mac:

  1. Click Safari → Preferences
  2. Click General
  3. Remove the check from the box beside “Open ‘safe’ files after downloading”
  4. Click Advanced
  5. Check Show Develop Menu

When testing or developing in the browser, don’t forget to use private windows or clear the browser cache!

Setup a Local Web Server

  1. Download: There are two common open-source applications for doing this, XAMPP and MAMP. Both are virtually identical, however MAMP has better MAC support. When installing, be sure to choose a location where you want your web server to live. For Windows Users, this is best on a secondary drive or somewhere other than Program Files. For Mac Users, a folder inside your user folder that you can access from the main Finder Screen is ideal.
  2. Start: Launch the program and ensure Apache and MySQL are started. See MAMP help or XAMPP Help for detailed steps

Create a Database

Each WordPress install needs a database. Local environments don’t have a one-click setup like your webhost, so you will need to do this yourself. Don’t worry, this is an important skill to learn if it is your first time.

Note: These instructions are written for phpMyAdmin 3.5; the phpMyAdmin user interface can vary slightly between versions.

  1. Open a browser and go to http://localhost/phpmyadmin
  2. Under Databases, enter your chosen database name in the Create database field. The name should be unique, i.e. layers_wordpress
  3. Choose the best collation for your language and encoding in the drop-down menu
    • utf8_unicode_ci is the safest choice if this is confusing
  4. Click Create
    1. phpMyAdmin_create_database
  5. Click the phpMyAdmin icon in the upper left to return to the main page, then click the Users tab.
  6. Click Add user
  7. Choose a username and enter it in the User name field. You can re-use this username later for any additional databases if you like.
    • Be sure Use text field: is selected in the drop-down
  8. Choose a secure password and enter it in the Password field.
    • Be sure Use text field: is selected from the dropdown
    • Re-enter the password in the Re-type field
  9. Leave all options under Global privileges at their defaults.
  10. Click Go and then write down the username and password
  11. Return to the Users screen and click the Edit privileges icon on the user you’ve just created
  12. In the Database-specific privileges section, select the database you’ve just created from the Add privileges to the following database dropdown.
    • The page will refresh with privileges for that database.
  13. Click Check All to select all privileges, and click Go.
  14. On the resulting page, make note of the host name listed after Server: at the top of the page.

Install WordPress

Both of these programs create an htdocs folder inside the main MAMP/XAMPP folder. This is your virtual web space.

  1. Download WordPress and unzip it somewhere other than htdocs
  2. Create a folder inside htdocs related to your project, i.e. “layers”
    • This allows you to manage multiple websites and WordPress installs
  3. Copy the contents of the unzipped wordpress folder and paste inside the folder you just created in htdocs
    • xampp-folders
  4. Visit your new WordPress URL in the browser to proceed with setup. Example: http://localhost/layers/
  5. When prompted for the database credentials, leave the server as localhost, then enter the username and password you created in PHPMyAdmin
  6. You will be directed to login to your WordPress admin at the end of the setup wizard. You now have a local install of WordPress!

You can setup WordPress as a Multi-site network to manage multiple sites on one WordPress install. This is extremely helpful when using the same themes or plugins across multiple projects.

From here you can install Layers and any other themes and extensions to begin customization, setup and development.

Moving Your Site to a Live Server

The easiest way to do this is to  use a total backup plugin like WP Backitup. See their documentation for how to backup your site and restore it on a new server.

You can also backup and restore just the content and layouts of a single Layers site. This is best if your media library is full of extra stuff or you are running multi-site. See Backup Content Widgets and Layouts

You can also do it the super-manual way. Here is WordPress.org’s arduous documentation for how to do that.

Testing Your Sites