A nice Wordpress de­vel­op­ment setup

I’ve been do­ing quite a few Wordpress sites for peo­ple lately, so I spent some time mak­ing sure I my de­vel­op­ment setup is still good to go. I’m mostly writ­ing this for my own doc­u­men­ta­tion, but maybe there’s some use­ful bits in here for you, too.

This setup is all com­mand line based, but once you get used to it’s much nicer than the XAMPP-based work­flow I had be­fore.

VVV

All my pro­jects run on VVV, which (as far as I un­der­stand) is a wrap­per around Vagrant and Virtualbox. You in­stall those two first, then pull down the VVV repo fol­low­ing these in­struc­tions. Once that’s done, you can run

vagrant up

which spins up a vir­tual ma­chine with a spe­cial Unix ver­sion that has all the stuff Wordpress needs to func­tion - PHP, MySQL and what­ever else. Updating VVV can be a bit finicky.

To start a new Wordpress pro­ject, you open the vvv-custom.yml file and add an en­try like this:

my-site:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    site_title: "My Cool Website"
    hosts:
        - my-cool-site.test

The doc­u­men­ta­tion goes into more de­tail on this. Then you run vagrant up --provision, which goes through your vvv-custom.yml file and sets up a fresh Wordpress in­stall for each site you’ve con­fig­ured.

The de­fault do­main ex­ten­sion used to be .dev, but ap­par­ently Google has bought that, which leads to all sorts of prob­lems. I have a bunch of sites still con­fig­ured to .dev do­mains, but it looks like the mi­gra­tion is non-triv­ial. So I’m go­ing to leave my ex­ist­ing sites for now un­til some­thing breaks.

Browsersync

I use Grunt Browsersync so I don’t have to re­fresh the page when I’m work­ing (it also does CSS in­jec­tion and other neat things). You can point it to the VVV do­main in your gruntfile.js us­ing the proxy op­tion:

browserSync: {
    dev: {
        bsFiles: {
            src : 'assets/css/style.css'
        },
        options: {
            proxy: "my-cool-site.test"
        }
    }
}

Works like a charm.

Updating Wordpress us­ing WP-CLI

Another neat thing you can do is up­date plu­g­ins, themes and Wordpress it­self right from the com­mand line us­ing WP-CLI. That feels much nicer to me than click­ing around the Wordpress ad­min.

The first thing you need to do is ssh into your vir­tual ma­chine:

vagrant ssh

On my Windows ma­chine I have to do this in Git Bash be­cause that comes with an SSH client. Then you cd into the folder that be­longs to whichever site you’re work­ing on:

cd srv/www/my-cool-site/

Then you can run this and walk away while your site up­dates it­self:

wp core update ; wp plugin update --all; wp theme update --all

How nice is that. WP-CLI has a lot more op­tions to make finer-grained changes if you need to.

Installing plu­g­ins with WP-CLI

wp plugin install custom-post-type-ui --activate
wp plugin install timber-library --activate
wp theme install https://github.com/timber/starter-theme/archive/master.zip
wp theme activate starter-theme

Todo