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.

@mcr_fred

http://s10wen.com/mcrfred

A bit about me

I'm not 12.

Yes, I know I look young.

Yes, I do have my ID.

Where am I now?

Working at Carbon Creative.

Building sites to help a variety of businesses.

We love WordPress.

Disclaimer!

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

Dotfiles - Tutsplus tutorial
Version Control
Tooling
Working Locally

Git / GitHub / BitBucket

versioncontrol

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?

Risk

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 127.0.0.1.

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](http://173.254.28.140/~simonow1/speaking/wcmcr2014/nodollar.png) 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 127.0.0.1 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:

https://wordpress.org/download/

Right?

Nope

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*

wordpress-install.sh

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

.gitconfig

c = clone --recursive

.aliases

alias g="git"

Means:

$ 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 !!!

README.md

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

https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/README.md

Dependencies

node npm bower gulp

One time installs

Node

http://nodejs.org/

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('./http://173.254.28.140/~simonow1/speaking/wcmcr2014/**/*', 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

http://sitename.dev/wp-admin/install.php

Activate your theme

Appearance > Themes

Let's Install something

Say we want bootstrap?, so we go to:

http://getbootstrap.com/

Right?

Nope

Back to the terminal!

$ bower search bootstrap

Install

$ 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.

Yayayaya

### 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

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

http://sass-lang.com/guide

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](http://173.254.28.140/~simonow1/speaking/wcmcr2014/trailing-whitespace.png)

### Sublime Superpowers Packages https://sublime.wbond.net/installation `Cmd+Shift+P` > ip > Package Control: Install Package Some of my favourite http://sow.so/st