Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

WordCamp Sheffield 2014 Theme Workflow Presentation

2.298 Aufrufe

Veröffentlicht am

An outline of my WordPress theme development process.

Veröffentlicht in: Design, Technologie, Business
  • Als Erste(r) kommentieren

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

×