SlideShare a Scribd company logo

WordCamp Sheffield 2014 Theme Workflow Presentation

•
•
Jonny Allbut
Jonny Allbut

The document outlines Jonny Allbut's workflow for developing WordPress themes from start to finish. It discusses understanding client requirements, organizing client data, defining responsibilities, payment details, and development milestones. It then covers Jonny's development environment, version control, keeping functions.php organized, testing early and often, deploying the theme, and final thoughts on stopping plugin overuse and prioritizing legibility.

1 of 23
THEME DEVELOPMENT WORKFLOW FROM START
 TO FINISH Jonny Allbut | Director & Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com
HOWDY CAMPERS! • Creative designer. • PHP developer (on a good day!) • Working with WordPress for 9 years. • WP-CMS Post Control author (90k+ downloads).
 http://wordpress.org/plugins/wp-cms-post-control • Creator & lead developer of Wonderflux framework.
 http://wonderflux.com
THE PITCH • Understand clients requirements. • Organising client data. • Post types / taxonomies - use the core Luke! • Custom post data. • Bespoke functionality. • Who’s doing what? • Timescales & contingency.
PITFALLS TO AVOID • Quickie quotes. • Setting milestones. • Defining responsibilities. • Service levels and expectations. • The contingency. • Costs breakdown - give options.
WON IT (WHOOT!)
 BEST FOOT FORWARD • Get sign-off of proposal and milestones. • Engage and schedule outside resources. • Upsell - don’t devalue your services. • Confirm payment details/schedule of payment. • Get client going on content (or copywriter!) • Hosting/domains.
MY DEVELOPMENT ENVIRONMENT• Internal • Mamp Pro // Aptanta Studio // Espresso • Sequel Pro // Tower // Fetch // Codebox • VMWare Fusion // http://www.modern.ie // Edge Inspect • Photoshop // Illustrator • External • GitHub - private repos • Google Docs // Sohnar Traffic
WORKING IN A TEAM… OR AS AN INDIVIDUAL! • Version control. • Tracking changes/work. • Accountability of tasks/issues. • Associate commits with milestones.
LINKING COMMITS
 TO ISSUES
WORKING IN A TEAM - DEVELOPMENT WORKFLOW Local development TEAM Commit to GitHub/repo TEAM Deploy to
 test server LIMITED
WIREFRAMES - DON’T GET AHEAD OF YOURSELF • Solve a-lot of queries. • Defines what’s important. • What actually needs to be editable? • Clarifies functionality with client. • Saves time = saves (your!) profit.
WIREFRAME EXAMPLES http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches
THEME BUILDING OPTIONS • Adapting (hacking!) other themes. • Starter/foundation themes (like _s). • Frameworks + child themes (like Wonderflux). • From scratch.
LET THE CODING BEGIN! • Code straight into template files. • Avoid CSS (until later!) - code pure XHTML. • Identify and use common CSS classes: • Colour definitions • Layout and containers • Identify common layout components: • Template parts
PLUGINS OR FUNCTIONS.PHP • functions.php • Widgets. • Enqueue styles/scripts. • Smaller utility/display functions. • Plugins • Post types. • Taxonomies. • Advanced functionality.
KEEP FUNCTIONS.PHP ORGANISED! • Group into logical sections. • Comment as much as you can! • Template parts/includes vs big chunks of code.
FUNCTIONS.PHP EXAMPLE/*! CONTENTS! 1 - Setup main layout css! 2 - Configure Wonderflux functionality! 3 - Configure core theme setup! 4 - Manipulate Wonderflux from child theme! 5 - Template parts and other added content! 6 - Enqueue and do scripts! 7 - Enqueue and do CSS! 8 - WordPress query functionality/filtering! 9 - Utility functions! 10 - Display functions! 11 - Admin/options! */! ! //// 1 //////////// Setup main layout css! ! // Remove dynamic generated framework CSS! define( 'WF_THEME_FRAMEWORK_REPLACE', true);! ! //// 2 //////////// Configure Wonderflux functionality! ! // Remove Wonderflux menu items! define( 'WF_ADMIN_ACCESS', 'nobody');
FUNCTIONS.PHP EXAMPLE /**
 * Insert featured events only on homepage
 */
 function my_wfx_insert_home_featured_events() {
 
 get_template_part('part','featured-events');
 
 }! add_action(
 'wfmain_after_home_main_content',
 'my_wfx_insert_home_featured_events', 
 9
 );
GET SMART - CREATE YOUR OWN ACTION HOOKS • Add function to do_action in functions.php:
 function mytheme_hook_after_page_loop(){
 do_action('mytheme_hook_after_page_loop');
 }! • Add action hook to theme: mytheme_hook_after_page_loop(); • Use action hook:
 function mytheme_insert_howdy(){ echo 'Howdy!';}
 add_action(
 'mytheme_hook_after_page_loop',
 'mytheme_insert_howdy'
 );
TESTING EARLY, TESTING OFTEN • Run with debug on during local development:
 wp-config.php > define('WP_DEBUG', true);! • Developer plugin:
 http://wordpress.org/plugins/developer • Debug bar plugin:
 http://wordpress.org/plugins/debug-bar
 https://wordpress.org/plugins/debug-bar-transients
TEST DATA - BEYOND HELLO WORLD! • Standard WordPress unit test data:
 http://codex.wordpress.org/Theme_Unit_Test • BuddyPress test data:
 https://wordpress.org/plugins/bp-default-data • Or export your own and make available to team!
DEPLOY! • Migrating installs isn’t tough:
 http://interconnectit.com/products/search-and- replace-for-wordpress-databases • Analytics • Optimisation and cache • XML sitemap(s) and Google webmaster tools • Redirects for old site pages in .htaccess file
 Redirect 301 /old.html http://www.site.com/new
FINAL THOUGHTS • Stop using plugins for simple things! • Typography matters… and so does legibility. • Don’t just copy and paste
 - examine, understand, refine. • On-server sub-domain dev environment
 …but lock it down! • Keep R&D folder - don’t loose that research!
STOP HACKING
 AND START CREATING! Jonny Allbut | Director & Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com

More Related Content

WordCamp Sheffield 2014 Theme Workflow Presentation

  • 1. THEME DEVELOPMENT WORKFLOW FROM START
 TO FINISH Jonny Allbut | Director & Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com
  • 2. HOWDY CAMPERS! • Creative designer. • PHP developer (on a good day!) • Working with WordPress for 9 years. • WP-CMS Post Control author (90k+ downloads).
 http://wordpress.org/plugins/wp-cms-post-control • Creator & lead developer of Wonderflux framework.
 http://wonderflux.com
  • 3. THE PITCH • Understand clients requirements. • Organising client data. • Post types / taxonomies - use the core Luke! • Custom post data. • Bespoke functionality. • Who’s doing what? • Timescales & contingency.
  • 4. PITFALLS TO AVOID • Quickie quotes. • Setting milestones. • Defining responsibilities. • Service levels and expectations. • The contingency. • Costs breakdown - give options.
  • 5. WON IT (WHOOT!)
 BEST FOOT FORWARD • Get sign-off of proposal and milestones. • Engage and schedule outside resources. • Upsell - don’t devalue your services. • Confirm payment details/schedule of payment. • Get client going on content (or copywriter!) • Hosting/domains.
  • 6. MY DEVELOPMENT ENVIRONMENT• Internal • Mamp Pro // Aptanta Studio // Espresso • Sequel Pro // Tower // Fetch // Codebox • VMWare Fusion // http://www.modern.ie // Edge Inspect • Photoshop // Illustrator • External • GitHub - private repos • Google Docs // Sohnar Traffic
  • 7. WORKING IN A TEAM… OR AS AN INDIVIDUAL! • Version control. • Tracking changes/work. • Accountability of tasks/issues. • Associate commits with milestones.
  • 9. WORKING IN A TEAM - DEVELOPMENT WORKFLOW Local development TEAM Commit to GitHub/repo TEAM Deploy to
 test server LIMITED
  • 10. WIREFRAMES - DON’T GET AHEAD OF YOURSELF • Solve a-lot of queries. • Defines what’s important. • What actually needs to be editable? • Clarifies functionality with client. • Saves time = saves (your!) profit.
  • 12. THEME BUILDING OPTIONS • Adapting (hacking!) other themes. • Starter/foundation themes (like _s). • Frameworks + child themes (like Wonderflux). • From scratch.
  • 13. LET THE CODING BEGIN! • Code straight into template files. • Avoid CSS (until later!) - code pure XHTML. • Identify and use common CSS classes: • Colour definitions • Layout and containers • Identify common layout components: • Template parts
  • 14. PLUGINS OR FUNCTIONS.PHP • functions.php • Widgets. • Enqueue styles/scripts. • Smaller utility/display functions. • Plugins • Post types. • Taxonomies. • Advanced functionality.
  • 15. KEEP FUNCTIONS.PHP ORGANISED! • Group into logical sections. • Comment as much as you can! • Template parts/includes vs big chunks of code.
  • 16. FUNCTIONS.PHP EXAMPLE/*! CONTENTS! 1 - Setup main layout css! 2 - Configure Wonderflux functionality! 3 - Configure core theme setup! 4 - Manipulate Wonderflux from child theme! 5 - Template parts and other added content! 6 - Enqueue and do scripts! 7 - Enqueue and do CSS! 8 - WordPress query functionality/filtering! 9 - Utility functions! 10 - Display functions! 11 - Admin/options! */! ! //// 1 //////////// Setup main layout css! ! // Remove dynamic generated framework CSS! define( 'WF_THEME_FRAMEWORK_REPLACE', true);! ! //// 2 //////////// Configure Wonderflux functionality! ! // Remove Wonderflux menu items! define( 'WF_ADMIN_ACCESS', 'nobody');
  • 17. FUNCTIONS.PHP EXAMPLE /**
 * Insert featured events only on homepage
 */
 function my_wfx_insert_home_featured_events() {
 
 get_template_part('part','featured-events');
 
 }! add_action(
 'wfmain_after_home_main_content',
 'my_wfx_insert_home_featured_events', 
 9
 );
  • 18. GET SMART - CREATE YOUR OWN ACTION HOOKS • Add function to do_action in functions.php:
 function mytheme_hook_after_page_loop(){
 do_action('mytheme_hook_after_page_loop');
 }! • Add action hook to theme: mytheme_hook_after_page_loop(); • Use action hook:
 function mytheme_insert_howdy(){ echo 'Howdy!';}
 add_action(
 'mytheme_hook_after_page_loop',
 'mytheme_insert_howdy'
 );
  • 19. TESTING EARLY, TESTING OFTEN • Run with debug on during local development:
 wp-config.php > define('WP_DEBUG', true);! • Developer plugin:
 http://wordpress.org/plugins/developer • Debug bar plugin:
 http://wordpress.org/plugins/debug-bar
 https://wordpress.org/plugins/debug-bar-transients
  • 20. TEST DATA - BEYOND HELLO WORLD! • Standard WordPress unit test data:
 http://codex.wordpress.org/Theme_Unit_Test • BuddyPress test data:
 https://wordpress.org/plugins/bp-default-data • Or export your own and make available to team!
  • 21. DEPLOY! • Migrating installs isn’t tough:
 http://interconnectit.com/products/search-and- replace-for-wordpress-databases • Analytics • Optimisation and cache • XML sitemap(s) and Google webmaster tools • Redirects for old site pages in .htaccess file
 Redirect 301 /old.html http://www.site.com/new
  • 22. FINAL THOUGHTS • Stop using plugins for simple things! • Typography matters… and so does legibility. • Don’t just copy and paste
 - examine, understand, refine. • On-server sub-domain dev environment
 …but lock it down! • Keep R&D folder - don’t loose that research!
  • 23. STOP HACKING
 AND START CREATING! Jonny Allbut | Director & Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com