WordCamp Manchester 2014

Optimising your Front-End Workflow for WordPress

With Simon Owen / @s10wen

A bit about me

I'm Simon Owen, a Front-End Developer.


I run a monthly meetup in Manchester, McrFRED.



A bit about me

I'm not 12.

Yes, I know I look young.

Yes, I do have my ID.

s10wen work

Where am I now?

Working at Carbon Creative.


Building sites to help a variety of businesses.

We love WordPress.


This is only one approach, there's many others.

Optimising your Front-End Workflow

  • Make improvements with each project.
  • Experiment with your workflow.
  • Find what works best for you.
  • Automate tasks.
  • Save time with shortcuts.
  • Version control with Git / GitHub / BitBucket.
  • A little bash can go a long way.

The web is moving fast.

There's a bazillion things to learn.

We can't learn everything.

Don't Panic.

We have help.

Things I find helpful


Git / GitHub / BitBucket


View Commits

git history

Check Over Code

git history

Create a boilerplate theme

"Boilerplate code is any seemingly repetitive code that shows up again and again in order to get some result that seems like it ought to be much simpler."

Source: What is boilerplate code?


Implementing too much can be risky.

Make improvements in small chunks.

Always be able to carry out your work.

Use version control to avoid risk.

Local Database

Here I'm using Sequel Pro.

Connect locally to

Create a new database.

Local Development Environment

work local

Let's step into Terminal

### $ in Terminal $ is the default character you'll see, in the examples going forward you don't need to paste this in. It's also possible to customise the $, for example. .bash_prompt ```bash PS1="\[\e]2;$PWD\[\a\]\[\e]1;\] $(basename "$(dirname "$PWD")")/\W\[\a\]${BOLD}\ $(usernamehost)\[$GREEN\]\w\$(git_info)\[$WHITE\] \n\n༼ つ ◕_◕ ༽つ⚡ \[$RESET\]" ``` ![nodollar]( https://github.com/s10wen/dotfiles/blob/master/.bash_prompt#L57
### Create a new site folder ``` $ mkd sitename.dev ``` Custom .functions code ```bash # Create a new directory and enter it function mkd() { mkdir -p "$@" && cd "$@" } ```

I just created a new directory


I'm in it!

### Sublime Text - Config Project ``` httpd.conf, httpd-vhosts.conf, hosts ``` Project > Save Project As... Quick Switch project = `Ctrl+Cmd+P` http://sow.so/paths
### hosts ``` # S sitename.dev ```
### httpd-vhosts.conf ``` # S # sitename.com <VirtualHost *:80> ServerName sitename.dev ServerAlias *.sitename.dev DocumentRoot "/Users/simonowen/Sites/sitename.dev/" <Directory "/Users/simonowen/Sites/sitename.dev/"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order Allow,Deny Allow From All </Directory> ErrorLog "/var/log/apache2/mysite.local-error_log" </VirtualHost> ```

Install WordPress

Let's go to:




Back to the terminal!

Download WordPress as a zip file:

$ wget http://wordpress.org/latest.tar.gz

Unzip WordPress:

$ tar xfz latest.tar.gz

Move the contents of WordPress back a folder:

$ mv wordpress/* ./

Remove the wordpress directory:

$ rmdir wordpress

Remove the zip file:

$ rm -f latest.tar.gz

Go to themes folder:

$ cd wp-content/themes/

Remove twentyfourteen, twentythirteen, twentytwelve themes:

$ rm -rf twenty*


Copy and paste the into a new file,
or from my GitHub gist.

$ bash wordpress-install.sh

Voilà! A clean WordPress install.

wordpress install

Install your boilerplate theme


c = clone --recursive


alias g="git"


$ g c git@bitbucket.org:yourname/yourtheme.git

More time savers

# List all files colorized in long format alias l="ls -l ${colorflag}"

# Open current directory in Sublime Text alias s="subl ."

Cmd+T > Start typing out a filename > Enter

### Update wp-config-sample.php Open `wp-config-sample.php` add the database information and rename to `wp-config.php`. ``` define('DB_NAME', 'databasename'); /** MySQL database username */ define('DB_USER', 'root'); /** MySQL database password */ define('DB_PASSWORD', ''); ``` !!! Be sure to add a secure username and password when live !!!


In your boilerplate theme (and pretty much any repo) it's worth having a README.md

Hopefully everyone is familiar with Markdown, if not check it out here http://daringfireball.net/projects/markdown/basics

Markdown is a massive time saver. Here's an example of the H5BP's README.md



node npm bower gulp

One time installs



Bower and Gulp

$ npm install -g bower gulp

Ok, but why?

Unicorns and rainbows await. Bear with me.

npm = package.json

bower = bower.json

gulp = gulpfile.js

### npm = package.json ``` { "name": "wp-carbon-neutral", "version": "0.0.1", "description": "", "main": "index.php", "scripts": {}, "license": "MIT", "devDependencies": { "gulp": "~3.7", "gulp-autoprefixer": "~0.0.6", "gulp-livereload": "~1.2.0", "gulp-minify-css": "~0.3", "gulp-notify": "~1.2", "gulp-ruby-sass": "~0.4.1", "gulp-sass": "~0.7", "gulp-spawn": "~0.3.0", "gulp-util": "^2.2.14", "tiny-lr": "~0.0.5", "gulp-if": "~1.2.0", "yargs": "~1.2.2" }, "dependencies": {} } ```
### bower = bower.json ``` { "name": "wp-carbon-neutral", "version": "0.0.1", "authors": [ "Carbon Creative " ], "license": "MIT", "private": true, "dependencies": { "jquery": "~1", "modularized-normalize-scss": "~3.0", "modernizr": "~2.7.2" } } ```
### gulp = gulpfile.js ``` var gulp = require('gulp'); var args = require('yargs').argv; var gulpif = require('gulp-if'); var sass = require('gulp-ruby-sass'); var nodesass = require('gulp-sass'); var prefix = require('gulp-autoprefixer'); var minifycss = require('gulp-minify-css'); var livereload = require('gulp-livereload'); var fs = require('fs'); var notify = require('gulp-notify'); var lr = require('tiny-lr'); var server = lr(); var fastSass = args.fast === true; function handleError(err) { console.log(err.toString()); this.emit('end'); } gulp.task('styles', function () { gulp.src('./sass/*.scss') .pipe(gulpif(!fastSass, sass({ sourcemap: true, precision: 10 }).on('error', handleError))) .pipe(gulpif(fastSass, nodesass({ errLogToConsole: true }))) .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7")) .pipe(minifycss()) .pipe(gulp.dest('./css')) .pipe(livereload(server)) .pipe(notify({ message: 'SASS/Sourcemap compiled'})); }); gulp.task('node-htaccess', function () { fs.writeFile(__dirname + '/node_modules/.htaccess', "Deny from all"); }); gulp.task('watch', ['styles'], function() { server.listen(35729, function (err) { if (err) { throw err; } }); gulp.watch('./sass/**/*.scss', function(file){ gulp.run('styles'); }); gulp.watch('./js/**/*.js', function(file){ gulp.src(file.path) .pipe(livereload(server)); }); gulp.watch('./**/*', function(file){ gulp.src(file.path) .pipe(livereload(server)); }); gulp.watch('./**/*.php', function(file){ gulp.src(file.path) .pipe(livereload(server)); }); }); ```
### Now for the good bit ``` $ npm install && bower install && gulp watch ```

Ok, so what did that do?

A whole bunch of awesome, that's what.

First let's install WordPress.

Install WordPress


Activate your theme

Appearance > Themes

Let's Install something

Say we want bootstrap?, so we go to:




Back to the terminal!


$ bower search bootstrap


$ bower install bootstrap-sass-twbs --save

What did that do then?

Not only has that now pulled in bootstrap to our theme.

It's also saved it into the `bower.json` file.

bower install

Use wp_enqueue_script to pull in.

So next time when we do `$ bower install` it automatically installs.


### 2 other important files .editorconfig Ensure consistency throughout your team. ``` root = true [*] indent_style = space indent_size = 4 end_of_line = LF trim_trailing_whitespace = true [{package.json,bower.json}] indent_style = space indent_size = 2 ```
### 2 other important files .gitignore Don't add files to your theme repo you don't need to. ``` ### Package Managed ### /node_modules /bower_components ### CSS ### .sass-cache /css/screen.css /css/screen.css.map ```

Styling with Sass


With gulp watch, gulp will watch for changes in the /sass folder.

With Sass it's possible to split code up into separate files called partials.

Live Reload Styling

Sass - CSS with superpowers


  • Variables
  • Nesting
  • Mixins

Workflow Superpowers

  • Sublime Text
  • OS X Apps
  • Git Goodness
### Sublime Superpowers Preferences > Settings - User ``` { "color_scheme": "Packages/Color Scheme - Default/Monokai-Phoenix.tmTheme", "default_encoding": "UTF-8", "detect_indentation": false, "draw_white_space": "all", "file_exclude_patterns": [ ".DS_Store", "Desktop.ini", "*.pyc", "._*", "Thumbs.db", ".Spotlight-V100", ".Trashes", "*.scssc" ], "folder_exclude_patterns": [ ".git", "node_modules" ], "font_size": 12, "highlight_modified_tabs": true, "ignored_packages": [ "Vintage" ], "match_brackets": true, "match_brackets_angle": true, "show_encoding": true, "show_line_endings": true, "ensure_newline_at_eof_on_save": true, "tab_completion": false, "tab_size": 4, "theme": "Phoenix Dark.sublime-theme", "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "word_wrap": true } ```
### Sublime Superpowers Preferences > Key Bindings - User ``` [ { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }, { "keys": ["super+b"], "command": "toggle_side_bar" }, { "keys": ["super+l"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} } ] ``` ![trailing-whitespace](
### Sublime Superpowers Packages https://sublime.wbond.net/installation `Cmd+Shift+P` > ip > Package Control: Install Package Some of my favourite http://sow.so/st

Sublime Superpowers


Chrome Dev Tools

Responsive testing.

Chrome dev tools theme

Thanks to Paul Irish for the tweet!

Power Tools


Quickly get to the app you're after.

Power Tools


Quickly view apps side by side.

@eczarny is ace and helped me out with my dotfiles.


Device Testing

GhostLab + DeviceLab



Browser Testing

Virtual Box

Modern.ie - The place to go to get old IE browsers.

Automated installation of IE VMs.


Update VB hosts file to point VB to local.





Images are huuuuge.


The End


WordCamp Manchester 2014

Optimising your Front-End Workflow for WordPress

With Simon Owen / @s10wen

WordCamp Manchester 2014

By Simon Owen

WordCamp Manchester 2014

  • 5,232