vagrantpress-for-wordpress-theme-development

November 13, 2018 21:22

Over the weekend, I started looking at some WordPress theme development for a project I'm involved in. I had seen quite a few commits over the course of the day so I thought I'd grab the theme and take a look what the guys had been busy working on. I thought I'll just grab the code from our BitBucket repo and run it using the built in PHP development server.. simples!

Hang on, not so fast! I'd made quite an oversight, for some reason it hadn't twigged in my head that we were developing a WordPress theme and therefore we would need a WordPress install to run the theme. At this point I had a few ways I could get a copy of WordPress up and running on my machine -

  1. Grab the source and setup a web server locally on my MacBook
  2. Use my existing Ubuntu server virtual machine setup using VirtualBox
  3. Setup a Vagrant development environment the whole team could share

I decided to go for the latter, I don't like to clog up my machine and much prefer to work in virtual machines for my projects and using Vagrant the rest of the team could have an isolated environment so we could all be working off one environment and if anyone new got involved they could just grab a copy of the Vagrant box.

As usual, without searching first, I went straight into setting up a clean Vagrant box using the hashicorp/precise64 box available from the Vagrant Cloud. It was literally as simple as -

mkdir ~/projects/work/wordpress-theme
cd ~/projects/work/wordpress-theme
vagrant init hashicorp/precise64
vagrant up

NB: I did already have VirtualBox and Vagrant installed on my machine

I then started thinking about what I would need to install, I came up with PHP5, Apache2, MySQL, WordPress at a minimum and I probably wanted to install phpMyAdmin and PHP QA Tools as well. Then I got thinking, surely someone else has done this before...

Enter VagrantPress. It's a Vagrant based development environment for creating and modifying WordPress sites. It contains -

  • Ubuntu Precise (12.04)
  • Wordpress 3.8
  • MySQL
  • PHP5
  • phpMyAdmin
  • Subversion
  • PEAR
  • Xdebug
  • PHP QA Tools including PHPUnit, phploc, phpcpd, phpdcd, phpcs, phpdepend, phpmd, PHP_CodeBrowswer
  • WordPress sniffs for phpcs
  • WordPress Unit Tests

To get up and running, it should have been as simple as

git clone [email protected]:chad-thompson/vagrantpress.git
cd vagrantpress
vagrant up
Navigate to http://localhost:8080

However, for whatever reason my Mac, port 8080 was being used for something else (note to self, figure out what this is) so VirtualBox couldn't create a port mapping from 8080 to 80. 

Bringing machine 'default' up with 'virtualbox' provider...
[default] Clearing any previously set forwarded ports...
Vagrant cannot forward the specified ports on this VM, since they
would collide with some other application that is already listening
on these ports. The forwarded port to 8080 is already in use
on the host machine.

After some searching I came across an issue on the GitHub project for VagrantPress which looked to be the same as what I was seeing, following the directions on there and also the linked issue I was able to get up and running. I had to make two changes. First of all, I had to open up my Vagrantfile which was located in the root of the vagrantpress directory to change the port mapping line so it now read as follows

config.vm.network :forwarded_port, guest: 80, host: 8081

I could now start my machine by running vagrant up but found that when I tried to access http://localhost:8081 it would redirect me back to http://localhost:8080. I tracked this down to be caused by the WordPress site configuration. Therefore I had to add the following two lines to my WordPress configuration file, which I found in the following location ~/projects/work/vagrantpress/wordpress/wp-config.php

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

After this was changed I needed to change the wp_options.siteurl setting in the database as that was still causing it to redirect me. I logged into phpMyAdmin following the default URL which is http://localhost:8081/phpmyadmin and logged in as root with the default password of vagrant. I could then browse into the wordpress database, and change the value of wp_options.siteurl to be http://localhost:8081.

It was all setup now, I cloned the WordPress theme I was working on into the wp-content/themes directory and then used the admin pages to install the theme. Finally, I was there, all setup and ready to work on our WordPress theme.

Turned out to be quite a long post, hope someone finds it useful :-)