Using Vagrant as a WordPress Development Environment: Part 3

In my previous two posts on this topic, I discussed installing and setting up Vagrant with a basic Ubuntu box and installing a LAMP stack box called “Scotch Box”. In this post, I’ll SSH into Scotch Box, connect to MySQL and create my database and finally install WordPress with a scaffolding tool called Yeoman.

After downloading the box and running the “vagrant up” command from your terminal or console window of choice (I’m using the terminal window built into PHPStorm), you should have a fully booted virtual machine. Scotch Box comes already configured and installed with a LAMP stack necessary to develop a WordPress site on your local machine.

At this point, visiting 192.168.33.10 in your browser window should bring up a nice little page providing an overview of your Scotch Box configuration. You can follow the instructions on this page to SSH into your Scotch Box, provided you have a client installed to facilitate this. Mac and Linux users shouldn’t have a problem following the instructions as described, but Windows users will likely need to download a SSH utility like puTTy to accomplish this. That said, SSH-ing into your Scotch Box isn’t a necessary step to get a local environment configured; the rest of this process can be accomplished using GUI tools.

To that end, connecting to MySQL and creating a database for your WordPress installation can be accomplished using a free MySQL administration program like MySQL Workbench.

After creating a new MySQL connection, the connection profile needs to be configured like so:

MySQL Workbench Scotch Box Connection Configuration

If using MySQL Workbench, and after configuring and connecting to the server, creating a new database is as simple as clicking the icon that says “Create a new schema in the connected server” and giving the newly created database a name.

Now that we have a running server and created a database, the only remaining task is to install WordPress. Of course, this can be as simple as downloading the necessary files from WordPress.org and editing the wp-config.php file to connect to our database. A more streamlined approach would be to use Yeoman to build a base WordPress installation and custom theme for us.

What is Yeoman?

Simply put, Yeoman is a web app scaffolder (it builds out an app skeleton of various types of web apps). This scaffolding is done via a “generator” — there are over 1,800 publicly available generators for use for all sorts of web apps, including WordPress. The generator I use is called YeoPress.

NPM is required in order to install Yeoman and a few other dependent packages (Grunt, Gulp and Bower). If you have NodeJS installed on your system, you already have NPM installed as well. Following the Yeoman installation instructions gives you everything needed to install YeoPress:

npm install -g yo bower grunt-cli gulp

Installing YeoPress is as simple as running the following command from your terminal window:

npm install -g yo generator-wordpress

After installing, change directories to wherever you’ve cloned (installed) Scotch Box. If Scotch Box was installed correctly, there should be a ‘public’ directory. Switch into ‘public’ and delete any existing files (this/these were the Scotch Box file(s) you saw when viewing 192.168.33.10 in your web browser). From this location, run the following command:

yo wordpress

Follow the onscreen instructions and let YeoPress download and configure your WordPress installation automatically. You can also let YeoPress create a custom theme for you using the Underscores theme. Once complete, you should now have a working WordPress development environment.

As of this writing, the installation process generated an error, but as far as I can tell, this error does not seem to impact the WordPress installation or custom theme in any noticeable way.

Leave a Reply