WordFlow complete Workflow for WordPress developers @mukkoo

@MUKKOO

@mukkoo dev.welaika.com

Disclaimer no kittens no live coding too much to say @mukkoo

<% Story time %>

No content

WordPress is fun! So many plugins! Huge community! Lots of freedom!

No content

Every team has different tools. Every customer has different needs. Every project is unique.

No content

we need conventions. documentation is boring.

No content

Webpack! Node! Yarn! Pug!
 Sass! CoffeeScript! DeployDeployDeploy!

Agenda fast bootstrap rich development environment deploy often and everywhere @mukkoo

fast bootstrap @mukkoo

Install core* ↳ $ wp core download
 ↳ $ wp core install *with wp-cli @mukkoo

Install wordless* ↳ $ wp plugin install wordless ↳ $ wp plugin activate wordless ↳ $ wp wordless theme create new_theme *with wp-cli @mukkoo

bootstrap complete fast @mukkoo

RICH Development env @mukkoo

├── assets │ ├── fonts │ ├── images │ ├── javascripts │ └── stylesheets ├── config │ ├── initializers │ └── locales ├── node_modules ├── theme │ ├── assets │ ├── helpers │ └── views ├── tmp │ └── README.mdown ├── Procfile ├── index.php ├── package.json ├── screenshot.png ├── style.css ├── webpack.config.js └── yarn.lock theme structure initializers views index.php assets JS stack

Why wordless is good? built-in initialisers webpack: images optimization sass transpiling webpack: assets digest (cache) coffeescript transpiling pug interpreter livereload with browsersync @mukkoo

Easy to handle 50+ helpers - link_to(), image_tag() - placeholder_text(), placeholder_image() - latest_posts_of_type() - render_view(), render_partial() - and more… @mukkoo

Extend custom webpack configuration custom node packages import @mukkoo

HTML Pug if (foo) bar(1 + 5)

Hello Wordcamp!

PUG doctype html html(lang="en") head title Pug script(type='text/javascript') if (foo) bar(1 + 5) body h1 Hello Wordcamp! #container.col h2= get_the_title() p You are amazing @mukkoo

css body { font-size: 14px; margin-top: 20px; margin-bottom: 20px; } .table { padding: 20px; background-color: #ff0000; } .table __cell { padding: 10px; background-color: #ff0000; } .table __cell—inverse { background-color: #0000ff; } sass $base-font-size: 14px $gutter: 20px $base-color: #ff0000 
 body font-size: $base-font-size margin: top: $gutter bottom: $gutter .table padding: $gutter background-color: $base-color & __cell padding: $gutter / 2 background-color: $base-color &—inverse background-color: #0000ff

javascript (es6) var fill; fill = function(container = “cup”, liquid = “coffee”) { return `Filling the ${container} with ${liquid} ...`; }; var result = []; var ingredients = [“coffee”, “milk”, “syrup”, “ice”]; for (i = 0; i < ingredients.length; i ++) { result.push(fill(ingredients(i))); } coffeescript fill = (container = “cup”, liquid = “coffee”) -> `Filling the ${container} with ${liquid} ...` var ingredients = [“coffee”, “milk”, “syrup”, “ice”] result = (fill(elem) for elem in ingredients)

deploy often and everywhere @mukkoo

bad habits @mukkoo manual tasks no conventions late deploy, live coding

good habits @mukkoo automation shared practices deploy early, deploy often

wordmove @mukkoo ↳ $ gem install wordmove ↳ $ wordmove init *requires ruby *

movefile @mukkoo global: sql_adapter: wpcli local: vhost: http: //vhost.local wordpress_path: /home/john/sites/your_site database: name: database_name user: user password: password host: localhost production: vhost: http: //example.com wordpress_path: /var/ www/your_site database: name: database_name user: user password: password host: host exclude: - '.git/' ssh: host: host user: user

movefile @mukkoo global: sql_adapter: wpcli local: vhost: http: //vhost.local wordpress_path: /home/john/sites/your_site database: name: database_name user: user password: password host: localhost production: vhost: http: //example.com wordpress_path: /var/ www/your_site database: name: database_name user: user password: password host: host exclude: - '.git/' ssh: host: host user: user local: vhost: http: //vhost.local wordpress_path: /home/john/sites/your_site database: name: database_name user: user password: password host: localhost development environment

movefile @mukkoo global: sql_adapter: wpcli local: vhost: http: //vhost.local wordpress_path: /home/john/sites/your_site database: name: database_name user: user password: password host: localhost production: vhost: http: //example.com wordpress_path: /var/ www/your_site database: name: database_name user: user password: password host: host exclude: - '.git/' ssh: host: host user: user production environment production: vhost: http: //example.com wordpress_path: /var/ www/your_site database: name: database_name user: user password: password host: host exclude: - '.git/' ssh: host: host user: user

goodies @mukkoo multistage supports ssh works with ftp it use wp-cli and rsync

@mukkoo Something goes wrong with production database ↳ $ wordmove pull -d Local fix and push to staging ↳ $ wordmove push -e staging —t First deploy ↳ $ wordmove push —all Local plugins update and deploy to production ↳ $ wordmove push -e production —p

@mukkoo

@mukkoo .------------------------. | PSYCHIATRIC | | HELP 5¢ | |________________________| || .-""" --. || || / \ .-. || || | ._, \ || || \_/`-' '-.,_/ || || (_ (' _)') \ || || /| |\ || || | \ __ / | || || \_).,_____,/}/ || __ ||____;_ --'___'/ ( || |\ || ( __,\ \_/------ || ||\ ||______________________ || |||| | |||| THE DOCTOR | \||| IS [IN] _____| \ || (______) `|___________________ // ||\ //= ||=\ ` `` `

recap use wp-cli! use wordless! use wordmove! @mukkoo

recap automate your workflow work in a custom environment deploy early, deploy often @mukkoo

Bonus remember to contribute at open source software @mukkoo

Bonus #2 use wp-cli @mukkoo

@mukkoo

Q&A thank you all @mukkoo