theme development workflow

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