Steve Frost | Front-End Engineer

Setting Up a Local WordPress Environment

May 14, 2017

success-messsage-wordpress

Creating a local environment, or more often fixing one, is an essential part of being a developer/engineer. Since the code lives on your computer, testing and deploying code is almost instant reducing the development feedback loop. There are several other benefits that make it worth the effort of setup such as the code isolation, minimized chance of breaking live products, ability to work offline, flexibility to use different tools than the production server supports, and root access, if needed.

Installing the LAMP Stack

Before installing the actual WordPress files, we need to setup the environment where it will run – specifically, an environment composed of the LAMP stack aka Linux Apache, MySQL, PHP/Perl/Python. When setting up this stack, there are two choices: manual or packaged. The manual process is best done via Homebrew on Mac or by installing each individual piece on Linux/Windows. There are a few options if you’d like to go the packaged route including MAMP, WAMP, and XAMP. Immediately you’ll notice that each acronym is similar with the first letter representing the operating system it is made for: MAMP for Mac though there is a Windows version of it now, WAMP for Windows, and XAMP for cross-platform. Since I’m on Mac, I’ll be using MAMP. I’ve also grown to prefer it over XAMP because of it’s simplicity and low CPU usage. Here is a great MAMP installation tutorial if that’s’ the package you go with.

Once you have the stack installed, fire up the Apache & MySQL servers at which point you’re ready to move onto installing WordPress.

Installing WordPress

To start with installing WordPress, visit the website and download the most recent source code zip. Unzip the files and put them in the document root that your configuration is looking in – by default, MAMP looks inside the htdocs folder within it’s own application folder. This preference can be updated by changing the Document Root in Preference -> Web Server within MAMP.

  1. Once the files are in the correct folder, visit localhost:8888 on your browser and you should see the file tree displayed. Go ahead and click on the WordPress item within the browser to start the WordPress setup.
  2. After setting the language, the next step is to enter details about the database but first we have to create the database! Jump back to MAMP and create a database by opening the WebStart page (the middle button on the app) and selecting PHPMyAdmin from the top bar. If it is grayed out, be sure you’re using the standard version of PHP within MAMP. As of this blog, it is the 7.0.5 option. Within PHPMyAdmin, click Databases then fill in a name by Create Database and click Create. create-database-in-phpmyadmin
  3. Return back to the WordPress setup and enter the information you created in the previous step. For the username & password, use the MySQL login that you’ve setup in your LAMP setup – mine is U: root, P: password. It is important to note that these are only for local development. If you were to push this to a live, production website then it would be critical to have a secure username and password to avoid unauthorized users from guessing these credentials. Updating the table prefix from wp is also a recommended practice as hackers who may be trying to exploit WordPress databases will be searching for any databases prefixed with wp – I’ve updated mine to lw for local-wordpress. Verify these settings and click Submit. create-database-in-wordpress
  4. If everything has been setup correctly, you should receive a success message that says, “All set Sparky.” success-messsage-wordpress
  5. On the next screen, WordPress asks for a site title, username & password, and a few other basic settings as a part of it’s “famous five-minute setup.” These settings are for the WordPress CMS itself and will be used to login to the dashboard. wordpress-settings-setup
  6. Now we can navigate back to PHPMyAdmin and see that the database has been setup with the options we’ve given to it. This is a great time to make sure the information is correct and fix it if needed. completed-database-setup

That’s it! Using the database login we can edit the database and using the CMS login we can enter the WordPress dashboard through siteurl.com/wp-admin. If you load the CMS you’ll see the default WordPress CMS ready for the editing, testing, tinkering, and experimenting.

success-messsage-wordpress

Conclusion

Now that we have a local setup we’re free to edit it however we like to try out new plugins, themes, make it match our custom production environment, or anything the mind could dream up. It might seem like a considerable amount of labor up-front but it will save countless hours on the tail-end by giving us a safe space to efficiently & quickly try out fresh code without worry of breaking a live product.


Steve Frost

Written by Steve Frost who lives in Minneapolis using technology to make an impact in the community and our environment.

Follow on Twitter