An outline of my WordPress theme development process.

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