A look at child themes and frameworks from a UX perspective.

1. Child Theme Frameworks
through the lens of
User Experience
RYAN GREEN @RYNGRN RYANGREEN.INFO #WCNASH12

2. Hi, I’m Ryan.
Also known as Ryan Green.

3. I do User Experience.
And love every second.

4. UX… what does it mean?
No, it’s not double rainbow intense.

5. Interactions
Design Analytics
Usability

6. Who engages in UX?
Hint: it’s someone you know.

7. You do!
Told ya you knew.

8. Everyone has a unique
experience.

9. Child Themes
Who. What. When. How. Etc. WTF.

10. What are child themes?
Straight from the horse’s mouth:
“A WordPress child theme is a theme that inherits
the functionality of another theme, called the parent
theme, and allows you to modify, or add to, the
functionality of that parent theme.”
http://codex.wordpress.org/Child_Themes

11. And a theme framework?
More from the codex:
A stand-alone base/starter theme that is intended
either to be forked into another theme, or else be
used as a Parent Theme template.
http://codex.wordpress.org/Theme_Frameworks

12. Advantages to using a framework
to create your child theme?

13. Advantage 1:
Start with a
bulletproof theme
that works out of the
box.

14. Advantage 1:
Start with a
bulletproof theme
that works out of the
box.

15. Advantage 2:
In event of total meltdown…

16. Just delete it
And start over!

17. Advantage 3:
Roll multiple new
themes from a
custom theme you
already created in no
time!

18. Advantage 4:
Stays up to date with
latest WordPress
functionality &
security.

19. Advantage 5:
You don’t need to know PHP!
The learning curve for developing new theme
elements, moving or adding widgetized areas,
and major architecture changes is steep.

20. Advantage 6:
Visual design principles can be baked in.
nataliedee.com

21. Disadvantages to using
frameworks?

22. Disadvantage 1:
Commitment! Picking a schema means you are
locked-in to learning it and using it.

23. Disadvantage 2:
Creativity and visual
design may be required
in minimalist themes.

24. Disadvantage 3:
Code bloat. When
a theme tries to be
everything to all
people, it can
make for big files!

25. When to Use a Framework
• When you are unfamiliar with PHP
• When a solid codebase and security
is crucial
• When duplicating a current theme
with minor changes.

26. So what makes a good
framework?
How it feels or tastes? Best gradient? Blondest hair?

27. A Good Theme…
Respects the Grid Uses Modern Code
Easily Remodeled Cares About Usability

28. Respects the Grid
• Consistent spacing
• Utilizes a common grid system
• Has a clear visual hierarchy

29. Uses Modern Code
• HTML5
• CSS3
• jQuery
• HTML5shiv / modernizr.js

30. Easily Remodeled
• Core functionality
• Widgetized areas
• Navigation areas
• Use the House Hunters approach

31. Cares About Usability
• Phone. Tablet. Laptop. Desktop.
• IA-friendly
• Those with disabilities in your
target audience

32. Included Frameworks
Twenty-Ten Twenty-Eleven

33. Genesis http://www.studiopress.com/themes/genesis
• Many child themes pre-made
• Tried and tested by thousands
• Standard top-nav Layout

34. Genesis http://www.studiopress.com/themes/genesis
Standard Layout. Easy to customize.

35. Genesis http://www.studiopress.com/themes/genesis
Standard Layout. Easy to customize.

36. Genesis http://www.studiopress.com/themes/genesis
Standard Layout. Easy to customize.

37. Thematic http://themeshaper.com/thematic/
• Many child themes pre-made
• Also tried and tested by thousands
• Very changeable layout

38. Thematic http://themeshaper.com/thematic/
Minimalist. Extendable.

39. Thematic http://themeshaper.com/thematic/
Minimalist. Extendable.

40. Thematic http://themeshaper.com/thematic/
Minimalist. Extendable.

41. Thesis http://diythemes.com/
• Design-forward theme
• Optimized for load-times
• Awesome typography options

42. Thesis http://diythemes.com/
Powerful. Design-forward.

43. Thesis http://diythemes.com/
Powerful. Design-forward.

44. Stumblr http://www.eleventhemes.com/stumblr-theme/
• Tumblr-style theme
• Minimal configuration
• Very content-focused

45. Barebones / Responsive
• Skeleton
http://demos.simplethemes.com/skeleton/
• Starkers
(Original) https://github.com/viewportindustries/Starkers
(1140px version) http://www.thedotmack.com/2011/07/19/1140-fluid-starkers-wordpress-theme/
• Whiteboard
http://whiteboardframework.com/
• Roots
http://www.rootstheme.com/
• Bones
(Mobile-First) http://themble.com/bones/

46. [Obligatory Cat Picture]

47. Wrap Up
1. Every user that visits your site has an experience. Make sure it’s
a good one.
2. Theme frameworks are your quickest ticket to solid backend code and
an updatable (aka: more secure) theme.
3. Know your content. Know your audience. Determine whether a child
theme is the route to take.
4. Theme is Grid-minded, Coded modernly, Easily adaptable, Usable.

48. Thanks!
Any Questions?
Awesome Image Credits:
Ryan Green
• Iconfinder.com
@ryngrn • iconarchive.com
ryangreen.info • softicons.com
#WCNash2012 • flickr.com
• wordpress.com