THEME DEVELOPMENT WORKFLOW Shameem Reza | Future IT Park
THEME DEVELOPMENT
WORKFLOW
Shameem Reza | Future IT Park
Shameem Reza
CTO & Co-Founder – Future IT
Park
Contributor – Ghost and
WordPress
Wordpress Consultant
Plugin Developer
The Pitch
Understand clients requirements.
Organizing client data.
Post type / taxonomies – use the core Luke!
Custom post data.
Bespoke functionality.
Who’s doing what?
Timescales and contingency.
Pitfalls to avoid
Quickie quotes.
Setting milestones.
Defining responsibilities.
Service level and expectations.
The contingency.
Costs breakdown – give options.
Won it – Best Foot Forward
Get sign-off of proposal and milestones.
Engage and schedule outside resources.
Upsell – Don’t devalue our services.
Confirm payment details / schedule of
payment.
Get client going on content (or copyrighter)
Hosting / Domains
My Development Environment
Internal
Xampp / Lamp
Sublime Text 2
VMWare Fusion
Modern.ie
Photoshop
External
Github
Google Drive
Digital Ocean Cloud
Server
Working in a Team or as an
Individual
Version control
Tracking changes / work.
Accountability of task / issue.
Associate commits with milestones.
LINKING COMMITS TO
ISSUES
Working in a Team – Dev Workflow
Local
Development
Team
Commit to Github
Team
Deploy to test
server
Team
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 clients.
Save time = saves (your) profit.
Wireframe Examples
Theme Building Options
Adapting (hacking!) other themes.
Starter / Foundation themes, like _s.
Frameworks + Child theme, like Genesis.
From scratch.
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.
Plugins or functions.php
Plugins :
Post types
Taxonomies
Advance functionality
Functions.php :
Widgets
Enqueue styles / scripts
Smaller utility / Display functions
Keep functions.php Organized
Group into logical sections
Comment as much you can.
Template parts / includes vs. big chunks of
code.
Functions.php Example
Functions.php Example
Create your Own 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'
);
Testing Early – testing Often
Run with Debug on during local development:wp-config.php > define('WP_DEBUG', true);
Developer Plugin
Debug bar plugin
Test Data – Beyond Hello World
Standard WordPress unit test datahttp://codex.wordpress.org/Theme_Unit_Test
BuddyPress test datahttps://wordpress.org/plugins/bp-default-data
Or export your own and make available to
team!
Deploy
Migrating installs isn’t toughhttp://interconnectit.com/products/search-and- replace-for-
wordpress-databases
Analytics
Optimization and cache
XML sitemap(s) and Google webmaster tools
Redirects for old site pages in .htaccess fileRedirect 301 /old.html http://www.site.com/new
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 lose that researches.
Stop Hacking and Start
Creating
THANK YOU
Shameem Reza | Future IT Park