$30 off During Our Annual Pro Sale. View Details »

Bronson Quick: My WordPress Development Workflow

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.

WP Australia

April 28, 2013
Tweet

More Decks by WP Australia

Other Decks in Technology

Transcript

  1. MY WORDPRESS
    DEVELOPMENT
    WORKFLOW
    Bronson Quick
    sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    Everyone has their own development style and I wanted to share mine!

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    http://sass-lang.com/
    http://compass.handlino.com/
    http://www.codeschool.com/paths/html-css#sass

    View Slide

  7. CSS HAT
    7 of 34
    http://csshat.com/
    sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    Make the Octocat your friend!

    View Slide

  9. MY GITHUB STRUCTURE
    9 of 34
    https://github.com/markjaquith/WordPress-Skeleton
    sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    You might prefer Mark’s structure!

    View Slide

  10. GIT CRASH COURSE
    10 of 34 sennza | (07) 3040-1545 | [email protected] | 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 [email protected]: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

    View Slide

  11. GIT CRASH COURSE
    11 of 34
    http://gitready.com/
    sennza | (07) 3040-1545 | [email protected] | 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

    View Slide

  12. PNGGAUNTLET
    12 of 34
    http://pnggauntlet.com/
     Free!
     Compress & convert your images
    sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    Because size matters!

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    Buy BackupBuddy now dammit!

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  15. CUSTOM POST TYPES
    Make them as easy as possible to use!
    15 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  16. CUSTOM TINYMCE CSS STYLES
    Better than annoying shortcodes! 
    16 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  21. SASS PARTIALS
    Break your CSS into logic files!
    21 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  22. SASS VARIABLES
    Let Sass keep track of colours and widths
    22 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  27. LAYOUT TEST
    27 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  28. IMAGES TEST
    28 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  29. RESPONSIVE TESTING
    29 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick
    http://html.adobe.com/edge/inspect/

    View Slide

  30. DEPLOYMENT
     VPS - BackupBuddy
     WPEngine – Staging or Production
    Deployment always varies!
    30 of 34 sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  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 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide

  34. THANKS ALOT
    34 of 34
    http://core.trac.wordpress.org/ticket/13237
    sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza @bronsonquick

    View Slide