WordCamp Sheffield 2014 Theme Workflow Presentation
•
2 likes•2,470 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to WordCamp Sheffield 2014 Theme Workflow Presentation
Similar to WordCamp Sheffield 2014 Theme Workflow Presentation (20)
More from Jonny Allbut
More from Jonny Allbut (10)
Recently uploaded
Recently uploaded (20)
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