Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accelerating Custom Development with Dynamic Scaffolding and WP-CLI

455 views

Published on

Slidedeck of presentation delivered to WordCamp Sacramento 2017.

Published in: Internet
  • Login to see the comments

Accelerating Custom Development with Dynamic Scaffolding and WP-CLI

  1. 1. Accelerating Custom Development with Dynamic Scaffolding and WP-CLI BEN BYRNE
 CORNERSHOP CREATIVE 1
  2. 2. THE PROBLEM 2 “BUILD GOOD STUFF FAST”
  3. 3. PREMIUM THEMES 3 WHAT ABOUT
  4. 4. STARTER THEMES 4 OR MAYBE
  5. 5. STARTER THEMES 5 THEN WE HAVE + COMPONENT LIBRARIES
  6. 6. DYNAMIC SCAFFOLDING 6 FOR OUR STARTER THEME
  7. 7. DON’T TRY THIS AT HOME 7 MAYBE?
  8. 8. Goals • Speed development (duh) • Easy for new staff/devs to learn • Theme should have everything it needs and nothing it doesn’t • Avoid reinventing wheels • Avoid tedious, repetitive work (e.g. copy-paste) 8
  9. 9. WP-CLI 9 THE FOUNDATION
  10. 10. Why WP-CLI? • broad support • already offers basic scaffolding • supports mustache templating • easy documentation 10
  11. 11. Extending WP-CLI • We built a plugin called Produce
 (it could also be a package) • It extends wp-cli with a new command & subcommands • When run, commands inject code into 
 our starter theme, Crate 11
  12. 12. Basic Flow 1. Make sure starter theme is active 2. Install & activate Produce plugin 3. Run WP-CLI commands to copy files from the plugin to the theme 4. When done, uninstall the plugin 12
  13. 13. EXAMPLE 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. Other Examples • wp produce site-options • wp produce term-fields 
 —taxonomies=category • wp produce articles 
 —slug=news 
 —types=press release, in the news 
 —external-urls=both 17
  18. 18. Architecture • Base class with methods, variables & helpers to facilitate building commands • Subdirectories for: • commands • ACF fieldgroups (in json) • php includes • js • sass • template files • mustache 18
  19. 19. Articles files: • commands/articles.php • fieldgroups/articles-fields.json • mustache/articles.mustache • templates/single-article.php 19
  20. 20. Mustache templates produce/mustache/loginscreen.mustache 20 function crate_login_logo() { ?> <style type="text/css"> .login #login h1 a { background-image: url('{{file}}'); background-size: contain !important; width: {{width}}; height: {{height}}; } body.login { background: {{bg}}; } </style> <?php } add_action( 'login_enqueue_scripts', 'crate_login_logo' );
  21. 21. Base Class methods • prompt() • enqueue() • produce() • next_steps() • mustache_array() 21
  22. 22. Commands class Articles_Command 
 extends CShop_Produce {
 public function __invoke( $args, $assoc_args ) { // do things… }
 }
 WP_CLI::add_command( 
 'produce site-options', 
 ‘Articles_Command' 
 ); 22
  23. 23. __invoke (1 of 2) • $do_thing = self::prompt(
 ‘Make site awesome?',
 array( 'Yes', 'No', 'Maybe' ),
 'Yes'
 ); • $this->enqueue( 'sample.js' ); • $this->enqueue( 
 'sample.mustache', 
 '/templates/sample.php', $data 
 ); 23
  24. 24. __invoke (2 of 2) • self::next_steps(
 "@include 'sample'",
 'core.sass'
 ); • WP_CLI::success( 'I did that thing.' ); 24
  25. 25. DON’T TOUCH NON- GENERATED FILES 25 JUST TO BE SAFE
  26. 26. LINKS • https://bitbucket.org/drywall/produce • http://wp-cli.org/package-index/ • http://mustache.github.io/ • http://cshp.co/sacto2017 26
  27. 27. THANK YOU 27 @drywall ben@cshp.co

×