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