Theme Juice: A New Auto Site Generator for WordPress Development with Vagrant

As WordPress developers everywhere are adopting Vagrant for local development, new configurations seem to pop up every week to address the needs of different teams and workflows. Theme Juice is the newest open source project to join the ever-growing list of WordPress-related Vagrant resources.

The project is based on VVV, one of the most popular and best-supported Vagrant configurations. Its VM is built on an Apache fork of VVV called VVV-Apache.

Theme Juice installs as a Ruby gem and requires requires Vagrant and VirtualBox. The tj create command leads you through prompts to set up project information, location, database info and will then create a local development environment (if one isn’t already in place.) It automatically syncs the local project location with the project location within the VM, enabling it to be run from anywhere on your system.

It also supports Windows with a few feature limitations.

If you are not using Apache, Theme Juice can be modified for use with Nginx via the original VVV, which is as easy as running it with a few flags:

tj new --vm-box git@github.com:Varying-Vagrant-Vagrants/VVV.git --nginx

Access Projects from Other Devices, Including Mobile

One of the unique features of Theme Juice is that every project created with tj is automatically set to support xip.io, a free magic domain name that provides wildcard DNS for any IP address. This enables access to virtual hosts on your development server from other devices on your local network, ie. tablets and phones. This works best with OSX, according to TJ’s documentation:

If you’re using OSX, then everything should work out of the box. If you’re not using OSX, then you’ll need to point port 80 on your host machine to 8080; Vagrant cannot do this by default for security reasons.

Once everything is good to go, you can access a project from another device on the same network by going to:
< project-name >.< your-hosts-ip-address >.xip.io

e.g. themejuice.192.168.1.1.xip.io.

This feature allows you to easily test your development projects on mobile devices with no extra configuration required.

The Origins of Theme Juice

The project was created by Ezekiel Gabrielse and the folks at Produce Results for internal use at their agency. Gabrielse is the lead developer for a small team of developers for whom Theme Juice is now an indispensable tool.

“We work at a fast pace, so having the ability to create and remove development projects easily, a well as quickly restore/set up existing projects, is essential to keeping our flow, well, flowing,” he said. “We’ve been dogfooding and developing this utility for almost 10 months and are excited to finally get it out to the community.”

Gabrielse built Theme Juice to ease the process of creating new development sites, which he found to be somewhat inconvenient with VVV.

“After a few weeks of using vanilla VVV, I quickly realized that the process of creating a new site was very repetitive, and like any developer, I sought to automate that repetition,” he said. (This was long before Variable VVV was released, which automates site creation and deletion.)

“What started as a quick little (actually, it got pretty large) Rake task included in our company starter theme, quickly grew into a separate project that I extracted out to a Ruby gem.”

The resulting Theme Juice project integrates with VVV and leverages many of its unique features but adds auto site setup and additional functionality to manage build tools for Gabrielse’s development team.

“Suffice it to say, it saves us time by automating the entire process of creating new development projects,” he said. “We also incorporated a sort of crude scripting via a configuration file (called a Juicefile) that allows us to easily run any build processes we need to upon project creation.”

Once Gabrielse realized how useful that functionality was, he pushed it out further and abstracted all of the team’s build tools to the configuration. This enabled them to seamlessly switch between tools whenever a project required it.

“We’ve recently changed from Guard to Grunt, from NPM packages to Bower packages,” Gabrielse said. “Having all of those tools abstracted out to tj commands, we didn’t have to change anything in our workflow, our build scripts, our deployments, etc., because everything was already using the command aliases provided by tj. This also allows us to transition from project to project without having to worry about how to run the build tools for that particular project, as it’s all abstracted out, so that we can focus on the task at hand.”

Theme Juice caters towards experienced developers who like to use modern build tools and systems for their development.

“Using our starter theme, we use Composer for PHP/WP plugin management, Bower for front-end dependencies, Grunt for managing build tools, which includes Coffee, Haml, and Sass compilation,” Gabrielse said. “At first glance this seems daunting to have to manage all of that, but with using tj, it’s easy.”

A list of all the global options and commands is available on the Theme Juice documentation page.

In the future, Gabrielse plans to extend Theme Juice to handle deployments. Right now he is leaning towards integrating an automated Capistrano workflow but is open to other suggestions now that the project is public. Anyone who is interested in contributing can find out more about the process on the project’s GitHub home page.