Bracesless WordPress

A Presentation by AJ Zane (@azanebrain)
for WordCamp Orange County 2015

Are you lazy?

What I'll be covering

(how to be lazy)

1: The benefits of preprocessors

2: Getting setup (quick overview)

3: Why it makes sense with WP


Benefits of Preprocessors


trimmed down code
that will be compiled to
PHP, CSS, JS, etc

Vanilla PHP:

<?php $title = 'Bracesless WordPress'; >

<?php echo $title; ?>

My fingers hurt...


- title = 'Bracesless WordPress';
	= title
	p This is much better
		| include _smiley-face.jade

Getting Setup

Task Runner (brought to you by Node)

Easy to setup

Easy to share


Installing Node

brew install node

Using NPM:

npm install node-sass

Task Runners

Grunt Grunt Grunt Grunt

I choose...

IDE that's right for you

Syntax Highlighting

Choose a Task Runner based on its mascot

You will switch

File organization

┬ dist/
| ├ app.js
| ├ index.php
| └ style.css
├ lib/
├ src/
| ├
| ├ index.jade
| ├ style.sass
├ .git
├ .gitignore
├ package.json

Browser Tools

Source maps == awesome

Starter boilerplates

What can you do with
Bracelss WordPress

But I'm a super not-lazy person


The team has to learn a new language

Precompiled syntaxes are simpler than vanilla code

The learning curve is a matter of forgetting, not learning

Setup takes too long

"I want to get a new comp and be ready in 10min"

NPM lets you do this

npm install bubba-gump-shrimp

Don't sacrifice hours of dev time to get a new computer running in 10 minutes

With great power...

comes awesome super hero powers

Adds a layer of complexibility

These tools were not developed for WP theme/plugin development, so watch out


Go Ahead,

Ask me anything


my name is AJ Zane

I can be found @azanebrain on all things

Front End Authority | Zan Atlantean | 2pointb