WordCamp Barcelona – Front End Workflow Automation for WordPress Theme and Plugin Development

Slides from the updated talk given at WordCamp Barcelona on April 25, 2015.

I describe a workflow and tools I use to streamline my front-end development process when working on WordPress projects. It relies on using Yeoman generator called WPZest, Grunt, Bower and WP-CLI.

WPZest is built on top of Wesley Todd's YeoPress and adds WP-CLI-Deploy configuration and adds a plugin scaffolder based on Tom Macfarlin's WordPress Plugin Boilerplate.

The presentation outlines steps you'd follow to scaffold a WordPress install with with a theme and a plugin ready to process front-end assets (SASS, image minification, JS minification), JS Linting etc.

The plugin generator comes with and option to add a Grunt task for for processing you front-end assets.

Transcript

1. Front End Workflow Automation for Theme and Plugin Development a.k.a. How to Make the Computer do the Boring Stuff
2. Milos Soskic Founder & Designer @ Citrus Mist citrus-mist.com @citrusmist
3. This is a DevOps talk
4. WTH !#?###?!????!
5. Designer talking DevOps! or why should you believe anything I say...
6. Small outfit Wear many hats Still code a fair bit esp. in WP context 1 2 3 4 1 Created by Alex Berkowitz from the Noun Project 2 Created by Nicolas Molès from the Noun Project 3 Created by Evert Jan Boon from the Nount Project 4 Created by Norbert de Graaf from the Noun Project
7. 2014 12 total WP installs 8 new 6 on shared hosting
8. WP projects highly bespoke brochure / marketing sites for SME's. Have an opinion on design Until something goes wrong not as concerned about build quality Even less on best practices Small changes end up taking time due to process – minify, concat, upload etc.
9. Even I sometimes feel my time is better spent doing something else I want to use best practices, but shouldn't lose hours in the process
10. Do Some Work › Optmise Imgs, JS & CSS › Deploy via Git › Export DB › Upload DB › Search & Replace CodeKit () Terminal phpMyAdmin Search Replace }
11. 4 Different pieces of software excluding text editor & graphics
12. FACEPALM! Cognitively expensive Error prone Boring & cumbersome
13. There must be another way! Others have managed to streamline it.
14. Design a workflow which uses a streamlined singular interface for project scaffolding, asset processing and deployment. Needs to work on shared hosting. GOAL
15. REQUIREMENTS WP scaffolding Theme scaffolding LiveReload Code linting Theme asset processing Plugin scaffolding Plugin asset processing Deployment Conditional asset loading
16. Asset processing —Sass, JS Minification and Image Minification LiveReload Code linting 1 STEP
17. Grunt & Bower
18. Grunt: task runner – automator gruntjs.com Bower: front-end pkg manager bower.io Lots of info on using Grunt for theme dev. Not as much for plugin dev—until recently. roots.io/sage github.com/mattbanks/ WordPress-Starter-Theme github.com/citrusmist/ YeoPress/tree/template Requires: node.js with npm
19. WordPress Parallax Theme Bower Bootstrap skrollr Grunt LiveReload Sass/Compass JSHint imageMin Uglify Gallery Plugin Bower FTScroller imagesLoaded Grunt Sass/Compass JSHint imageMin Uglify Plugin X Bower Hammer.js Grunt Sass/Compass JSHint imageMin Uglify
20. Theme JS Folder Structure vendor bower package store bespoke your plugins / modules main.js main / bootstrap file main.min.js above contents optimised }
21. In The Terminal: cd wp-content/themes/chosen_theme npm install grunt }Install Node pkgs Compile SASS LiveReload JSHint Uglify JS Could be made to support: LESS, Stylus, RequireJS, CSSLint, PHPLint
22. Watching for changes
23. When a file is updated
24. grunt build }Compile SASS JSHint Uglify JS ImageMin (JPG, GIF, PNG, SVG)
25. Conditional asset loading 2 STEP
26. functions.php and in plugin if(WP_ENV == 'local') { wp_register_script('livereload', 'http://highrise.dev:35729/livereload.js?snipver=1', null, false, true ); wp_register_script('myplugin', get_bloginfo('template_url') . '/js/bespoke/myplugin.js', null, array('jquery'), true ); wp_register_script( 'main', get_bloginfo('template_url') . '/js/main.js', null, array('jquery', 'myplugin'), true ); wp_enqueue_script('livereload'); } elseif (WP_ENV == 'staging' || WP_ENV == 'production') { wp_register_script('main', get_bloginfo('template_url') . '/js/main.min.js', null, array('jquery'), true ); } wp_enqueue_script('main'); original optimised { {
27. wp-config.php local staging prod. if (file_exists(dirname(__FILE__) . '/wp-config-local.php')) { // Local Environment define('WP_ENV', 'local'); define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); include(dirname(__FILE__) . '/wp-config-local.php'); } elseif (file_exists(dirname(__FILE__) . '/wp-config-staging.php')) { // Staging Environment define('WP_ENV', 'staging'); include(dirname(__FILE__) . '/wp-config-staging.php'); } elseif (file_exists(dirname(__FILE__) . '/wp-config-production.php' )) { // Production Environment define('WP_ENV', 'production'); include(dirname(__FILE__) . '/wp-config-production.php'); } { { {
28. wp-config-{env}.php define('DB_NAME', 'db_user'); define('DB_USER', 'db_pass'); define('DB_PASSWORD', 'yourSafePass'); define('DB_HOST', 'localhost'); $table_prefix = 'wp_';
29. That is soooooooo much config BOOO!
30. WordPress Scaffolding Theme Scaffolding Plugin Scaffolding 3 STEP
31. Yeoman
32. Yeoman: base generator used for project scaffolding i.e. smart templates yeoman.io Requires: node.js with npm
33. WPZest Had to create one to meet requirements 80% based on YeoPress —Yeoman lets you easily combine gens Environment constants in wp-config Plugin scaffolding based on WP Plugin Boilerplate Deployment option via WP-CLI-Deploy https://github.com/artificer/generator-wpzest
34. In The Terminal npm install -g yo generator-wpzest mkdir my-wp-site cd my-wp-site yo wpzest
35. What Just Happened? DL-ed WordPress Created wp-config.php with nice defaults DL-ed a starter theme Installed theme Grunt and Bower dependencies Initiated a git repo Made a first commit Staging & Prod Config http://yourchosenurl.dev
36. There Is More Vagrant w/ puppet Custom dirs WP as git submodule This all Yeopress github.com/wesleytodd/YeoPress
37. In The Terminal yo wpzest:pluginbp my-gallery cd wp-content/plugins/my-gallery grunt New Tab bower install imagesloaded --save bower install ftscroller --save
38. What Just Happened? DL-ed WP Plugin Boilerplate Renamed files and classes Installed plugin Grunt dependencies Install Bower packages
39. Deployment 4 STEP
40. WP-CLI-Deploy
41. WP-CLI-Deploy: rsync based deployement script made specifically for WordPress github.com/c10b10/wp-cli-deploy Requires: WP-CLI and passwordless SSH access to server
42. In The Terminal cd path/to/wp git clone https://github.com/c10b10/wp-cli-deploy touch wp-cli.local.yml wp-cli.local.yml require: - wp-cli-deploy/deploy.php Include wp-config-deploy.php from wp-config.php
43. wp-config-deploy.php define('STAGING_URL', 'your.staging.url'); define('STAGING_WP_PATH', '/path/to/wp/root'); define('STAGING_HOST', 'your.staginghost.com'); define('STAGING_USER', 'staging_user'); define('STAGING_PORT', '22'); define('STAGING_PATH', '/path/to/site/root'); define('STAGING_UPLOADS_PATH', '/path/to/uploads/folder'); define('STAGING_THEMES_PATH', '/path/to/themes/folder'); define('STAGING_PLUGINS_PATH', 'path/to/pluglins/folder'); define('STAGING_DB_HOST', 'localhost'); define('STAGING_DB_NAME', 'stage_db_name'); define('STAGING_DB_USER', 'stage_db_user'); define('STAGING_DB_PASSWORD', 'stage_db_pass'); define('STAGING_EXCLUDES', 'node_modules/');
44. THE PAYOFF
45. In The Terminal wp deploy push staging --what=themes wp deploy push staging --what=plugins wp deploy push staging --what=uploads wp deploy pull staging --what=themes wp deploy pull staging --what=plugins wp deploy pull staging --what=uploads upload download { {
46. … and my favourites
47. wp deploy push staging --what=db Export local DB Search & replace Upload to server Substitute remote DB Export remote DB DL remote DB Search & replace Substitute local DB wp deploy pull staging --what=db } }
48. Mega useful for Checking your design over a real network (without having to commit) Prototyping Testing on handhelds Working on site w/ content strategist —designing a CM-ed site in browser Deployment on shared hosting —Capistrano better for other types
49. Is this just swapping one toolbox for another?
50. YES BUT Streamlined for task at hand i.e. WordPress specific Achieves more Singular interface, albeit CLI
51. THANK YOU!