Bronson Quick: My WordPress Development Workflow

This talk will outline the process I take after we’ve received design sign off from the client and looks like this…

Setting up a Basecamp project – Setting up a private GitHub repository – Setting up my IDE (Phpstorm) – Setting up Sass & Compass for CSS preprocessing – Custom Theme Development – Custom Plugin Development – Testing (Both cross browser and device ) – Migration with BackupBuddy – Ongoing maintenance.

Transcript

1. MY WORDPRESS DEVELOPMENT WORKFLOW Bronson Quick sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
2. OVERVIEW  Who Am I?  My Tools Of Choice  Analysing The Photoshop File  Setting Up The Development Environment  Making A Starter Theme  Setting Up Sass Partials & Variables  Theme Unit Test Data & Tests  Deployment  Ongoing Maintenance  Future Workflow 2 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick Everyone has their own development style and I wanted to share mine!
3. WHO AM I?  Brisbane based WordPress Developer  Working with different CMS for 12 years  Die hard Smashing Pumpkins fan!  Organiser of the WordPress Brisbane Meetup group  Co-organiser of WordCamp Gold Coast Just a guy who is obsessed with WordPress! 3 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
4. MY TOOLS OF CHOICE  WAMP – Apache 2.2.22, Php 5.4.3, MySQL 5.5.24  PhpStorm  Sass + Compass.app  Photoshop with CSSHat  Github & Gists  PNGGauntlet  BackupBuddy Use any software that makes you MOAR productive! 4 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
5. PHPSTORM 5 of 34  On The Fly Error Checking  PhpDoc Support  Php Refactoring  Code Formatting Configuration  Code Completion  Visual Debugging – Php (Xdebug or Zend Debugger) & JavaScript  Awesome Merge Tool – Handy for complex Git conflicts  PhpUnit support – Unit testing  Frequent Updates  https://gist.github.com/Rarst/1370155 http://www.jetbrains.com/phpstorm/ sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
6. SASS & COMPASS.APP 6 of 34  Partials  Mixins  Nesting  Sprites Protip: Use a typography partial to generate editor-style.scss sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick http://sass-lang.com/ http://compass.handlino.com/ http://www.codeschool.com/paths/html-css#sass
7. CSS HAT 7 of 34 http://csshat.com/ sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
8. GITHUB & GISTS 8 of 34  Code on a plane!  Cloud based  Private & Public Repos  Code collaboration  Branching  Gists  Pull Requests! https://github.com/ https://gist.github.com/BronsonQuick sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick Make the Octocat your friend!
9. MY GITHUB STRUCTURE 9 of 34 https://github.com/markjaquith/WordPress-Skeleton sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick You might prefer Mark’s structure!
10. GIT CRASH COURSE 10 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick Each time you do a `git push` it’ll go to the master branch!  touch license.txt  git init  git add license.txt  git commit –m “Add the GPL!”  git remote add origin git@github.com:sennza/wordcamp-melb.git  git push -u origin master  git add themes  git commit -m “Adds in the changes to the themes folder”  git add .  git commit --amend -m “Add in the changes to the themes and plugins”  git push
11. GIT CRASH COURSE 11 of 34 http://gitready.com/ sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick Once you go Git, you never go back!  git checkout -b awesomesauce Creates a new branch and checks it out so you can start working straight away  git push –u origin awesomesauce Pushes the awesomesauce branch to Github  git checkout master  git merge awesomesauce Merge in your new feature to the master branch
12. PNGGAUNTLET 12 of 34 http://pnggauntlet.com/  Free!  Compress & convert your images sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick Because size matters!
13. BACKUPBUDDY 13 of 34  Have a backup of an image of a ‘clients site’  Clone and migrate a site to your localhost  Migrate from localhost to live! http://ithemes.com/purchase/backupbuddy/ sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick Buy BackupBuddy now dammit!
14. ANALYSING THE PHOTOSHOP FILE  List out custom features  Find the custom fonts  List out the page templates (Widget Areas)  Post Formats  Custom Post Types  Custom TinyMCE CSS Styles It’ll only take you 10 minutes but it’ll save you hours! 14 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
15. CUSTOM POST TYPES Make them as easy as possible to use! 15 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
16. CUSTOM TINYMCE CSS STYLES Better than annoying shortcodes!  16 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
17. SETTING UP THE DEVELOPMENT ENVIRONMENT – NEW SITE  Create a new folder in www  Create a blank database in phpMyAdmin  Extract BackupBuddy `image` of a typical client install  Define (‘WP_DEBUG, true’); in wp-config.php  Git init inside wp-content  Add items that you don’t want to track to .gitignore  Add Github remote and Git push! For a brand spanking new WordPress site! 17 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
18. SETTING UP THE DEVELOPMENT ENVIRONMENT – REDESIGN  Create a new folder in www  Create a blank database in phpMyAdmin  Extract BackupBuddy backup of existing site  Define (‘WP_DEBUG, true’); in wp-config.php  Git init inside wp-content  Add items that you don’t want to track to .gitignore  Add Github remote and Git push! For a redesign of a WordPress site! 18 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
19. MAKING A STARTER THEME  Use Underscores or Twenty Twelve `Start from scratch every time` - Said no one ever! 19 of 34 http://underscores.me/ https://github.com/Automattic/_s sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
20. SETTING UP SASS PARTIALS & VARIABLES  Setup scss partials  Setup variable for colours & layout  Make mixins – Buttons CSS that’s easy to maintain and faster to write! 20 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
21. SASS PARTIALS Break your CSS into logic files! 21 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
22. SASS VARIABLES Let Sass keep track of colours and widths 22 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
23. SASS VARIABLES Let Sass keep track of colours and widths 23 of 34 /* Tablet Widths */ $tabletBaseWidth: 768px; $tabletContentWidth: 451px; $tabletSidebarWidth: 255px; .primary { width: percentage($tabletContentWidth / $tabletBaseWidth); } .primary { width: 58.72396%; } sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
24. SASS MIXINS Let Sass keep track of colours and widths 24 of 34 @mixin buttons { @include inline-block; @include border-radius(); @include background-clip(); color: #fff; font-size: ( $base-font-size / 16px ) * 1em; font-weight: bold; padding: 6px 24px; margin: 0 10px 10px 0; cursor: pointer; @include text-shadow(0 -1px 0 rgba(0, 0, 0, .3)); } sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
25. SASS MIXINS These 8 CSS lines create 32 lines of cross browser CSS! 25 of 34 .blue-button { @include buttons; @include filter-gradient(#0071bf, #0083c5); // prevents bg color from leaking outside the border background-color: #0071bb; // layer fill content @include box-shadow(0 1px 1px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(0, 0, 0, .1)); // drop shadow, inner shadow and inner glow @include background-image(linear-gradient(bottom, rgba(0, 0, 0, .35) 0%, rgba(255, 255, 255, .35) 100%)); // gradient overlay &:hover { @include filter-gradient(#0083c5, #0071bf); @include background-image(linear-gradient(bottom, rgba(255, 255, 255, .35) 0%, rgba(0, 0, 0, .35) 100%)); } &:visited { color: #fff; } } sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
26. THEME UNIT TEST DATA & TESTS  Pretend that your theme is going onto WordPress.org  Use the test data in the Codex  Follow the checklist of testing  Make sure your designer styles the Layout Test  Make sure your designer styles the Images Tests  Gravity Forms Layouts  Your clients will be happier and won’t ‘break it’ 26 of 34 http://codex.wordpress.org/Theme_Unit_Test http://developer.wordpress.com/themes/ https://gist.github.com/BronsonQuick/5334350 https://gist.github.com/BronsonQuick/5334781 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
27. LAYOUT TEST 27 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
28. IMAGES TEST 28 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
29. RESPONSIVE TESTING 29 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick http://html.adobe.com/edge/inspect/
30. DEPLOYMENT  VPS - BackupBuddy  WPEngine – Staging or Production Deployment always varies! 30 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
31. ONGOING MAINTENANCE  InfiniteWP  Automatic Upgrader Mad props to Gary Pendergast for Automatic Upgrader! 31 of 34 http://infinitewp.com/ http://wordpress.org/extend/plugins/automatic-updater/ sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
32. FUTURE WORKFLOW  Vagrant + Puppet  Auto Deployment with Github or Beanstalk Keep refining your workflow! Try new tools! 32 of 34 https://github.com/10up/varying-vagrant-vagrants http://beanstalkapp.com sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
33. CREDITS  Settings designed by Michael Zenaty from The Noun Project  Test Tube designed by Benton Rochester from The Noun Project  Food Mixer designed by Simon Child from The Noun Project  Hard Hat designed by Jon Trillana from The Noun Project  Rocket designed by Cris Dobbins from The Noun Project  Oil from The Noun Project  Tardis designed by Michael Howarth from The Noun Project  Like designed by Marwa Boukarim from The Noun Project Mad props to The Noun Project crew! 33 of 34 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
34. THANKS ALOT 34 of 34 http://core.trac.wordpress.org/ticket/13237 sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick