BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME
-
Upload
julie-kuehl -
Category
Technology
-
view
2.068 -
download
2
Transcript of BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME
![Page 1: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/1.jpg)
BEG, BORROW, OR STEAL?WHERE TO BEGIN WHEN BUILDING A THEME
![Page 2: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/2.jpg)
– P R OSP E C T I V E C L I E N T
“Do you do custom theme development?”
![Page 3: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/3.jpg)
SOME DEFINITIONS - MY DEFINITIONS
F IR S T …
![Page 4: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/4.jpg)
• “...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.”
FRA M E WO R K
![Page 5: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/5.jpg)
• Requires a parent theme
Hint - many WordPress “frameworks” are parent themes
CH I L D T H EM E
![Page 6: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/6.jpg)
• Scares the crap out of you
Little to no CSS
S TA RT ER T H E M E
![Page 7: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/7.jpg)
–EV E RYON E I N T H I S R OOM
“So how do you choose?”
![Page 8: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/8.jpg)
– EV ERY DEV ELOP E R E VE RY W HER E
“It depends.”
![Page 9: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/9.jpg)
FRAMEWORKSPROS
• Base CSS • Grid system• Responsive• Classes defined• Typography
• Defines stuff you’d forget about
• Broader than WordPress
![Page 10: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/10.jpg)
FRAMEWORKSCONS
• Not a stand-alone theme
• Usually included in a theme’s functions.php file or folders
• http://www.punkchip.com/why-dont-you-use-bootstrap/
![Page 11: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/11.jpg)
BOOTSTRAPFRA M E W O R K S
![Page 12: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/12.jpg)
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)
![Page 13: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/13.jpg)
BOOTSTRAPFRA M E W O R K S
![Page 14: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/14.jpg)
FOUNDATIONFRA M E W O R K S
![Page 15: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/15.jpg)
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
![Page 16: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/16.jpg)
FRAMEWORK COMPARISON
FRA M E W O R K S
![Page 17: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/17.jpg)
CHILD THEMEPROS• 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
![Page 18: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/18.jpg)
CHILD THEMECONS
• At the mercy of the parent theme’s code • Quality• Security• Upgrades• Compatibility
• Not the leanest strategy
![Page 19: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/19.jpg)
GENESISPA R E NT T H E M E S
![Page 20: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/20.jpg)
GENESISPA R E NT T H E M E S
![Page 21: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/21.jpg)
JUMP STARTPA R E NT T H E M E S
![Page 22: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/22.jpg)
JUMP STARTPA R E NT T H E M E S
![Page 23: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/23.jpg)
RESPONSIVEPA R E NT T H E M E S
![Page 24: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/24.jpg)
RESPONSIVEPA R E NT T H E M E S
![Page 25: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/25.jpg)
STARTER THEMEPROS
• You control (and are responsible for) updates
• One and done• It’s your code• Lean and mean code
![Page 26: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/26.jpg)
STARTER THEMECONS
• You control (and are responsible for) updates
• You have to build the theme
• 20% of the work is done for you
• Most time intensive
![Page 27: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/27.jpg)
_S (UNDERSCORES)STA RT ER T H E M E S
![Page 28: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/28.jpg)
_S (UNDERSCORES)STA RT ER T H E M E S
![Page 29: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/29.jpg)
_TKSTA RT ER T H E M E S
![Page 30: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/30.jpg)
_TKSTA RT ER T H E M E S
![Page 31: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/31.jpg)
SOME LIKE IT NEATSTA RT ER T H E M E S
![Page 32: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/32.jpg)
SOME LIKE IT NEATSTA RT ER T H E M E S
![Page 33: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/33.jpg)
SO HOW DO YOU CHOOSE???
![Page 34: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/34.jpg)
SO HOW DO YOU CHOOSE???
![Page 35: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/35.jpg)
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?
![Page 36: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/36.jpg)
– AN YON E WH O’ S S T I L L W I T H M E
“So what do you recommend?”
![Page 37: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/37.jpg)
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
![Page 38: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/38.jpg)
RIDE YOUR OWN RIDEIN T H E EN D , YO U H AV E T O
![Page 39: BEG, BORROW, OR STEAL? WHERE TO BEGIN WHEN BUILDING A THEME](https://reader031.fdocuments.us/reader031/viewer/2022030311/58ef305c1a28ab44098b45df/html5/thumbnails/39.jpg)
THANK YOU!QUESTIONS?http://www.juliekuehl.com/wcomaha-2015/
J UL I E@J UL IE KUE HL .C OM@J UL I EKUE H L
s t r a i g h t f o r w a rd w e b s o l u t i o n s . c o m@