Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building A WordPress Starter Development Kit

Building A WordPress Starter Development Kit

The back-end and front-end teams at Modern Tribe set out to create a WordPress starter development kit in order to speed up development and help keep uniformity among projects. So, how did we build it? Why didn’t we use “________” framework instead? What does the code look like? Is our universe real? What is true happiness? This session will attempt to answer at least 60% of these questions.



April 26, 2014



  2. @KYLE_UNZICKER Designer + Developer

  3. OVERVIEW • Building what now? • How did you build

    it? • Why didn’t you use ____ instead? • What does the code look like? • Is our universe real? • What is true happiness?
  4. WSDK? WTF? • It’s not just a starter theme •

    It’s not just a development framework. • It’s a collection of tools that allows for the creation of WordPress sites and applications • It presents a unified workflow for teams across multiple projects
  5. LET’S DO SOME WINDOW SHOPPING! • Starter Themes • _s,

    Bones, Roots • Front-end Frameworks • Bootstrap, Foundation • WP Frameworks/Libraries • Carrington Core, Timber, Bedrock
  6. WHY NOT USE ______? • We did…sort of. • We

    need solutions that are tailored to our unique set of challenges. • We need something that we can maintain ourselves. • We’re not reinventing the wheel, we’re just making one designed for the roads we drive on.
  7. OUR OBJECTIVES 1. Get a headstart on each new project

    2. Implement a collaborative process in building and maintaining commonly used code. 3. Create a consistent development approach across projects and teams. 4. Create a consistent file structure that makes it easy onboard new team members
  8. HOW WE BUILT IT • We identified our niche •

    We build large WordPress projects that must scale gracefully. • We build sites that can be accessed quickly and easily from any* device • We build sites that empower business owners to have a say in how their content is published on a daily basis. • We create admin experiences that make training simple.
  9. HOW WE BUILT IT • Teamwork! • When you start

    a project, where do you start? • What tools do you commonly use? • How do you prefer to keep your files organized?
  10. HOW WE BUILT IT • We started with a starter

    theme • Created an outline of the file structure, on paper • We gradually added build tools • Outlined a SASS structure • What mixins should we include? • What variables should we have defined? • Outlined a JS structure • How do we want to organize site wide functions and application states vs. functionality specific modules (sliders, filters, etc..) • What third-party js libs should we include?
  11. HOW WE BUILT IT • We added plugins • What

    plugins do we use on every project? • What functionality do we wind up building multiple times?

  13. WHAT’S INSIDE? • WordPress! • Mark Jaquith’s WordPress Skeleton •

    With WP as a git submodule, upgrading/ downgrading is a breeze. • Allows us to have a local-config.php file
  14. None
  15. WHAT’S INSIDE? • Debugging Plugins • Debug Bar • Debug

    Bar Console, Debug Bar Cron, Debug Bar Action Hooks, Debug Bar Extender
  16. WHAT’S INSIDE? • Optimization Plugins • Tribe Object Cache •

    Tribe Quick Profiler
  17. WHAT’S INSIDE? • Security Plugins • Tribe Security • Limit

    Login Attempts • Tribe Glomar
  18. WHAT’S INSIDE? • Admin Plugins • Tribe Branding • Tribe

    Admin UI • Tribe Admin Dashboard
  19. WHAT’S INSIDE? • Publishing Plugins • Tribe Roles • Tribe

    Panel Builder
  20. WHAT’S INSIDE? • Development Tools • Node Packaged Modules •

    Grunt Tasks • Bower packages
  21. [1] Build Tools

  22. [1] Build Tools

  23. WHAT’S INSIDE? • Starter Theme • Based off of _s

    • Barebones templates • SASS Architecture • Grid, typography, forms, admin styles • JS Architecture
  24. T [1] Theme Structure

  25. [1] Theme Structure

  26. [1] SASS Structure

  27. [1] SASS Structure

  28. [1] JS Structure

  29. [1] JS Structure

  30. [1] JS Structure

  31. [1] JS Structure

  32. WHAT’S NEXT? • Identifying code we seem to build from

    scratch every time and create reusable packages • Galleries • Mobile navigation systems
  33. WHAT’S NEXT? • Standardizing back-end workflows and approaches • Difficulties:

    • Developer preference on organization/ encapsulation can vary • Certain approaches are only appropriate for certain projects
  34. WHAT’S NEXT? • Maintenance • Monthly Reviews • Review what

    we’re currently using - are we using everything we’ve included? • Propose additions and discuss • WCTO Additions • Accessibility tools • Responsive Image Approach
  35. WHAT’S NEXT? • Diving Deepr Into Defining Best Practices •

    code style guides • Keep the documentation momentum going through the duration of the project
  36. WHAT’S NEXT? • How can we extend this philosophy to

    the rest of the agency? • Standardizing a design process • Deliverable file names • Version control • Improving our recruitment process • Fine tuning our human resources approach to on boarding new members
  37. FINAL THOUGHTS • “Don’t get intoxicated by a process or

    fall in love with tools.” - Andrew Clarke • This mindset will help both create a standardized workflow for teams and individuals, but also force you to reevaluate your process. • We didn’t add build tools to be fancy or cutting edge - we had to prove that they work for us and provide consistency and efficiency.
  38. FINAL THOUGHTS • Learn from others • Hundreds of thousands

    of people can’t be wrong (right?) • Beat your own path • No one knows your process and workflow needs better than you. • Listen to your teammates
  39. FINAL THOUGHTS • Resources • A 1000-Hour Head Start: Introducing

    the _S Theme 
 http://tiny.cc/1000hours • A Modern Designer’s Canvas
 http://tiny.cc/aclarke • 10up - Best Engineering Practices
 http://tiny.cc/10up • Grunt For People Who Think Things Like Grunt are Weird and Hard
  40. FINAL THOUGHTS • Is our universe real? • Probably. But

    maybe not. Read up on the Holographic Principle • What is true happiness? • “Instead of searching for possessions and achievements to make you happy, reflect on who you are and find authentic joy within.” - oprah.com
  41. THANKS! @kyle_unzicker