Modern WordPress Developer's Toolkit

A Modern WordPress Developer's Toolkit

By Adam Wills | @heavymetaladam

About Me

Live and work in Hamilton
Making websites for 15+ years
WordPress for 6+ years
Still getting overwhelmed by tools

Roadmap

Explore problems
Explore tools
How do they apply to WordPress?
Relax

Let's talk about CSS

CSS Frustrations

Enter CSS Preprocessors!

Advantages of CSS Preprocessors

Variables!


								
$brand-primary:  PapayaWhip;

.button {
    background-color: $brand-primary;
}

compiles to...



.button {
    background-color: PapayaWhip;
}

Functions!


						
$brand-primary:  PapayaWhip;

.button:hover {
    background-color: darken($brand-primary,10%);
}

compiles to...


                            
.button:hover {
  background-color: #ffdca2;
}

Nesting!



.sidebar {
    h2 {
        font-size: 0.9em;
    }

    li {
        list-style: none;
    }
}

compiles to...



.sidebar h2 {
    font-size: 0.9em;
}

.sidebar li {
    list-style: none;
}

Imports!



// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

compiles to...



// style.scss
@import "reset";
@import "typography";
@import "header";
@import "footer";

How can I use with WordPress?

Anywhere you write CSS.

Repetitive Tasks

Compiling SASS files
Concatenating JS files
Reloading browser

Task runners!

Anatomy of a Gulp file


                            
// gulpfile.js

var gulp   = require('gulp'),
    sass   = require('gulp-sass');

gulp.task('build-css', function() {
  return gulp.src('assets/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('/assets/css'));
});

gulp.task('watch', function() {
  gulp.watch('assets/scss/**/*.scss', ['build-css']);
});

Other useful tasks

Optimize images (imagemin)
Add vendor prefixes to css (autoprefixer)
Code error checking (jshint)
Minify CSS (minify)
Uglify JS (uglify)
Auto reload browser (Browsersync)

Command line not your thing?

Codekit & Prepros

Compiles SASS, LESS, CoffeeScript
Auto refreshes browsers
Autoprefixer
Optimizes images

How can I use with WordPress?

Theme Development
Plugin Development

Source code issues

Overwrite each other's changes
Roll back changes?
Code review?
Code not backed up
Deploy... what changes?

Git!

Git

Git helps!

Work in "branches"
Easily see changes made along project's history
Can easily roll back changes to project/files

Git Repo Hosting Services

Github BitBucket

Git Repo Hosting Services

Issue Tracking
Code review
Code backup!

Not into command line?

Don't worry - you're covered.

Working in a team? Establish a Workflow

Git Flow (nvie.com)

How can I use with WordPress?

Theme Development
Plugin Development
Entire WordPress Site

Other people's code

WordPress Plugins
WordPress Core
Front-end libraries (Bootstrap, Foundation)
Development tools (Grunt, Gulp)

Problems with other people's code

Bloat your git repository
Pain to get specific versions
Hassle to update

Package Managers!

Composer (PHP)
Bower (Front End)
Npm (Node)

Composer (PHP)

Anatomy of a composer.json file


{
    "name": "Adam's Awesome WordPress Site",
    "require": {
        "wpackagist-plugin/akismet": "3.1.*",
        "wpackagist-plugin/wordpress-seo": "2.1.*",
        "johnpbloch/wordpress": "4.2.2"
    },
    "extra": {
        "installer-paths": {
          "web/app/plugins/{$name}/": ["type:wordpress-plugin"],
        },
        "wordpress-install-dir": "wp"
      }
}