Levelling up your WordPress development workflow

LEVELLING UP YOURWORDPRESS DEVELOPMENT

WORKFLOWWITH @DARASKOLNICK

HI, I'M DARA.NICE TO MEET YOU!

I'm @daraskolnick basically everywhere on the Internet.

A LITTLE ABOUT ME.I...

live in Torontowork as web designer & front end developerhave been developing WP themes for 9 yearsrun my own small businesslead Ladies Learning Code workshops & mentor atHackerYouam a first time WordCamp speaker!

THIS TALK IS AIMED AT:WORDPRESS THEME DEVELOPERSWHO CREATE CUSTOM (PARENT)

THEMESSuggestions can apply to either solo devs or teams.

SO, WHY IS HAVING AGOOD WORKFLOWSO IMPORTANT?

1. YOU CAN AUTOMATE LOTSOF NON-FUN TASKS

WHO LOVES COMPRESSING IMAGES,LINTING CODE, AND CREATING

SPRITES?ANYONE?

2. A GOOD WORKFLOWSAVES YOU TIME.

TIME = $$

BUT MORE IMPORTANTLY...TIME = FREEDOM

WORDPRESS DEV IS GREAT,OF COURSE...

BUT HAVING THE TIME TO PURSUEOTHER THINGS IN LIFE IS ALSO PRETTY

GREAT.

3. YOU CAN APPLY THE BEST,SEXIEST FRONT-END DEVPRACTICES TO WORDPRESS

THEMING

IF YOU'VE EVER WONDERED...

IF YOU'VE EVER WONDERED...

THEN THIS TALK IS FOR YOU!

FIRST DISCLAIMERTHERE'S NO RIGHT WAY TO DO FRONT-END DEVELOPMENT — THIS IS JUST

ONE WAY.

DEVS HAVE A LOT OFOPINIONS/FEELS ABOUT THE "RIGHT"

WAY TO DO THINGS

DON'T BE INTIMIDATED BY NEEDING TOUSE THE "RIGHT" TOOLS — SEE WHAT

WORKS BEST FOR YOU.

SECOND DISCLAIMERMOST OF THE NOT-SO-GOOD DEVPRACTICES I'LL TALK ABOUT COMEFROM FIRST HAND EXPERIENCE.

WORKFLOWIMPROVEMENT #1DEVELOPING LOCALLY

WHY DEVELOP LOCALLY?No White Screen of Death™ on a client's live siteLocal sites load more quicklyNo embarrassment if when you eff things upAllows you to use version controlYou're using version control, right? Right?

You can use task runners, CSS preprocessors, etc.

IF YOU'RE STILL DOING THIS...

IF YOU'RE STILL DOING THIS...

WE NEED TO TALK.

MY LOCAL DEV PROCESS:1. Develop the entire website locally2. Along the way, commit changes to git and push to

Bitbucket3. Copy local site to staging server4. Copy staging site to client's server5. If when changes are needed after initial development,

make them on the local copy and push them to staging,and then live.

MY LOCAL DEV PROCESS:At no point am I ever making changes directly to thelive site.When you make all changes on your local copy first, youdon't have to keep track of which codebase is thelatest/correct version.

MY LOCAL DEVENVIRONMENT OF CHOICE:

(Mac + Windows)MAMP/MAMP Pro

OTHER SIMILAR OPTIONS: (Mac, Windows and Linux) (Mac, Windows, Linux)

XAMPPAMPPS

WHAT MAMP DOESthe "AMP" in MAMP/XAMPP/AMPPS stands for Apache,MySQL and PHPMySQL and PHP are required to run WP and Apache ishighly recommended.Replicates setup of common web hosts on your computerFree MAMP gives you a local server located athttp://localhost:8888MAMP Pro lets you assign custom domain names to eachlocal site (e.g. http://sitename.dev)

SETTING UP YOUR FIRSTLOCAL WORDPRESS SITEInstalling WordPress with MAMP is as easy as...

1. Downloading WordPress and putting it in the folder thatMAMP is watching

2. Setting up a new database in phpMyAdmin (alsoconveniently bundled with MAMP)

3. Editing wp-config.php to point at the database you justcreated

4. Congrats, friend! You now have a WordPress site runningon your computer.For more detailed instructions,

.CSS Tricks has a great

screencast on this very topic

WORKFLOWIMPROVEMENT #2

USING A STARTER THEME

TIME-WASTING WAYS TOSTART CUSTOM THEMES

INCLUDE:Coding your theme from scratchUsing an old theme of yours as a starter themeUsing a default theme (like twentyfourteen) as a startertheme

TIME WASTER #1:CODING YOUR THEME FROM SCRATCH

Extremely repetitiveExtremely time consumingToo much time on gruntwork and less on interesting work

TIME WASTERS #2 + 3:USING A FINISHED THEME (YOURS ORWP'S) AS YOUR STARTER THEME

Lots of time spent undoing old work (either yours orsomeone else's)Easy to make poor coding decisions based onlaziness/what's already thereOften end up with a lot of code bloat when stuff from theold theme that's irrelevant to yours sticks around

THE BETTER WAY:USE A REAL STARTER THEME!

A starter theme is a barebones theme that acts as afoundation for your custom theme.

A FEW POPULAR STARTER THEMES (made by Automattic)Underscores

RootsBones

UNDERSCORES STARTS OFF LIKE THIS:

BASIC FILE STRUCTURE IS TAKEN CAREOF FOR YOU.

A GOOD STARTER THEME WILL ALSOTAKE CARE OF THINGS LIKE:

Basic CSS for WordPress functionality you may forgetabout (say, image alignment classes and galleries)Functions for common theme tasks (like setting up menusand widget areas)Adhering to (Underscores isespecially good with this for obvious reasons)

WordPress coding standards

STARTER THEMES FTW!THE TEDIOUS STUFF IS DONE FOR YOUAND THERE'S LITTLE TO NO STYLING

TO UNDO.

WHAT IF I TOLD YOU WE COULDTAKE THAT ONE STEP FURTHER?

THE BEST STARTER THEME...IS YOUR OWN, PERSONALIZED STARTER

THEME!No one knows your own coding style as well as you do.

MY STARTER THEME IS BASED ONUNDERSCORES AND CONTAINS:

A customized functions.php file with all my commonlyused functionsA starter script.js file with a few starter functions thatmost themes useAll my Sass partials set up as I like them with some usefulvariables and mixinsMy latest gulpfile.js and package.json (more on that in aminute)

2 EXAMPLE FUNCTIONS IN MY CUSTOMSTARTER THEME'S FUNCTIONS.PHP FILE

/** * Media - set default image link location to 'None' */

update_option('image_default_link_type','none');

/** * Always Show Kitchen Sink in WYSIWYG Editor */

function unhide_kitchensink( $args ) { $args['wordpress_adv_hidden'] = false; return $args;}

add_filter( 'tiny_mce_before_init', 'unhide_kitchensink' );

ANOTHER CUSTOM STARTER BONUSYou can bake in more accessibility feature than you'll find in

standard starters.

WHERE DO I KEEP MY STARTER THEME?There's no better place to store your starter theme than

or .GitHub Bitbucket

NOW, STARTING A NEW WORDPRESSPROJECT IS AS EASY AS:

1. Downloading WordPress and setting it up inMAMP/XAMPP/AMPPS/thing that contains 'AMP'

2. Cloning your starter theme (or a fork of it) into /wp-content/themes/

3. Logging into your new site's dashboard and activatingyour starter theme

4. Git coding! Git it? Version control jokes are super cool.

NEVER USED GIT BEFORE?NO WORRIES!

I'll be talking more about it a little later and will give yousome good starter resources.

WORKFLOWIMPROVEMENT #3

GETTING A TASK RUNNERTO DO THE BORING STUFF

SOME OF MY FAVOURITEDEVELOPMENT TASKS INCLUDE:

Remembering which browser prefixes to use in CSSCompressing my imagesLinting and minifying JS filesCreating spritesConstantly refreshing my browser

THE SOLUTION

/

WHAT ARE GRUNT ANDGULP?

Built on

$ Run on the command line

Use plugins to run tasks

GRUNT OR GULP?

DEVS LOVE TO ARGUE

I PERSONALLY USE GULP.YOU HAVE MY BLESSING TO USE

EITHER ONE.

GULP PERFORMS TASKS THAT YOUCONFIGURE IN YOUR GULPFILE.JS.

YOUR PACKAGE.JSON FILE CONTAINSA LIST OF YOUR PROJECT'S

DEPENDENCIES (AKA GULP PLUGINS).

GULP SHOULD RUN IN YOUR THEMEDIRECTORY, NOT IN THE ROOTDIRECTORY OF YOUR WP

INSTALLATION.

MY STARTER THEME'S FILES

A FEW EXAMPLE GULPTASKS

CSS TASKSgulp.task('sass', function() { return gulp.src('style/style.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6' .pipe(minifycss()) .pipe(gulp.dest(''))});

IN PLAIN ENGLISHGulp takes our Sass file...Turns it in to regular CSSRuns it through ...Minifies the CSS...And, finally, saves the CSS file.(All in a matter of milliseconds.)

Autoprefixer

CSS TASKSgulp.task('sass', function() { return gulp.src('style/style.scss') .pipe(sass()) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6' .pipe(minifycss()) .pipe(gulp.dest(''))});

AUTOPREFIXER

TAKES THIS....thing-with-columns { column-count: 3; column-gap: 40px;}

...CHECKS CANIUSE.COM FORBROWSER SUPPORT...

AND GIVES YOU THIS..thing-with-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px}

:D

HOW TO RUN GULP TASKSType gulp [taskname] in your Terminal window.

JAVASCRIPT LINTINGgulp.task('lint', function() { return gulp.src('js/script.js') .pipe(jshint()) .pipe(jshint.reporter('default'));});

JS CONCATENATION +MINIFICATION

gulp.task('scripts', function() { return gulp.src(['js/plugins.js', 'js/script.js']) .pipe(concat('script.min.js')) .pipe(uglify()) .pipe(gulp.dest('js'));});

IMAGE COMPRESSIONgulp.task('images', function() { var imgSrc = 'img/source/*'; var imgDest = 'img';

return gulp.src(imgSrc) .pipe(newer(imgDest)) .pipe(imagemin()) .pipe(gulp.dest(imgDest));

});

BUT I SAVED THE BEST TASKFOR LAST

TYPING GULP SASS, GULP LINT, GULPSCRIPTS, AND GULP IMAGES OVER ANDOVER WOULD SURE GET ANNOYING,

RIGHT?

MY BFF, THE WATCH TASK gulp.task('watch', function() { // Listen on port 35729 server.listen(35729, function (err) { if (err) { return console.log(err) };

// Watch .js files gulp.watch('js/*.js', ['lint', 'scripts']);

// Watch .scss files gulp.watch('**/*.scss', ['sass']);

// Watch image files gulp.watch('img/source/*', ['images']); }); });

WATCHES FOR YOUR CHANGES......RUNS THE APPROPRIATE TASKS...... AND USES LIVERELOAD TO

AUTOMATICALLY REFRESH YOURBROWSER.

BUT... WHAT IF I'M SCAREDOF THE COMMAND LINE?

CODEKIT (MAC ONLY)

PREPROS(MAC, WINDOWS, LINUX)

GUIS CAN BE A GREAT PLACE TO START

LIKE GULP/GRUNT, CODEKIT/PREPROSALSO WATCHES YOUR THEME

DIRECTORY

GULP RESOURCESGetting started with gulpAn Introduction to Gulp.jsUsing Gulp for WordPress Theme DevelopmentWordPress theme development with Gulp, Bower, andSass

WORKFLOWIMPROVEMENT #4CSS PREPROCESSING

♥

♥♥♥

VARIABLESPLAIN OL' CSS

.container { max-width: 980px; }

a { color: #b4c43d; font-family: 'Gotham A', 'Gotham B', sans-serif; }

VARIABLESSASS

// Fonts $gotham: 'Gotham A', 'Gotham B', sans-serif;

// Global information $pageWidth: 980px; $fontSize: 16px;

// Colours $green: #b4c43d; $teal: #73c6ba; $brown: #563016;

VARIABLESSASS

.container { max-width: $pageWidth; }

a { color: $green; font-family: $gotham; }

NESTINGPLAIN OL' CSS

.main-navigation { display: block; }

.main-navigation ul { list-style: none; } .main-navigation li { float: left; } .main-navigation a { color: #b4c43d; }

.main-navigation a:hover { color: #73c6ba; }

NESTINGSASS

.main-navigation { display: block; ul { list-style: none; } li { float: left; } a { color: $green; &:hover { color: $teal; } } }

PARTIALSDIVIDE YOUR STYLES INTO LOGICAL

SECTIONS

PARTIALS/*!Theme Name: Super Awesome ThemeTheme URI: http://fakeyfake.fakeAuthor: Dara SkolnickAuthor URI: http://daraskolnick.comDescription: The fakest theme in all the land*/

@import "partials/reset";

@import "partials/variables";

@import "partials/global";

@import "partials/forms";

@import "partials/nav";

@import "partials/pages";

@import "partials/posts";

@import "partials/widgets";

MATHPLAIN OL' CSS

.sidebar { width: 36.734693878%; /* 360px / 980px */ font-size: 1.3125em; /* 21px / 16px */ }

MATHSASS

.sidebar { width: 360px / 980px * 100%; font-size: 21px / 16px * 1em; }

MATHSASS

.sidebar { width: 360px / $pageWidth * 100%; font-size: 20px / $fontSize * 1em; }

WORKFLOWIMPROVEMENT #5DEPLOYING WITH GIT

BEFORE GIT...

...DEPLOYING SITES AND MAKINGCHANGES VIA FTP WAS A BIG PAIN.

HEY! WHAT'S WRONG WITHFTP?

SO GLAD YOU ASKED!

Sooooo slowEasy to forget which files need updatingTempting to make changes directly on the serverTherefore easy to get your local + remote copies out ofsync

DEPLOYING WITH GIT $ git add -A // adds all your changed files $ git commit -m "A message describing the changes you made" $ git push remote-name master // pushes your files to GitHub/Bitbucket/your site

Most projects of mine have three remotes: origin (Bitbucket),staging (my dev server) and live (client's server).

THIS IS AWESOME BECAUSE:Really easy (once you're used to it)Very quickNever have to remember which files you changed

OKAY, SO HOW DO I SET IT UP?

A FEW OPTIONS1. Choose a host with Git support built in (e.g. )2. If you're using a more average host, use a service like

or that FTPs changed files for you whenyou push to Git

3. If your web host allows SSH access, set it up yourself viacommand line (e.g. , )

WP Engine

Deploy Beanstalk

Hostgator Bluehost

BUT I HAVE NO IDEA HOWTO USE GIT - HOW DO I

START?

RESOURCES FOR BEGINNERS:Learn Version Control with Gitgit - the simple guidetryGit

WORDPRESS-SPECIFIC GITRESOURCES

Version Controlling WordPressA WordPress & Git WorkflowWordPress Development and Deployment With MAMP,Git and Dropbox

IF GUIS ARE MORE YOUR STYLE / (free, and can be

used with non-GitHub remotes) ($, Mac only)

GitHub for Mac GitHub for Windows

Tower

IF DEPLOYING WITH GIT SEEMS TOOCOMPLEX FOR NOW...

Consider storing your client projects in private repositoriesto start.

Builds good habits and makes it easier to collaborate withother developers.

MY BITBUCKET ACCOUNT - PUBLIC VIEW

MY BITBUCKET ACCOUNT - LOGGED IN

YOU MIGHT BE FEELING LIKE THISRIGHT NOW

FEELING OVERWHELMED?Don't worry about doing everything at onceEven the smallest workflow tweaks will save time

THANKS!ANY QUESTIONS?

@DARASKOLNICK

DARASKOLNICK.COM