levelling up your wordpress development workflow
TRANSCRIPT
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.
1. YOU CAN AUTOMATE LOTSOF NON-FUN TASKS
WHO LOVES COMPRESSING IMAGES,LINTING CODE, AND CREATING
SPRITES?ANYONE?
WORDPRESS DEV IS GREAT,OF COURSE...
BUT HAVING THE TIME TO PURSUEOTHER THINGS IN LIFE IS ALSO PRETTY
GREAT.
SECOND DISCLAIMERMOST OF THE NOT-SO-GOOD DEVPRACTICES I'LL TALK ABOUT COMEFROM FIRST HAND EXPERIENCE.
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.
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.
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
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
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
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.
SOME OF MY FAVOURITEDEVELOPMENT TASKS INCLUDE:
Remembering which browser prefixes to use in CSSCompressing my imagesLinting and minifying JS filesCreating spritesConstantly refreshing my browser
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(''))});
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
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.
GULP RESOURCESGetting started with gulpAn Introduction to Gulp.jsUsing Gulp for WordPress Theme DevelopmentWordPress theme development with Gulp, Bower, andSass
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;
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; } } }
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 */ }
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
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
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.
FEELING OVERWHELMED?Don't worry about doing everything at onceEven the smallest workflow tweaks will save time
THANKS!ANY QUESTIONS?
@DARASKOLNICK
DARASKOLNICK.COM