Bootstrap Your WordPress Workflow

Presented by Jeff Brock at WordCamp Seattle 2015: Experienced Edition. PDF version

I own Jeff Brock Studio, a design and development shop here in Seattle. I’ve been building websites for the last 18 years — basically, since before the earth cooled. I’m constantly seeking new ways to boost my productivity, and I recently revamped my entire workflow.

Today I’ll walk you through the thought process behind those decisions, so you can benefit from the trial and error I went through. I’m hoping you’ll come away with some ideas and tools that will help you work smarter and have more of a life away from the endless proliferation of screens.

A new client in August spurred the journey: Oregon’s Health CO-OP, a non-profit health insurance provider in Portland. They came to me through my long-term partnership with an awesome branding and design agency in Portland called DOJO Agency. When they put me in charge of WordPress development for the COOP’s new site I knew the theme framework I had cobbled together over the years just wouldn’t cut it and I needed a new approach.I’ve worked with WordPress since version 2.6 in 2008. I’ve built more than 75 WordPress sites. WordPress makes up about 95% of my client workload, so I live and breathe WordPress — I adore it. But I recently discovered that when you put Bootstrap into the mix it makes for a very profitable combination. In the last 6 months it’s allowed me to build 10 new WordPress sites, for clients like zulily and Intel, on top of my regular client workload. That wouldn’t have been possible if I hadn’t restructured my workflow.

Inspirations

To get there, I was inspired by a couple of folks.

Morten Rand-Hendriksen, who’s speaking next, gave an awesome talk at WordCamp Seattle last year on “Web Design is a Process”. It spurred my thinking in a new direction.
An article on WPMUDEV by Josh Pollock, called “No More Cowboy Coding”, listed great tools for making your workflow more professional. So what’s cowboy coding? It’s working on a live production server and crossing your fingers that your changes don’t break the site. “I’m working on this late at night. No one will notice if the site is broken for five minutes.” If you’re buried by your workload it’s an understandable approach — and believe me I’ve been there — but it’s dangerous.

Now we’ll look at four frameworks for your workflow: Sass, Bootstrap, the underscores theme, and my own starter theme, _jbs.

Sass

Sass stands for “Syntactically Awesome Style Sheets”. It’s a CSS pre-processor that extends the CSS language with functionality that should have been baked into CSS from the beginning.

You can nest your selectors for easy-to-read, easy-to-update styles. It feels delightfully logical. Sass drastically cuts down on repetition … no more header, header inner, header inner p, header inner p strong.
You can use variables to set a color or font family once and re-use it throughout your CSS.
Mixins are groups of CSS declarations you can re-use, such as vendor prefixes for border radius.
With functions you can pass in arguments, like making a link color 15% darker upon hover.
Partials allow you to split your code into easily manageable files that are compiled into a single CSS file.

Now that I’ve been working with Sass for six months, anytime I go back and work on an older, plain-CSS client site, it feels ancient.

I also considered another CSS pre-processor called Less. It’s similar, but not as robust or widely used as Sass.

Bootstrap

With the CSS pre-processor decision made, I next had to choose an HTML, CSS and Javascript framework. I had known for a few years that I needed to switch to a framework but resisted the inevitable learning curve — I was just too busy with client work.

In my research I considered frameworks such as Foundation and HTML5 Boilerplate. But for me Bootstrap — which used to be known as Twitter Bootstrap — was the clear winner for its versatility, widespread usage, and huge developer community.

It has a mobile-first philosophy, which really we should all share.
Its ubiquity makes it easier to port from a non-WordPress site into WordPress. I recently launched a site for Avalara Trustfile, a service for businesses to manage sales tax. They had an existing Bootstrap site using node.js, and when I bid for the project I was confident that the conversion would be smooth because of Bootstrap.
Since it’s widely used, if you run into a problem you can be pretty sure that someone out there has already posted a solution.

Bootstrap is based on a 12-column grid.

It has easy-to-use media queries for responsive design. I’ve always enjoyed responsive design but Bootstrap takes it to a new level.
You don’t have to reinvent the wheel for every new component. There are built-in components for dropdown, buttons, forms, navbars … you name it.

Bootstrap’s Sass port

The standard version of Bootstrap uses Less as its CSS pre-processor. But, there’s an official Sass port that I use.

The contents differ greatly from the main Bootstrap project to maintain compatibility with Sass-based systems such as Compass.
A Sass variables file allows you to adjust hundreds of styles from a single document.

_s (underscores)

With the framework in place, I next needed to figure out how to combine it with WordPress. Underscores is an ultra-minimal, rock-solid starter theme.

It’s based on best practices and is written by Automattic, the company behind WordPress.com, so you can be confident it’s a safe choice.
It features lean, well-commented, HTML5 templates.
It’s got template tags, an optional custom header, and a toggled dropdown on small screens.

_tk

So now — how to integrate it with Bootstrap? I found a starter theme by Sven Lehnert called _tk that combines underscores with Bootstrap Less.

_jbs

But since I’d chosen Sass as my CSS preprocessor, I created my own starter theme called _jbs, which combines underscores, _tk, and the official Sass port of Bootstrap. I use _jbs as the starting point for all my sites, and it has cut my development and deployment time drastically. It’s also my first github contribution.

Now we’ll take a look at 8 tools to make your new workflow a reality.

TSheets

TSheets is a time tracking service.

You can use it for just yourself or for multiple employees.
You can create unlimited job codes and project subcodes.
After I complete each website, I compare my actual time spent to the original proposals to see if I was overly optimistic — and adjust for the next proposal. I urge you to use time-tracking service obsessively, even if you’re just clocking in for a five-minute period to review a client email. It all adds up at the end of the month and you don’t want to sell yourself short. Respect your time.

The server trilogy

Before we move on to the next tool, let’s look at the server trilogy.

The development server was the real eye-opener for me. You build on your local computer and it’s blazingly fast. When I first set up my development server it was like being transported to another realm in time and space where the concept of latency does not exist. It’s well worth the effort to set up.

The staging server is for client review. In the past I used staging servers as my development server. Make an edit, upload the file, hit refresh. Make an edit, upload the file, hit refresh. The problem is not only that this is slow, but then the client could see something in mid-stream and assume it was my final product, causing them unnecessary anxiety. So, only push from development to staging when you’ve completed a concrete subset of tasks.

If possible, use a server on your own web host. This helps ensure the client will pay you before the site goes live. For some context, generally I require a 50% deposit to get started on a project, and after the client approves the beta site, I only make the site live on their production server after receiving final payment. This will make you a happier developer, without the bitterness that can fester when you launch a site, send your final invoice, see that the client’s making money off the site, but somehow forgets to pay you until after months of pestering. This way you spend your time developing, not bill collecting.

Finally, the production server. You’ve done your local development, the client has approved staging, and you can push to production with confidence. No more cowboy coding!

On to some tools.

DesktopServer

DesktopServer is WordPress-specific.

It greatly eases the pain of setting up a local webserver and MySQL database.
You can create reuseable blueprints of plugins, themes and settings to speed the creation of new sites.
You can work locally without an Internet connection.
It’s an annual fee of $99.95.

VirtualBox

With VirtualBox, you can test on multiple versions of Internet Explorer using Virtual Machines that are free from Microsoft. I use it for testing IE8-11 on my Mac.

Dropbox

Dropbox gives me peace of mind and portability.

It’s the location for all my devleopment files, such as PSD’s, as well as the final site assets.
It keeps a revision history for all files.
I send automated backups from live sites there.
It’s $9.99 a month for Dropbox Pro.

GitHub

GitHub is version control software.

You can experiment freely with your code, without worrying that you’ve gone down a rabbit hole and can’t find your way back to the light when you create a bug.
You can share your code with others on your team, or with a client if they’re really tech-savvy.
I recommend the $7/month account, which allows you to create private repositories — important when working with clients who might not want their site’s source code freely available.

CodeKit

CodeKit has quickly become an indispensible part of my workflow.

With it you can quickly generate CSS files from Sass or Less source code. For Sass this means you don’t have to bother with the command-line or installing programs like Compass.
It checks for CSS and JavaScript errors when compiling.
There’s a $32 one-time fee.

What I adore most about it is the automagical browser refresh. When you save any CSS or PHP document, it automatically refreshes the browser. But it gets even awesomer. It’ll refresh any device connected to your Wi-Fi network. When I was working on the new zulily WordPress blog, I had a moment where I felt like Neo in The Matrix. Desktop in front of me, iPhone on one side, iPad on the other. I made a change on the desktop … and the other devices refreshed themselves.

Coda

A major change for me was switching from Dreamweaver to Coda.

Now, I’ve never been a text-editor snob. Someone who codes in Dreamweaver is just as much a developer as someone who codes in Notepad. But I discovered that Dreamweaver can’t apply color coding to Sass … and Coda can.

You can sync site credentials and code snippets across devices.
The WordPress autocomplete plugin is especially handy.
It’s a $99 one-time fee — much cheaper than Dreamweaver and packed with features.

WP Migrate DB Pro

WP Migrate DB Pro is a premium WordPress plugin that has saved me countless hours of work and ended the heartbreak that is the WordPress Importer.

Perhaps you’ve had this experience: It’s late at night. You’ve made the final beautiful touches on the staging server. It’s time to go live. You go to the WordPress importer and export the site to an XML file. Go to the production server, upload that XML file into the Importer, and wait. And wait.

And then … the dreaded 500 Internal Server Error. A partially imported site, and icicle stabs in your heart.

Forget all that with this plugin.

It’s fast and reliable.
It’ll update URLs throughout the entire database.
You can sync media library with the Media Files add-on. I use it back and forth among development, staging and production.
The annual fee for the developer package is $199.

BackupBuddy

BackupBuddy is another premium WordPress plugin that has given me a lot of peace of mind during the last year that I’ve been using it.

Of the many sites I’ve built over the years, only one has been hacked. But it was one of my favorite clients. Two years ago I saw a white screen of death and found that almost every WordPress file had been deleted. I had an older version on my computer but lots of media files and updates were lost. If I’d been using BackupBuddy I could have restored the site in minutes.

It creates automated backups of the database, WordPress core, plugins, and media library.
You can restore an entire site or just specific files.
It can send copies of the backups offsite to Dropbox and other cloud services for extra protection.
There’s a $150 annual fee for development shops to back up unlimited sites.

Workflow for creating a staging site

Finally, let’s take a look at a sample 13-step workflow for creating a staging site using these tools.

First, clock in to TSheets.
Add folders for the new site’s assets and development files in DropBox.
Create the development WordPress site in DesktopServer from a blueprint.
Set up automatic daily backups of the database and weekly backups of the entire installation in BackupBuddy.
Create a private repository for the theme in Github.
Add a new Sass project in CodeKit.
Add a new site in Coda.
Modify the _jbs theme as needed.
Test locally in browsers and VirtualBox Internet Exporers.
Commit your changes to GitHub.
Create the staging site on your own web host.
Sync the database and media files with WP Migrate DB Pro.
Most importantly, clock out and watch cat videos.