BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME

Julie Kuehl
Julie KuehlSupport Analyst at Infinite Leap
BEG, BORROW, OR STEAL?
WHERE TO BEGIN WHEN BUILDING A THEME
– P R O S P E C T I V E C L I E N T
“Do you do custom theme development?”
SOME DEFINITIONS - MY
DEFINITIONS
F I R S T …
• “...a drop-in code library
used to facilitate
development of a theme”
“A front-end web development
framework is simply a
collection of production
ready HTML/CSS/JavaScript
components that we can use
in our designs.”
F R A M E W O R K
• Requires a parent theme
Hint - many WordPress
“frameworks” are parent
themes
C H I L D T H E M E
• Scares the crap out of
you
Little to no CSS
S T A R T E R
T H E M E
– E V E R Y O N E I N T H I S R O O M
“So how do you choose?”
– E V E R Y D E V E L O P E R E V E R Y W H E R E
“It depends.”
FRAMEWORKS
PROS
• Base CSS
• Grid system
• Responsive
• Classes defined
• Typography
• Defines stuff you’d forget
about
• Broader than WordPress
FRAMEWORKS
CONS
• Not a stand-alone theme
• Usually included in a
theme’s functions.php file
or folders
• http://www.punkchip.com/w
hy-dont-you-use-bootstrap/
BOOTSTRAP
F R A M E W O R K S
BOOTSTRAP
• HTML, CSS, & JS
• 12-col grid
• XS, S, M, L screen sizes
• “Mobile-first” (mostly min-width)
• Media queries based on pixels
• LESS (ported to Sass)
BOOTSTRAP
F R A M E W O R K S
FOUNDATION
F R A M E W O R K S
FOUNDATION
• HTML, CSS, & JS
• 12-col grid
• S, M, L, XL, XXL screen sizes
• “Mobile-first” (min-widths & max-widths)
• Media queries based on ems
• Sass
FRAMEWORK COMPARISON
F R A M E W O R K S
CHILD THEME
PROS
• Quickest and easiest choice
• DO THIS rather than hack the
theme
• Parent theme can carry the
weight
• Bork the child and the parent
is OK
• Works immediately
• 80% of the work is done for
you
• Lowest cost
CHILD THEME
CONS
• At the mercy of the parent
theme’s code
• Quality
• Security
• Upgrades
• Compatibility
• Not the leanest strategy
GENESIS
P A R E N T T H E M E S
GENESIS
P A R E N T T H E M E S
JUMP START
P A R E N T T H E M E S
JUMP START
P A R E N T T H E M E S
RESPONSIVE
P A R E N T T H E M E S
RESPONSIVE
P A R E N T T H E M E S
STARTER THEME
PROS
• You control (and are
responsible for) updates
• One and done
• It’s your code
• Lean and mean code
STARTER THEME
CONS
• You control (and are
responsible for) updates
• You have to build the
theme
• 20% of the work is done for
you
• Most time intensive
_S (UNDERSCORES)
S T A R T E R T H E M E S
_S (UNDERSCORES)
S T A R T E R T H E M E S
_TK
S T A R T E R T H E M E S
_TK
S T A R T E R T H E M E S
SOME LIKE IT NEAT
S T A R T E R T H E M E S
SOME LIKE IT NEAT
S T A R T E R T H E M E S
SO HOW DO YOU
CHOOSE???
SO HOW DO YOU
CHOOSE???
QUESTIONS TO ASK
• How will it (the site /
framework / parent theme)
change?
• Upgrades?
• Redesigns?
• Improvements?
• Budget?
• Timeframe?
• What will you be asking
the site to do?
• Heavy traffic?
• Heavy database use?
• Who’s going to support
it?
• What are you comfortable
with?
– A N Y O N E W H O ’ S S T I L L W I T H M E
“So what do you recommend?”
MY ADVICE
• Research the differences
between frameworks
• Choose one parent theme
and build several child
themes on it
• When you’re ready, find a
starter theme that you like
and use it for everything
RIDE YOUR OWN RIDE
I N T H E E N D , Y O U H A V E T O
THANK
YOU!QUESTIONS?
http://www.juliekuehl.com/wcomaha-2015/
J U L I E @ J U L I E K U E H L . C O M
@ J U L I E K U E H L
s t r a i g h t f o r w a r d w e b s o l u t i o n s . c o m
@
1 of 39

Recommended

2018 12-01 rockstar developer by
2018 12-01 rockstar developer2018 12-01 rockstar developer
2018 12-01 rockstar developerChuong Nguyen
49 views16 slides
Beyond the 5 minute install by
Beyond the 5 minute installBeyond the 5 minute install
Beyond the 5 minute installChristina Workman
115 views22 slides
Don't let this happen to you by
Don't let this happen to youDon't let this happen to you
Don't let this happen to youMelody Sharp Web Design
566 views9 slides
Web Presence by
Web PresenceWeb Presence
Web PresenceSandra Fish
294 views23 slides
VanHack Fest by
VanHack FestVanHack Fest
VanHack FestIlya Brotzky
1.8K views26 slides
Client Sites: The Aftermath by
Client Sites: The AftermathClient Sites: The Aftermath
Client Sites: The AftermathWPMU DEV
610 views20 slides

More Related Content

Similar to BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME

Child Themes, Starter Themes, and Frameworks.... Oh My! by
Child Themes, Starter Themes, and Frameworks.... Oh My!Child Themes, Starter Themes, and Frameworks.... Oh My!
Child Themes, Starter Themes, and Frameworks.... Oh My!Julie Kuehl
3.9K views40 slides
Child Themes, Starter Themes, and Frameworks... Oh My! by
Child Themes, Starter Themes, and Frameworks... Oh My!Child Themes, Starter Themes, and Frameworks... Oh My!
Child Themes, Starter Themes, and Frameworks... Oh My!Julie Kuehl
576 views38 slides
Child Theme Frameworks by
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworksryngrn
2.3K views48 slides
A Future Friendly Workflow by
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly WorkflowLuke Brooker
2.1K views50 slides
Author Websites 101 by
Author Websites 101Author Websites 101
Author Websites 101Megan Cary
217 views68 slides
Approaches To WordPress Theme Development by
Approaches To WordPress Theme DevelopmentApproaches To WordPress Theme Development
Approaches To WordPress Theme DevelopmentCatch Themes
3.8K views60 slides

Similar to BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME(20)

Child Themes, Starter Themes, and Frameworks.... Oh My! by Julie Kuehl
Child Themes, Starter Themes, and Frameworks.... Oh My!Child Themes, Starter Themes, and Frameworks.... Oh My!
Child Themes, Starter Themes, and Frameworks.... Oh My!
Julie Kuehl3.9K views
Child Themes, Starter Themes, and Frameworks... Oh My! by Julie Kuehl
Child Themes, Starter Themes, and Frameworks... Oh My!Child Themes, Starter Themes, and Frameworks... Oh My!
Child Themes, Starter Themes, and Frameworks... Oh My!
Julie Kuehl576 views
Child Theme Frameworks by ryngrn
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworks
ryngrn2.3K views
A Future Friendly Workflow by Luke Brooker
A Future Friendly WorkflowA Future Friendly Workflow
A Future Friendly Workflow
Luke Brooker2.1K views
Author Websites 101 by Megan Cary
Author Websites 101Author Websites 101
Author Websites 101
Megan Cary217 views
Approaches To WordPress Theme Development by Catch Themes
Approaches To WordPress Theme DevelopmentApproaches To WordPress Theme Development
Approaches To WordPress Theme Development
Catch Themes3.8K views
The web standards gentleman: a matter of (evolving) standards) by Chris Mills
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
Chris Mills5.4K views
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13) by JenRobbins
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
JenRobbins2.5K views
Why you don't need a framework by certainstrings
Why you don't need a frameworkWhy you don't need a framework
Why you don't need a framework
certainstrings245 views
DrupalCamp Chattanooga - September 2014 - Sass 101 by Eric Sembrat
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101
Eric Sembrat880 views
Rapid and Responsive - UX to Prototype with Bootstrap by Josh Jeffryes
Rapid and Responsive - UX to Prototype with BootstrapRapid and Responsive - UX to Prototype with Bootstrap
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes9.5K views
Writing For Semantic Search by Zara Altair
Writing For Semantic SearchWriting For Semantic Search
Writing For Semantic Search
Zara Altair259 views
Writing for Semantic Search by Zara Altair
Writing for Semantic SearchWriting for Semantic Search
Writing for Semantic Search
Zara Altair1.4K views
Paytm labs soyouwanttodatascience by Adam Muise
Paytm labs soyouwanttodatasciencePaytm labs soyouwanttodatascience
Paytm labs soyouwanttodatascience
Adam Muise3.8K views
Word press theme and plugins WordCamp Presentation by Angela Samuels
Word press theme and plugins WordCamp PresentationWord press theme and plugins WordCamp Presentation
Word press theme and plugins WordCamp Presentation
Angela Samuels209 views
Let's dig into the Omega Theme! by Mediacurrent
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
Mediacurrent6.4K views
Grant Simmons - What? How? Why? Building Query Personas to Power Your Conten... by Autumn Quarantotto
Grant Simmons - What? How? Why?  Building Query Personas to Power Your Conten...Grant Simmons - What? How? Why?  Building Query Personas to Power Your Conten...
Grant Simmons - What? How? Why? Building Query Personas to Power Your Conten...
Autumn Quarantotto271 views
WordPress Themes - Finding and Choosing what is Best for you. by AndyStaple
WordPress Themes - Finding and Choosing what is Best for you.WordPress Themes - Finding and Choosing what is Best for you.
WordPress Themes - Finding and Choosing what is Best for you.
AndyStaple107 views
High quality Front-End by David Simons
High quality Front-EndHigh quality Front-End
High quality Front-End
David Simons953 views

More from Julie Kuehl

A Tour Through The WordPress Database by
A Tour Through The WordPress DatabaseA Tour Through The WordPress Database
A Tour Through The WordPress DatabaseJulie Kuehl
85 views49 slides
CSS Sanity with Sass: The Inverted Triangle Approach by
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachJulie Kuehl
1.2K views22 slides
CSS Sanity with Sass and the Inverted Triangle Approach by
CSS Sanity with Sass and the Inverted Triangle ApproachCSS Sanity with Sass and the Inverted Triangle Approach
CSS Sanity with Sass and the Inverted Triangle ApproachJulie Kuehl
642 views22 slides
Life as a Digital Nomad by
Life as a Digital NomadLife as a Digital Nomad
Life as a Digital NomadJulie Kuehl
10.4K views16 slides
WordPress and Podcasts by
WordPress and PodcastsWordPress and Podcasts
WordPress and PodcastsJulie Kuehl
1.5K views23 slides
Anatomy and Architecture of a WordPress Theme by
Anatomy and Architecture of a WordPress ThemeAnatomy and Architecture of a WordPress Theme
Anatomy and Architecture of a WordPress ThemeJulie Kuehl
3K views17 slides

More from Julie Kuehl(9)

A Tour Through The WordPress Database by Julie Kuehl
A Tour Through The WordPress DatabaseA Tour Through The WordPress Database
A Tour Through The WordPress Database
Julie Kuehl85 views
CSS Sanity with Sass: The Inverted Triangle Approach by Julie Kuehl
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
Julie Kuehl1.2K views
CSS Sanity with Sass and the Inverted Triangle Approach by Julie Kuehl
CSS Sanity with Sass and the Inverted Triangle ApproachCSS Sanity with Sass and the Inverted Triangle Approach
CSS Sanity with Sass and the Inverted Triangle Approach
Julie Kuehl642 views
Life as a Digital Nomad by Julie Kuehl
Life as a Digital NomadLife as a Digital Nomad
Life as a Digital Nomad
Julie Kuehl10.4K views
WordPress and Podcasts by Julie Kuehl
WordPress and PodcastsWordPress and Podcasts
WordPress and Podcasts
Julie Kuehl1.5K views
Anatomy and Architecture of a WordPress Theme by Julie Kuehl
Anatomy and Architecture of a WordPress ThemeAnatomy and Architecture of a WordPress Theme
Anatomy and Architecture of a WordPress Theme
Julie Kuehl3K views
All The Software That Isn't WordPress by Julie Kuehl
All The Software That Isn't WordPressAll The Software That Isn't WordPress
All The Software That Isn't WordPress
Julie Kuehl1.4K views
Startup Weekend Fargo 2014 - Breaking Bread by Julie Kuehl
Startup Weekend Fargo 2014 - Breaking BreadStartup Weekend Fargo 2014 - Breaking Bread
Startup Weekend Fargo 2014 - Breaking Bread
Julie Kuehl3.2K views
Learning WordPress Sucks by Julie Kuehl
Learning WordPress SucksLearning WordPress Sucks
Learning WordPress Sucks
Julie Kuehl1.9K views

Recently uploaded

Voice Logger - Telephony Integration Solution at Aegis by
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at AegisNirmal Sharma
31 views1 slide
Five Things You SHOULD Know About Postman by
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About PostmanPostman
30 views43 slides
STPI OctaNE CoE Brochure.pdf by
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdfmadhurjyapb
13 views1 slide
Design Driven Network Assurance by
Design Driven Network AssuranceDesign Driven Network Assurance
Design Driven Network AssuranceNetwork Automation Forum
15 views42 slides
PRODUCT LISTING.pptx by
PRODUCT LISTING.pptxPRODUCT LISTING.pptx
PRODUCT LISTING.pptxangelicacueva6
13 views1 slide
Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
237 views20 slides

Recently uploaded(20)

Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma31 views
Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman30 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb13 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10237 views
Empathic Computing: Delivering the Potential of the Metaverse by Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Mark Billinghurst476 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi126 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker33 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software257 views

BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME

  • 1. BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME
  • 2. – P R O S P E C T I V E C L I E N T “Do you do custom theme development?”
  • 3. SOME DEFINITIONS - MY DEFINITIONS F I R S T …
  • 4. • “...a drop-in code library used to facilitate development of a theme” “A front-end web development framework is simply a collection of production ready HTML/CSS/JavaScript components that we can use in our designs.” F R A M E W O R K
  • 5. • Requires a parent theme Hint - many WordPress “frameworks” are parent themes C H I L D T H E M E
  • 6. • Scares the crap out of you Little to no CSS S T A R T E R T H E M E
  • 7. – E V E R Y O N E I N T H I S R O O M “So how do you choose?”
  • 8. – E V E R Y D E V E L O P E R E V E R Y W H E R E “It depends.”
  • 9. FRAMEWORKS PROS • Base CSS • Grid system • Responsive • Classes defined • Typography • Defines stuff you’d forget about • Broader than WordPress
  • 10. FRAMEWORKS CONS • Not a stand-alone theme • Usually included in a theme’s functions.php file or folders • http://www.punkchip.com/w hy-dont-you-use-bootstrap/
  • 11. BOOTSTRAP F R A M E W O R K S
  • 12. BOOTSTRAP • HTML, CSS, & JS • 12-col grid • XS, S, M, L screen sizes • “Mobile-first” (mostly min-width) • Media queries based on pixels • LESS (ported to Sass)
  • 13. BOOTSTRAP F R A M E W O R K S
  • 14. FOUNDATION F R A M E W O R K S
  • 15. FOUNDATION • HTML, CSS, & JS • 12-col grid • S, M, L, XL, XXL screen sizes • “Mobile-first” (min-widths & max-widths) • Media queries based on ems • Sass
  • 16. FRAMEWORK COMPARISON F R A M E W O R K S
  • 17. CHILD THEME PROS • Quickest and easiest choice • DO THIS rather than hack the theme • Parent theme can carry the weight • Bork the child and the parent is OK • Works immediately • 80% of the work is done for you • Lowest cost
  • 18. CHILD THEME CONS • At the mercy of the parent theme’s code • Quality • Security • Upgrades • Compatibility • Not the leanest strategy
  • 19. GENESIS P A R E N T T H E M E S
  • 20. GENESIS P A R E N T T H E M E S
  • 21. JUMP START P A R E N T T H E M E S
  • 22. JUMP START P A R E N T T H E M E S
  • 23. RESPONSIVE P A R E N T T H E M E S
  • 24. RESPONSIVE P A R E N T T H E M E S
  • 25. STARTER THEME PROS • You control (and are responsible for) updates • One and done • It’s your code • Lean and mean code
  • 26. STARTER THEME CONS • You control (and are responsible for) updates • You have to build the theme • 20% of the work is done for you • Most time intensive
  • 27. _S (UNDERSCORES) S T A R T E R T H E M E S
  • 28. _S (UNDERSCORES) S T A R T E R T H E M E S
  • 29. _TK S T A R T E R T H E M E S
  • 30. _TK S T A R T E R T H E M E S
  • 31. SOME LIKE IT NEAT S T A R T E R T H E M E S
  • 32. SOME LIKE IT NEAT S T A R T E R T H E M E S
  • 33. SO HOW DO YOU CHOOSE???
  • 34. SO HOW DO YOU CHOOSE???
  • 35. QUESTIONS TO ASK • How will it (the site / framework / parent theme) change? • Upgrades? • Redesigns? • Improvements? • Budget? • Timeframe? • What will you be asking the site to do? • Heavy traffic? • Heavy database use? • Who’s going to support it? • What are you comfortable with?
  • 36. – A N Y O N E W H O ’ S S T I L L W I T H M E “So what do you recommend?”
  • 37. MY ADVICE • Research the differences between frameworks • Choose one parent theme and build several child themes on it • When you’re ready, find a starter theme that you like and use it for everything
  • 38. RIDE YOUR OWN RIDE I N T H E E N D , Y O U H A V E T O
  • 39. THANK YOU!QUESTIONS? http://www.juliekuehl.com/wcomaha-2015/ J U L I E @ J U L I E K U E H L . C O M @ J U L I E K U E H L s t r a i g h t f o r w a r d w e b s o l u t i o n s . c o m @

Editor's Notes

  1. Media queries based on pixels
  2. XS < 768px S >= 768px M >= 992px L >= 1200px
  3. Media queries based on ems
  4. S < 40em = 640px M = 40-64em = 641-1024px L = 64-90em = 1025-1440px XL = 90-120em = 1441-1920px XXL > 120em = 1921px +