Levelling up your WordPress development workflow

Download Levelling up your WordPress development workflow

Post on 15-Jul-2015

474 views

Category:

Technology

2 download

Embed Size (px)

TRANSCRIPT

  • LEVELLINGUPYOURWORDPRESSDEVELOPMENT

    WORKFLOWWITH@DARASKOLNICK

  • HI,I'MDARA.NICETOMEETYOU!

    I'm @daraskolnick basically everywhere on the Internet.

  • ALITTLEABOUTME.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!

  • THISTALKISAIMEDAT:WORDPRESSTHEMEDEVELOPERSWHOCREATECUSTOM(PARENT)

    THEMESSuggestions can apply to either solo devs or teams.

  • SO,WHYISHAVINGAGOODWORKFLOWSOIMPORTANT?

  • 1.YOUCANAUTOMATELOTSOFNON-FUNTASKS

    WHOLOVESCOMPRESSINGIMAGES,LINTINGCODE,ANDCREATING

    SPRITES?ANYONE?

  • 2.AGOODWORKFLOWSAVESYOUTIME.

  • TIME=$$

  • BUTMOREIMPORTANTLY...TIME=FREEDOM

  • WORDPRESSDEVISGREAT,OFCOURSE...

    BUTHAVINGTHETIMETOPURSUEOTHERTHINGSINLIFEISALSOPRETTY

    GREAT.

  • 3.YOUCANAPPLYTHEBEST,SEXIESTFRONT-ENDDEV

    PRACTICESTOWORDPRESSTHEMING

  • IFYOU'VEEVERWONDERED...

  • IFYOU'VEEVERWONDERED...

    THENTHISTALKISFORYOU!

  • FIRSTDISCLAIMERTHERE'SNORIGHTWAYTODOFRONT-ENDDEVELOPMENTTHISISJUST

    ONEWAY.

  • DEVSHAVEALOTOFOPINIONS/FEELSABOUTTHE"RIGHT"

    WAYTODOTHINGS

  • DON'TBEINTIMIDATEDBYNEEDINGTOUSETHE"RIGHT"TOOLSSEEWHAT

    WORKSBESTFORYOU.

  • SECONDDISCLAIMERMOSTOFTHENOT-SO-GOODDEVPRACTICESI'LLTALKABOUTCOMEFROMFIRSTHANDEXPERIENCE.

  • WORKFLOWIMPROVEMENT#1DEVELOPINGLOCALLY

  • WHYDEVELOPLOCALLY?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.

  • IFYOU'RESTILLDOINGTHIS...

  • IFYOU'RESTILLDOINGTHIS...

    WENEEDTOTALK.

  • MYLOCALDEVPROCESS: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.

  • MYLOCALDEVPROCESS: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.

  • MYLOCALDEVENVIRONMENTOFCHOICE:

    (Mac + Windows)MAMP/MAMP Pro

  • OTHERSIMILAROPTIONS: (Mac, Windows and Linux) (Mac, Windows, Linux)

    XAMPPAMPPS

  • WHATMAMPDOESthe "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)

  • SETTINGUPYOURFIRSTLOCALWORDPRESSSITEInstalling 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

    USINGASTARTERTHEME

  • TIME-WASTINGWAYSTOSTARTCUSTOMTHEMES

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

  • TIMEWASTER#1:CODINGYOURTHEMEFROMSCRATCH

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

  • TIMEWASTERS#2+3:USINGAFINISHEDTHEME(YOURSOR

    WP'S)ASYOURSTARTERTHEMELots 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

  • THEBETTERWAY:USEAREALSTARTERTHEME!

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

  • AFEWPOPULARSTARTERTHEMES (made by Automattic)Underscores

    RootsBones

  • UNDERSCORESSTARTSOFFLIKETHIS:

  • BASICFILESTRUCTUREISTAKENCAREOFFORYOU.

  • AGOODSTARTERTHEMEWILLALSOTAKECAREOFTHINGSLIKE:

    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

  • STARTERTHEMESFTW!THETEDIOUSSTUFFISDONEFORYOUANDTHERE'SLITTLETONOSTYLING

    TOUNDO.

  • WHATIFITOLDYOUWECOULDTAKETHATONESTEPFURTHER?

  • THEBESTSTARTERTHEME...ISYOUROWN,PERSONALIZEDSTARTER

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

  • MYSTARTERTHEMEISBASEDONUNDERSCORESANDCONTAINS:

    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)

  • 2EXAMPLEFUNCTIONSINMYCUSTOMSTARTERTHEME'SFUNCTIONS.PHPFILE

    /** * 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' );

  • ANOTHERCUSTOMSTARTERBONUSYou can bake in more accessibility feature than you'll find in

    standard starters.

  • WHEREDOIKEEPMYSTARTERTHEME?There's no better place to store your starter theme than

    or .GitHub Bitbucket

  • NOW,STARTINGANEWWORDPRESSPROJECTISASEASYAS:

    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.

  • NEVERUSEDGITBEFORE?NOWORRIES!

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

  • WORKFLOWIMPROVEMENT#3

    GETTINGATASKRUNNERTODOTHEBORINGSTUFF

  • SOMEOFMYFAVOURITEDEVELOPMENTTASKSINCLUDE:

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

  • THESOLUTION

    /

  • WHATAREGRUNTANDGULP?

    Built on

    $ Run on the command line

    Use plugins to run tasks

  • GRUNTORGULP?

  • DEVSLOVETOARGUE

  • IPERSONALLYUSEGULP.YOUHAVEMYBLESSINGTOUSE

    EITHERONE.

  • GULPPERFORMSTASKSTHATYOUCONFIGUREINYOURGULPFILE.JS.

  • YOURPACKAGE.JSONFILECONTAINSALISTOFYOURPROJECT'S

    DEPENDENCIES(AKAGULPPLUGINS).

  • GULPSHOULDRUNINYOURTHEMEDIRECTORY,NOTINTHEROOT

    DIRECTORYOFYOURWPINSTALLATION.

  • MYSTARTERTHEME'SFILES

  • AFEWEXAMPLEGULPTASKS

  • CSSTASKSgulp.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(''))});

  • INPLAINENGLISHGulp 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

  • CSSTASKSgulp.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

  • TAKESTHIS....thing-with-columns { column-count: 3; column-gap: 40px;}

    ...CHECKSCANIUSE.COMFORBROWSERSUPPORT...

  • ANDGIVESYOUTHIS..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

  • HOWTORUNGULPTASKSType gulp [taskname] in your Terminal window.

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

  • JSCONCATENATION+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'));});

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

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

    });

  • BUTISAVEDTHEBESTTASKFORLAST

    TYPINGGULP SASS,GULP LINT,GULPSCRIPTS,ANDGULP IMAGESOVERANDOVERWOULDSUREGETANNOYING,

    RIGHT?

  • MYBFF,THEWATCHTASK 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']); }); });

  • WATCHESFORYOURCHANGES......RUNSTHEAPPROPRIATETASKS...

    ...ANDUSESLIVERELOADTOAUTOMATICALLYREFRESHYOUR

    BROWSER.

  • BUT...WHATIFI'MSCAREDOFTHECOMMANDLINE?

  • CODEKIT(MACONLY)

  • PREPROS(MAC,WINDOWS,LINUX)

  • GUISCANBEAGREATPLACETOSTART

  • LIKEGULP/GRUNT,CODEKIT/PREPROSALSOWATCHESYOURTHEME

    DIRECTORY

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

  • WORKFLOWIMPROVEMENT#4CSSPREPROCESSING

  • VARIABLESPLAINOL'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; }

  • NESTINGPLAINOL'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; } } }

  • PARTIALSDIVIDEYOURSTYLESINTOLOGICAL

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

  • MATHPLAINOL'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#5DEPLOYINGWITHGIT

  • BEFOREGIT...

    ...DEPLOYINGSITESANDMAKINGCHANGESVIAFTPWASABIGPAIN.

  • HEY!WHAT'SWRONGWITHFTP?

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

  • DEPLOYINGWITHGIT $ 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).

  • THISISAWESOMEBECAUSE:Really easy (once you're used to it)Very quickNever have to remember which files you changed

  • OKAY,SOHOWDOISETITUP?

  • AFEWOPTIONS1. 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

  • BUTIHAVENOIDEAHOWTOUSEGIT-HOWDOI

    START?

  • RESOURCESFORBEGINNERS:Learn Version Control with Gitgit - the simple guidetryGit

  • WORDPRESS-SPECIFICGITRESOURCES

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

  • IFGUISAREMOREYOURSTYLE / (free, and can be

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

    GitHub for Mac GitHub for Windows

    Tower

  • IFDEPLOYINGWITHGITSEEMSTOOCOMPLEXFORNOW...

    Consider storing your client projects in private repositoriesto start.

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

  • MYBITBUCKETACCOUNT-PUBLICVIEW

  • MYBITBUCKETACCOUNT-LOGGEDIN

  • YOUMIGHTBEFEELINGLIKETHISRIGHTNOW

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

  • THANKS!ANYQUESTIONS?

    @DARASKOLNICK

    DARASKOLNICK.COM

Recommended

View more >