Themes & Plugins Tutorials WordPress

How To Use Vagrant And Git To Develop A WordPress Theme

Written by Stefano Maffulli

The simplest way to modify WordPress themes is to run a development version on your local computer. Setting up a Linux server, with PHP and a web server on your own computer is becoming less onerous and complicated with tools like MAMP, XAMPP or DesktopServer. Vagrant is another tool in this category, making WordPress development much easier. The awesome WordPress community has gone one step further with “Varying-Vagrant-Vagrants”: VVV for short.

Let’s try to create a new WordPress site and use VVV to develop a new theme locally, and then push the modifications to a live site running on DreamPress. We will use Git, so make sure to read how to use Git with WordPress in order to follow along.

Merging Streams

Merging Streams, Image courtesy ctot_non_def

Get familiar with VVV

Varying Vagrant Vagrants is an open source Vagrant configuration focused on WordPress development. Maintained by a large community of contributors, VVV’s goal is to provide an approachable development environment with a modern server configuration. It is regularly used to modify WordPress core software as well as to develop plugins and themes.

Vagrant is a multi-platform tool that builds development environments based on virtual machines. Developers can describe a virtual machine and its configuration in a text file, feed it to Vagrant and, after a few minutes, have a running environment already configured. Once you have downloaded VVV, the simple command `vagrant up` will create a Ubuntu virtual machine with all the software installed and configured to run WordPress.

To get started, download and install Vagrant and VirtualBox for Windows, Mac OS, or Linux. Once these are installed, start up your git client and clone VVV’s repository into your working folder, such as the “Sites” folder for Mac OS users (using Terminal):

[user@localhost]$ cd ~/Sites
[user@localhost]$ git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git

Change into the newly created VVV folder and start the virtual machine with:

[user@localhost]$ cd VVV
[user@localhost]$ vagrant up

The first time you run this command, Vagrant will download lots of files. Be patient, as this may take a while.

Before the script completes its run, it may ask for the administrator’s password to modify the ‘hosts’ file. Once that’s done, you will have a virtual machine running with the latest stable version of WordPress. The site will be running on a virtual IP reachable from the browser. The default address is http://192.168.50.4 or http://vvv.dev (if you have installed vagrant-hostsupdater plugin).

The first vagrant up tutorial has further explanations and suggestions.

Playing with WordPress installation

Inside the folder VVV the directories `config`, `database`, `log` and `www` are shared with the virtualized server. Change into the www directory and notice the folder `VVV/www/wordpress-default`: this contains the stable WordPress installation and is the one to work on for this tutorial.

Create a child theme

Child themes are a great way to quickly customize an existing theme in a safe way.  In the folder `wordpress-default/wp-content/themes/` create a child theme and initialize a git repository there:

[user@localhost]$ mkdir example-theme
[user@localhost]$ git init example-theme/
Initialized empty Git repository in ~Sites/VVV/www/wordpress-default/wp-content/themes/example-theme/.git/

Alternatively, you can download a starter theme like underscores in the themes folder. Commit the change with the command `git add * && git commit -a` and you’ll see the child theme appear in the WordPress control panel at http://local.wordpress.dev/wp-admin (using the admin/password combination to log in as administrator.)

Once you have tested the child theme, you can push the changes to the remote server at DreamHost. If you’ve already set up Git on your DreamHost server, you should be able to add a new remote to your local repository and push the changes live.

This is only a simplified introduction to Vagrant and Git, but I hope it’s able to clarify how both can help you simplify WordPress development. And don’t forget—there’s plenty more documentation in our nifty Knowledge Base to help you get up to speed and keep your WordPress sites running smoothly!

Have questions? Simply comment below or start a discussion here

About the author

Stefano Maffulli

Stefano is the Director of Community at DreamHost.