WordFlow (WordPress WorkFlow)

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 %>

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

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

we need conventions. documentation is boring.

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 <!DOCTYPE html> <html lang="en"> <head> <title>Pug </title> <script type="text/
javascript"> if (foo) bar(1 + 5) </script> </head> <body> <h1>Hello Wordcamp! </h1> <div id="container" class=“col"> <h2><%php echo(get_the_title()) %> <p>You are amazing </p> </div> </body> </html> 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

/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

/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

WordFlow (WordPress WorkFlow)

WordFlow (WordPress WorkFlow)

More Decks by Filippo Gangi Dino

Other Decks in Technology

Featured

Transcript