THEME DEVELOPMENT
WORKFLOW FROM START

TO FINISH
Jonny Allbut | Director & Head of Digital - Tanc Design
@Jonnyauk | www.t...
HOWDY CAMPERS!
• Creative designer.
• PHP developer (on a good day!)
• Working with WordPress for 9 years.
• WP-CMS Post C...
THE PITCH
• Understand clients requirements.
• Organising client data.
• Post types / taxonomies - use the core Luke!
• Cu...
PITFALLS TO AVOID
• Quickie quotes.
• Setting milestones.
• Defining responsibilities.
• Service levels and expectations.
...
WON IT (WHOOT!)

BEST FOOT FORWARD
• Get sign-off of proposal and milestones.
• Engage and schedule outside resources.
• U...
MY DEVELOPMENT
ENVIRONMENT• Internal
• Mamp Pro // Aptanta Studio // Espresso
• Sequel Pro // Tower // Fetch // Codebox
• ...
WORKING IN A TEAM…
OR AS AN INDIVIDUAL!
• Version control.
• Tracking changes/work.
• Accountability of tasks/issues.
• As...
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...
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 the...
LET THE CODING BEGIN!
• Code straight into template files.
• Avoid CSS (until later!) - code pure XHTML.
• Identify and us...
PLUGINS OR
FUNCTIONS.PHP
• functions.php
• Widgets.
• Enqueue styles/scripts.
• Smaller utility/display functions.
• Plugi...
KEEP FUNCTIONS.PHP
ORGANISED!
• Group into logical sections.
• Comment as much as you can!
• Template parts/includes vs bi...
FUNCTIONS.PHP EXAMPLE/*!
CONTENTS!
1 - Setup main layout css!
2 - Configure Wonderflux functionality!
3 - Configure core t...
FUNCTIONS.PHP EXAMPLE
/**

* Insert featured events only on homepage

*/

function my_wfx_insert_home_featured_events() {
...
GET SMART - CREATE
YOUR OWN ACTION HOOKS
• Add function to do_action in functions.php:

function mytheme_hook_after_page_l...
TESTING EARLY,
TESTING OFTEN
• Run with debug on during local development:

wp-config.php > define('WP_DEBUG', true);!
• D...
TEST DATA - BEYOND
HELLO WORLD!
• Standard WordPress unit test data:

http://codex.wordpress.org/Theme_Unit_Test
• BuddyPr...
DEPLOY!
• Migrating installs isn’t tough:

http://interconnectit.com/products/search-and-
replace-for-wordpress-databases
...
FINAL THOUGHTS
• Stop using plugins for simple things!
• Typography matters… and so does legibility.
• Don’t just copy and...
STOP HACKING

AND START CREATING!
Jonny Allbut | Director & Head of Digital - Tanc Design
@Jonnyauk | www.tancdesign.com
Upcoming SlideShare
Loading in...5
×

WordCamp Sheffield 2014 Theme Workflow Presentation

1,161

Published on

An outline of my WordPress theme development process.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,161
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "WordCamp Sheffield 2014 Theme Workflow Presentation"

  1. 1. THEME DEVELOPMENT WORKFLOW FROM START
 TO FINISH Jonny Allbut | Director & Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com
  2. 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. 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. 4. PITFALLS TO AVOID • Quickie quotes. • Setting milestones. • Defining responsibilities. • Service levels and expectations. • The contingency. • Costs breakdown - give options.
  5. 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. 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. 7. WORKING IN A TEAM… OR AS AN INDIVIDUAL! • Version control. • Tracking changes/work. • Accountability of tasks/issues. • Associate commits with milestones.
  8. 8. LINKING COMMITS
 TO ISSUES
  9. 9. WORKING IN A TEAM - DEVELOPMENT WORKFLOW Local development TEAM Commit to GitHub/repo TEAM Deploy to
 test server LIMITED
  10. 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.
  11. 11. WIREFRAME EXAMPLES http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches
  12. 12. THEME BUILDING OPTIONS • Adapting (hacking!) other themes. • Starter/foundation themes (like _s). • Frameworks + child themes (like Wonderflux). • From scratch.
  13. 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. 14. PLUGINS OR FUNCTIONS.PHP • functions.php • Widgets. • Enqueue styles/scripts. • Smaller utility/display functions. • Plugins • Post types. • Taxonomies. • Advanced functionality.
  15. 15. KEEP FUNCTIONS.PHP ORGANISED! • Group into logical sections. • Comment as much as you can! • Template parts/includes vs big chunks of code.
  16. 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. 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. 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. 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. 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. 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. 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. 23. STOP HACKING
 AND START CREATING! Jonny Allbut | Director & Head of Digital - Tanc Design @Jonnyauk | www.tancdesign.com

×