Bronson Quick: My WordPress Development Workflow

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

View Slide

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

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!

View Slide

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!

View Slide

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/

View Slide

SASS & COMPASS.APP
6 of 34
 Partials
 Mixins
 Nesting
 Sprites
Protip: Use a typography partial to generate editor-style.scss
http://sass-lang.com/
http://compass.handlino.com/
http://www.codeschool.com/paths/html-css#sass

View Slide

CSS HAT
7 of 34
http://csshat.com/

View Slide

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
Make the Octocat your friend!

View Slide

MY GITHUB STRUCTURE
9 of 34
https://github.com/markjaquith/WordPress-Skeleton
You might prefer Mark’s structure!

View Slide

GIT CRASH COURSE
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

GIT CRASH COURSE
11 of 34
http://gitready.com/
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

PNGGAUNTLET
12 of 34
http://pnggauntlet.com/
 Free!
 Compress & convert your images
Because size matters!

View Slide

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/
Buy BackupBuddy now dammit!

View Slide

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!

View Slide

CUSTOM POST TYPES
Make them as easy as possible to use!

View Slide

CUSTOM TINYMCE CSS STYLES
Better than annoying shortcodes! 

View Slide

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!

View Slide

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!

View Slide

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

View Slide

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!

View Slide

SASS PARTIALS
Break your CSS into logic files!

View Slide

SASS VARIABLES
Let Sass keep track of colours and widths

View Slide

SASS VARIABLES
23 of 34
/* Tablet Widths */
$tabletBaseWidth: 768px;
$tabletContentWidth: 451px;
$tabletSidebarWidth: 255px;
.primary {
width: percentage($tabletContentWidth / $tabletBaseWidth);
}
.primary {
width: 58.72396%;
}

View Slide

SASS MIXINS
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));
}

View Slide

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;
}
}

View Slide

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

View Slide

LAYOUT TEST

View Slide

IMAGES TEST

View Slide

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

View Slide

DEPLOYMENT
 VPS - BackupBuddy
 WPEngine – Staging or Production
Deployment always varies!

View Slide

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/

View Slide

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

View Slide

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!

View Slide

THANKS ALOT
34 of 34
http://core.trac.wordpress.org/ticket/13237

View Slide

Bronson Quick: My WordPress Development Workflow

Bronson Quick: My WordPress Development Workflow

WP Australia

More Decks by WP Australia

Other Decks in Technology

Featured

Transcript