Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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!

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

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!

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

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!

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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/

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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