Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automating WordPress Theme Development

Automating WordPress Theme Development

Why, when, and how to automate your WordPress theme development workflow using tools such as Sass, Gulp and Yeoman. Presented at WordCamp Philly 2014.

Zoe Rooney

June 07, 2014
Tweet

More Decks by Zoe Rooney

Other Decks in Programming

Transcript

  1. - B. F. Skinner “The real problem is not whether

    machines think but whether men do.”
  2. 1. Make note of your process ! 2. Identify and

    replace points of pain or annoyance
  3. 3. Optimize images; lint, organize, minify JS 2. CanIUse-ing browser

    prefixes 1. Find and replace; loooooong CSS files ACTIVE WORK
  4. 3. Optimize images; lint, organize, minify JS 2. CanIUse-ing browser

    prefixes 1. Find and replace; loooooong CSS files ACTIVE WORK
  5. #primary { float: left; width: 600px; } #primary.right { float:

    right; } #primary.full-width { width: 100%; float: none; } #primary.full-width h1 { text-align: center; } vanilla.css NESTING
  6. #primary { float: left; width: 600px; } #primary.right { float:

    right; } #primary.full-width { width: 100%; float: none; } #primary.full-width h1 { text-align: center; } vanilla.css
  7. #primary { float: left; width: 600px; &.right { float: right;

    } &.full-width { float: none; width: 100%; h1 { text-align: center; } } } awesome.scss
  8. body { background: #fff; margin: 0; padding: 0; min-width: 1130px;

    color: #333; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.625; } #page { width: 1100px; padding: 0 15px; } vanilla.css VARIABLES
  9. body { background: #fff; margin: 0; padding: 0; min-width: 1130px;

    color: #333; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.625; } #page { width: 1100px; padding: 0 15px; } vanilla.css
  10. $bg: #fff; ! // Dimensions $width: 1100px; $side-padding: 15px; $outer-width:

    $width + $side-padding + $side-padding; ! // Typography $main: 'Open Sans', sans-serif; $text: #333; $fontsize: 14px; $line-height: 21px; base.scss
  11. body { background: $bg; margin: 0; padding: 0; min-width: $outer-width;

    color: $text; font-family: $main; font-size: $font-size; line-height: $line-height / $fontsize; } #page { width: $width; padding: 0 $side-padding; } awesome.scss
  12. { "dependencies": { "gulp": "*", "gulp-ruby-sass": "*", "gulp-autoprefixer": "*", "gulp-minify-css":

    "*", "gulp-newer": "*", "gulp-imagemin": "*", "gulp-git": "~0.4.0", "tiny-lr": "*", "gulp-livereload": "*", "gulp-plumber": "*" } } package.json
  13. gulp.task('styles', function(){ return gulp.src('scss/style.scss', { base: 'scss' }) .pipe(plumber()) .pipe(sass({

    style: 'expanded' })) .pipe(gulp.dest('')) .pipe(autoprefixer()) .pipe(minifycss()) .pipe(gulp.dest('')) .pipe(livereload(server)); }); gulpfile.js
  14. gulp.task('watch', function() { // Listen on port 35729 server.listen(35729, function

    (err) { if (err) { return console.log(err) }; // Watch .scss files gulp.watch('scss/*.scss', ['styles']); gulp.watch('scss/**/*.scss', ['styles']); ! }); ! }); gulpfile.js
  15. 3. Install tools via NPM 2. Replace text throughout 1.

    Get the starter theme (_s, Bones, Emi) PROJECT SETUP
  16. 3. Install tools via NPM 2. Replace text throughout 1.

    Get the starter theme (_s, Bones, Emi) PROJECT SETUP
  17. 3. Upload files to production site 2. Upload files to

    dev site 1. Push changes to git repo DEPLOYING
  18. 3. Upload files to production site 2. Upload files to

    dev site 1. Push changes to git repo DEPLOYING
  19. INSTALL ALL THE THINGS ‣ Node.js via nodejs.org ‣ Ruby

    (PC only, comes with Macs) ‣ Sass via sass-lang.com directions ‣ Git via instructions on git-scm.com ‣ Gulp via NPM npm install -g gulp ‣ Yeoman via NPM npm install -g yo