Slidedeck of presentation delivered to WordCamp Seattle 2017.

1. Accelerating Custom
Development with
Dynamic Scaffolding
and WP-CLI
BEN BYRNE
CORNERSHOP CREATIVE
1
cshp.co/wcsea2017

2. THE PROBLEM
2
“BUILD GOOD STUFF FAST”

3. PREMIUM THEMES
3
SOLUTION #1

4. STARTER THEMES
4
SOLUTION #2

5. STARTER THEMES
+ COMPONENT LIBRARIES
5
SOLUTION #3

6. DYNAMIC
SCAFFOLDING
6
OUR SOLUTION
FOR OUR STARTER THEME

7. YMMV
7
DISCLAIMER:

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. WP-CLI
9
THE FOUNDATION

10. WHY WP-CLI?
• Broad support & awareness in the WP community
• Already offers basic scaffolding
• Supports Mustache templating
• Easy documentation
10

11. WP-CLI SCAFFOLDS
wp scaffold child-theme
plugin
plugin-tests
post-type
taxonomy
theme-tests
_s
11

12. 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
12

13. BASIC FLOW
1. Make sure starter theme is present
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
13

14. EXAMPLE
14

16. 16
(Live demo or screencast of terminal commands)

17. 17

18. OTHER SUBCOMMANDS
wp produce site-options
wp produce term-fields
—taxonomies=category
wp produce articles
—slug=news
—types=press release, in the news
—external-urls=both
18

19. 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
19

20. “ARTICLES” FILES
commands/articles.php
fieldgroups/articles-fields.json
mustache/articles.mustache
templates/single-article.php
20

21. MUSTACHE TEMPLATES
produce/mustache/loginscreen.mustache
21

22. 22
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' );

23. /** ANATOMY OF A COMMAND FILE **/
class Articles_Command extends CShop_Produce {
public function __invoke( $args, $assoc_args ) {
// do things…
}
}
WP_CLI::add_command(
'produce site-options',
‘Articles_Command'
);
23

24. $do_thing = self::prompt(
'Make site awesome?',
array( 'Yes', 'No', 'Maybe' ),
'Yes'
);
if ( 'Yes' === $do_thing ) $this->enqueue( 'demo.sass' );
$this->enqueue(
'demo.mustache',
'/templates/demo.php',
$data
);
self::next_steps( "@include 'demo'", 'core.sass' );
WP_CLI::success( 'Demo files successfully loaded.' );
24

25. DON’T TOUCH NON-
GENERATED FILES
25
JUST TO BE SAFE

26. LINKS
• https://bitbucket.org/drywall/produce
• http://wp-cli.org/package-index/
• http://mustache.github.io/
• http://cshp.co/wcsea2017
26

27. THANK YOU
27
@drywall
ben@cshp.co