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.