child theme frameworks

Child Theme Frameworks

RYAN GREEN @RYNGRN RYANGREEN.INFO #WCNASH12

User Experience through the lens of

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

I do User Experience. And love every second.

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

Analytics Design

Interactions

Usability

Hint: it’s someone you know.

Who engages in UX?

You do! Told ya you knew.

Everyone has a unique experience.

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

What are child themes?

Straight from the horse’s mouth:

http://codex.wordpress.org/Child_Themes

“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.”

And a theme framework?

More from the codex:

http://codex.wordpress.org/Theme_Frameworks

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.

Advantages to using a framework to create your child theme?

Advantage 1:

Start with a bulletproof theme that works out of the box.

Advantage 1:

Start with a bulletproof theme that works out of the box.

Advantage 2: In event of total meltdown…

Just delete it And start over!

Advantage 3:

Roll multiple new themes from a custom theme you already created in no time!

Advantage 4:

Stays up to date with latest WordPress functionality & security.

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.

Advantage 6: Visual design principles can be baked in.

nataliedee.com

Disadvantages to using frameworks?

Disadvantage 1:

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

Disadvantage 2:

Creativity and visual design may be required in minimalist themes.

Disadvantage 3:

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

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.

So what makes a good framework?

How it feels or tastes? Best gradient? Blondest hair?

A Good Theme…

Respects the Grid Uses Modern Code

Easily Remodeled Cares About Usability

Respects the Grid

• Consistent spacing • Utilizes a common grid system • Has a clear visual hierarchy

Uses Modern Code

• HTML5 • CSS3 • jQuery • HTML5shiv / modernizr.js

Easily Remodeled

• Core functionality • Widgetized areas • Navigation areas

• Use the House Hunters approach

Cares About Usability

• Phone. Tablet. Laptop. Desktop.

• IA-friendly

• Those with disabilities in your target audience

Included Frameworks

Twenty-Ten Twenty-Eleven

Genesis

http://www.studiopress.com/themes/genesis

• Many child themes pre-made

• Tried and tested by thousands

• Standard top-nav Layout

Genesis

http://www.studiopress.com/themes/genesis

Standard Layout. Easy to customize.

Genesis

http://www.studiopress.com/themes/genesis

Standard Layout. Easy to customize.

Genesis

http://www.studiopress.com/themes/genesis

Standard Layout. Easy to customize.

Thematic

http://themeshaper.com/thematic/

• Many child themes pre-made

• Also tried and tested by thousands

• Very changeable layout

Thematic

http://themeshaper.com/thematic/

Minimalist. Extendable.

Thematic

http://themeshaper.com/thematic/

Minimalist. Extendable.

Thematic

http://themeshaper.com/thematic/

Minimalist. Extendable.

Thesis

http://diythemes.com/

• Design-forward theme

• Optimized for load-times

• Awesome typography options

Thesis

http://diythemes.com/

Powerful. Design-forward.

Thesis

http://diythemes.com/

Powerful. Design-forward.

Stumblr

http://www.eleventhemes.com/stumblr-theme/

• Tumblr-style theme

• Minimal configuration

• Very content-focused

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/

[Obligatory Cat Picture]

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.

Thanks! Any Questions?

Ryan Green @ryngrn ryangreen.info #WCNash2012

Awesome Image Credits: • Iconfinder.com • iconarchive.com • softicons.com • flickr.com • wordpress.com