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.

Transcript

1. Automating Theme Development Zoe Rooney @zoe_rooney
2. WHEN AND WHY?
3. WHEN AND WHY? HOW?
4. WHEN AND WHY? HOW? PROJECT SETUP ACTIVE WORK DEPLOYING
5. MIKE MCDONALD / EMBER STUDIO
6. LANGFORDW
7. 1. Work smarter LANGFORDW
8. 1. Work smarter 2. Get more done LANGFORDW
9. 1. Work smarter 2. Get more done 3. Profit LANGFORDW
10. BUT, BUT... ! HERD BEHAVIOR
11. - B. F. Skinner “The real problem is not whether machines think but whether men do.”
12. 1. Make note of your process ! 2. Identify and replace points of pain or annoyance
13. BUT, BUT... ! TOO MUCH TO LEARN
14. - SirArthur C. Clarke “Any sufficiently advanced technology is indistinguishable from magic.”
15. BUT, BUT... ! I AM AN ISLAND RONALD SAUNDERS
16. - John Donne “No man is an island”
17. PROJECT SETUP ACTIVE WORK DEPLOYING
18. ACTIVE WORK 1. Find and replace; loooooong CSS files
19. 2. CanIUse-ing browser prefixes 1. Find and replace; loooooong CSS files ACTIVE WORK
20. 3. Optimize images; lint, organize, minify JS 2. CanIUse-ing browser prefixes 1. Find and replace; loooooong CSS files ACTIVE WORK
21. 3. Optimize images; lint, organize, minify JS 2. CanIUse-ing browser prefixes 1. Find and replace; loooooong CSS files ACTIVE WORK
23. PARTIALS
25. #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
26. #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
27. #primary { float: left; width: 600px; &.right { float: right; } &.full-width { float: none; width: 100%; h1 { text-align: center; } } } awesome.scss
28. 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
29. 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
30. $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
31. 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
36. PACKAGE.JSON GULPFILE.JS
37. { "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
38. 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
39. $ gulp styles
40. 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
41. $ gulp watch
42. PROJECT SETUP ACTIVE WORK DEPLOYING
43. 1. Get the starter theme (_s, Bones, Emi) PROJECT SETUP
44. 2. Replace text throughout 1. Get the starter theme (_s, Bones, Emi) PROJECT SETUP
45. 3. Install tools via NPM 2. Replace text throughout 1. Get the starter theme (_s, Bones, Emi) PROJECT SETUP
46. 3. Install tools via NPM 2. Replace text throughout 1. Get the starter theme (_s, Bones, Emi) PROJECT SETUP
47. YEOMAN.IO
49. $ yo generator-emi
53. PROJECT SETUP ACTIVE WORK DEPLOYING
54. DEPLOYING 1. Push changes to git repo
55. 2. Upload files to dev site 1. Push changes to git repo DEPLOYING
56. 3. Upload files to production site 2. Upload files to dev site 1. Push changes to git repo DEPLOYING
57. 3. Upload files to production site 2. Upload files to dev site 1. Push changes to git repo DEPLOYING
58. $ git init $ git add -A $ git commit -m "initial commit"
61. DEPLOYHQ.COM
62. DEPLOYHQ.COM
65. $ git commit -m "let's do this thing" $ git push
66. DEPLOYHQ.COM
67. LEVEL UP
68. 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
69. GRAB A PROJECT AND PLAY AROUND
70. GRAB A PROJECT AND PLAY AROUND http://bit.ly/emi-theme
71. Automating is about replacing grunt work with magic.