Automating WordPress Theme Development

Slide 1

Slide 1 text

Automating Theme Development Zoe Rooney @zoe_rooney

Slide 2

Slide 2 text

WHEN AND WHY?

Slide 3

Slide 3 text

WHEN AND WHY? HOW?

Slide 4

Slide 4 text

WHEN AND WHY? HOW? PROJECT SETUP ACTIVE WORK DEPLOYING

Slide 5

Slide 5 text

MIKE MCDONALD / EMBER STUDIO

Slide 6

Slide 6 text

LANGFORDW

Slide 7

Slide 7 text

1. Work smarter LANGFORDW

Slide 8

Slide 8 text

1. Work smarter 2. Get more done LANGFORDW

Slide 9

Slide 9 text

1. Work smarter 2. Get more done 3. Proﬁt LANGFORDW

Slide 10

Slide 10 text

BUT, BUT... ! HERD BEHAVIOR

Slide 11

Slide 11 text

- B. F. Skinner “The real problem is not whether machines think but whether men do.”

Slide 12

Slide 12 text

1. Make note of your process ! 2. Identify and replace points of pain or annoyance

Slide 13

Slide 13 text

BUT, BUT... ! TOO MUCH TO LEARN

Slide 14

Slide 14 text

- SirArthur C. Clarke “Any sufﬁciently advanced technology is indistinguishable from magic.”

Slide 15

Slide 15 text

BUT, BUT... ! I AM AN ISLAND RONALD SAUNDERS

Slide 16

Slide 16 text

- John Donne “No man is an island”

Slide 17

Slide 17 text

PROJECT SETUP ACTIVE WORK DEPLOYING

Slide 18

Slide 18 text

ACTIVE WORK 1. Find and replace; loooooong CSS ﬁles

Slide 19

Slide 19 text

2. CanIUse-ing browser preﬁxes 1. Find and replace; loooooong CSS ﬁles ACTIVE WORK

Slide 20

Slide 20 text

3. Optimize images; lint, organize, minify JS 2. CanIUse-ing browser preﬁxes 1. Find and replace; loooooong CSS ﬁles ACTIVE WORK

Slide 21

Slide 21 text

3. Optimize images; lint, organize, minify JS 2. CanIUse-ing browser preﬁxes 1. Find and replace; loooooong CSS ﬁles ACTIVE WORK

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

PARTIALS

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

#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

Slide 26

Slide 26 text

#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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Slide 30

Slide 30 text

$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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

PACKAGE.JSON GULPFILE.JS

Slide 37

Slide 37 text

{ "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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

$ gulp styles

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

$ gulp watch

Slide 42

Slide 42 text

PROJECT SETUP ACTIVE WORK DEPLOYING

Slide 43

Slide 43 text

1. Get the starter theme (_s, Bones, Emi) PROJECT SETUP

Slide 44

Slide 44 text

2. Replace text throughout 1. Get the starter theme (_s, Bones, Emi) PROJECT SETUP

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

YEOMAN.IO

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

$ yo generator-emi

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

PROJECT SETUP ACTIVE WORK DEPLOYING

Slide 54

Slide 54 text

DEPLOYING 1. Push changes to git repo

Slide 55

Slide 55 text

2. Upload ﬁles to dev site 1. Push changes to git repo DEPLOYING

Slide 56

Slide 56 text

3. Upload ﬁles to production site 2. Upload ﬁles to dev site 1. Push changes to git repo DEPLOYING

Slide 57

Slide 57 text

3. Upload ﬁles to production site 2. Upload ﬁles to dev site 1. Push changes to git repo DEPLOYING

Slide 58

Slide 58 text

$ git init $ git add -A $ git commit -m "initial commit"

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

DEPLOYHQ.COM

Slide 62

Slide 62 text

DEPLOYHQ.COM

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

$ git commit -m "let's do this thing" $ git push

Slide 66

Slide 66 text

DEPLOYHQ.COM

Slide 67

Slide 67 text

LEVEL UP

Slide 68

Slide 68 text

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