• Save
WordCamp Sheffield 2014 Theme Workflow Presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WordCamp Sheffield 2014 Theme Workflow Presentation

on

  • 1,065 views

An outline of my WordPress theme development process.

An outline of my WordPress theme development process.

Statistics

Views

Total Views
1,065
Views on SlideShare
1,000
Embed Views
65

Actions

Likes
1
Downloads
4
Comments
0

2 Embeds 65

https://twitter.com 54
http://lanyrd.com 11

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordCamp Sheffield 2014 Theme Workflow Presentation Presentation Transcript

  • 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.
  • 8. LINKING COMMITS
 TO ISSUES
  • 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.
  • 11. WIREFRAME EXAMPLES http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches
  • 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