BUILDING A
WORDPRESS STARTER
DEVELOPMENT KIT
BACK TO SQUARE ONE:
Slide 2
Slide 2 text
@KYLE_UNZICKER
Designer + Developer
Slide 3
Slide 3 text
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?
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
LET’S DO SOME
WINDOW SHOPPING!
• Starter Themes
• _s, Bones, Roots
• Front-end Frameworks
• Bootstrap, Foundation
• WP Frameworks/Libraries
• Carrington Core, Timber, Bedrock
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
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.
Slide 9
Slide 9 text
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?
Slide 10
Slide 10 text
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?
Slide 11
Slide 11 text
HOW WE BUILT IT
• We added plugins
• What plugins do we use on every project?
• What functionality do we wind up building
multiple times?
Slide 12
Slide 12 text
SO, LET’S GET BACK TO
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
WHAT’S INSIDE?
• Debugging Plugins
• Debug Bar
• Debug Bar Console, Debug Bar Cron,
Debug Bar Action Hooks, Debug Bar
Extender
WHAT’S INSIDE?
• Starter Theme
• Based off of _s
• Barebones templates
• SASS Architecture
• Grid, typography, forms, admin styles
• JS Architecture
Slide 24
Slide 24 text
T
[1] Theme Structure
Slide 25
Slide 25 text
[1] Theme Structure
Slide 26
Slide 26 text
[1] SASS Structure
Slide 27
Slide 27 text
[1] SASS Structure
Slide 28
Slide 28 text
[1] JS Structure
Slide 29
Slide 29 text
[1] JS Structure
Slide 30
Slide 30 text
[1] JS Structure
Slide 31
Slide 31 text
[1] JS Structure
Slide 32
Slide 32 text
WHAT’S NEXT?
• Identifying code we seem to build
from scratch every time and create
reusable packages
• Galleries
• Mobile navigation systems
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
WHAT’S NEXT?
• Diving Deepr Into Defining Best
Practices
• code style guides
• Keep the documentation momentum going
through the duration of the project
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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.
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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
http://tiny.cc/coyier
Slide 40
Slide 40 text
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