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.

Creating a Front-end Form with Advanced Custom Fields to Create New Posts

Advanced Custom Fields gives WordPress developers the ability to add all kinds of data onto their WordPress posts, taxonomy terms, etc. via form fields in the WordPress admin, but it also allows developers to create forms on the front-end to collect data from users and also to edit data found in the WordPress database. In turn, this data can be collected and emailed via a simple contact form, used to edit existing WordPress posts, or used to create new ones.

Giving site visitors the ability to create posts might sound like a bit of a security risk, but coupled with the right precautions, it can prove to be a huge time-saver in populating a site with content. For instance, suppose you’re creating a site for an event and you’d like to display the biographies and social media links of your presenters or attendees. Typically, this type of user generated content would need to solicited, collected and then most likely copied and pasted into new posts. Instead, via Advanced Custom Fields, you could create a form that would allow event attendees to fill-out the requested information and turn the submissions into posts. Very handy!

The ACF documentation contains, some example code that serves as a good introduction to the general form-creation concept.

Taking this idea a step further, here’s an example of an instance of the appropriate option configuration when calling acf_form(), using ACF v5. This configuration creates a new post upon form submission, saving the post as a draft, and assigning the post a certain category:


$args = array(
'post_id' => 'new_post',
'post_title' => true,
'post_content' => true,
'new_post' => array(
'post_status' => 'draft',
'post_type' => 'post',
'post_category' => array(8)
),
'submit_value' => 'Create Post'
);

acf_form($args);

It is worth noting that the above example does not actually use any ACF groups, instead relying solely on some of the built-in ACF functions (acf_form(), and acf_form_head()) to process the form! Of course, this could be extended further to include defined field groups, making the types of data to be collected and stored virtually limitless.

Using Vagrant as a WordPress Development Environment: Part 2

In my previous post, I discussed installing and setting up Vagrant with a basic Ubuntu box and troubleshooting a snag I hit having Hyper-V activated. In this post, I’ll troubleshoot another Vagrant setup issue and adding Scotch Box, a Vagrant box designed for LAMP applications (including WordPress).

A Second Hiccup

After resolving the Hyper-V issue, I encountered another error after running “vagrant up”: the connection between Vagrant and VirtualBox timed out. Opening the VirtualBox GUI preview window showed a blank, black screen. Not very helpful.

Opening the VirtualBox “settings” screen, however, showed that my box was configured to use a very low amount of RAM. I upped this to 1024MB and re-ran “vagrant up” without any issues. The box booted successfully.

Important Configuration Settings

This all could have been avoided had the Vagrant quick start tutorial made note of two important settings within the “Vagrantfile”. On line 46, the following lines are commented out:

# config.vm.provider "virtualbox" do |vb|
#   # Display the VirtualBox GUI when booting the machine
#   vb.gui = true
#
#   # Customize the amount of memory on the VM:
#   vb.memory = "1024"
# end

Un-commenting those lines would have saved me an hour or so of frustration, giving the box the necessary RAM to boot and also allowing me to see the box as it boots, instead of only reading messages within the console.

A Vagrant Box for WordPress: Scotch Box

The last real steps of the Vagrant quick start tutorial call for SSH-ing into the fully booted box. I was happy just being able to boot the machine after a couple hours of tinkering, so I decided to save the SSH step for when I had a box I’d actually be using for development.

Some searching led me to Scotch Box, a complete LAMP stack solution for Vagrant that required little configuration after installation. I tried a couple other “WordPress” tagged boxes from the catalog, but none seemed ready-to-go, uhh, out-of-the-box.

There appears to be both a difficult way and an easy way to get Scotch Box up and running. Of course, I inadvertently chose the difficult route. Following the Vagrant instructions, I initialized my project directory and added the box from the catalog. After modifying my “Vagrantfile” to make sure I had enough RAM, I ran “vagrant up” and ran into another timeout issue, followed by a chain of other problems.

As it turns out, all of my troubles could have been avoided if I had simply cloned the Scotch Box repository on Github. Doing so would have given me a properly configured “Vagrantfile” and allowed the box to launch with the web-server accessible from my host machine.

In the next part of this series, I’ll SSH into Scotch Box, connect to the MySQL database and install WordPress using Yeoman.

Using Vagrant as a WordPress Development Environment: Part 1

In the past, I’ve used XAMPP for local WordPress theme development, but have been reading and hearing lots about Vagrant. Last weekend, I decided to give it a try.

Unlike XAMPP, the idea behind Vagrant is to run a virtualized OS environment from within a program like VirtualBox. These virtual environments are distributed via a catalog of base images (known as “boxes”). The catalog is comprised of user contributed and customized boxes. Vagrant has a nicely written tutorial on it’s site to get you started creating your first virtual environment from one of these boxes. Unfortunately, at least for me, there were some complications along the way.

Initial Setup

After installing both Vagrant and VirtualBox, and initializing your project directory, it’s time to install your first “box.” Vagrant recommends testing out a box called “hashicorp/precise32” which is a base image of Ubuntu 12.04 LTS 32-bit.

I’m primarily a Windows user, so I carried out all of my commands simply using the Windows Command prompt. After executing the “vagrant box add hashicorp/precise32” command, the box download begins. One of the nice things about Vagrant is that these boxes can be reused by multiple Vagrant environments, so there’s no need to download the same box twice.

Next, after downloading, it’s time to edit the auto-generated “Vagrantfile” to tell Vagrant that you’d like to use the box you’ve just downloaded as your virtual environment. Once configured and saved, it’s just a matter of returning to the command prompt and executing “vagrant up” to launch your box.

The First Hiccup

During the launch process, Vagrant boots up the specified Ubuntu box in VirtualBox. By default, you don’t see this process taking place from within the VirtualBox GUI — all we’re given are some messages on the command prompt relaying the boot status.

Of course, my first attempt at booting resulted in an error. Launching VirtualBox I was presented with an unhelpful error message:

VT-x is not available. (VERR_VMX_NO_VMX).

Turns out, VirtualBox does not play nice with Windows Hyper-V — VT-x is hardware virtualization that is usurped by Hyper-V and VirtualBox needs it to work. Disabling Hyper-V cleared this error, but uncovered another.

In the next part of this post series, I’ll wrap up troubleshooting my initial Vagrant setup, launch and SSH into the test Ubuntu box and take a look at a couple other boxes that come distributed with a LAMP stack for WordPress development.