theme development workflow
TRANSCRIPT
![Page 1: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/1.jpg)
THEME DEVELOPMENT
WORKFLOW
Shameem Reza | Future IT Park
![Page 2: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/2.jpg)
Shameem Reza
CTO & Co-Founder – Future IT
Park
Contributor – Ghost and
WordPress
Wordpress Consultant
Plugin Developer
![Page 3: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/3.jpg)
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.
![Page 4: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/4.jpg)
Pitfalls to avoid
Quickie quotes.
Setting milestones.
Defining responsibilities.
Service level and expectations.
The contingency.
Costs breakdown – give options.
![Page 5: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/5.jpg)
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
![Page 6: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/6.jpg)
My Development Environment
Internal
Xampp / Lamp
Sublime Text 2
VMWare Fusion
Modern.ie
Photoshop
External
Github
Google Drive
Digital Ocean Cloud
Server
![Page 7: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/7.jpg)
Working in a Team or as an
Individual
Version control
Tracking changes / work.
Accountability of task / issue.
Associate commits with milestones.
![Page 8: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/8.jpg)
LINKING COMMITS TO
ISSUES
![Page 9: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/9.jpg)
Working in a Team – Dev Workflow
Local
Development
Team
Commit to Github
Team
Deploy to test
server
Team
![Page 10: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/10.jpg)
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.
![Page 11: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/11.jpg)
Wireframe Examples
![Page 12: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/12.jpg)
Theme Building Options
Adapting (hacking!) other themes.
Starter / Foundation themes, like _s.
Frameworks + Child theme, like Genesis.
From scratch.
![Page 13: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/13.jpg)
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.
![Page 14: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/14.jpg)
Plugins or functions.php
Plugins :
Post types
Taxonomies
Advance functionality
Functions.php :
Widgets
Enqueue styles / scripts
Smaller utility / Display functions
![Page 15: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/15.jpg)
Keep functions.php Organized
Group into logical sections
Comment as much you can.
Template parts / includes vs. big chunks of
code.
![Page 16: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/16.jpg)
Functions.php Example
![Page 17: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/17.jpg)
Functions.php Example
![Page 18: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/18.jpg)
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'
);
![Page 19: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/19.jpg)
Testing Early – testing Often
Run with Debug on during local development:wp-config.php > define('WP_DEBUG', true);
Developer Plugin
Debug bar plugin
![Page 20: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/20.jpg)
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!
![Page 21: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/21.jpg)
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
![Page 22: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/22.jpg)
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.
![Page 23: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/23.jpg)
Stop Hacking and Start
Creating
![Page 24: Theme development workflow](https://reader034.vdocuments.site/reader034/viewer/2022042615/55ad05f01a28abdd468b471b/html5/thumbnails/24.jpg)
THANK YOU
Shameem Reza | Future IT Park