WordPress Theme Selection Field Guide

WordCamp Milwaukee June 2013

@GloriaAntonelli #wcmke

WordPress Theme SelectionField Guide

by Gloria Antonelli

Thursday, June 6, 13



about me artistdesignertechnologisttrainerconsultantweb strategistwordpress developer




stuff i know

htmlcss

phpwordpress

web standards

uxuiseographic designcontent strategyusability testinginformation architecture




session overview ux standardsbefore theme selectionWordPress skill set theme selection optionstheme qualitiestheme trends




How WordPress Works

Plugin

. ThemeWordPress

Core

PluginPlugin




documentation

developmentdesigndocumentation

WP GOLD STANDARDS




WordPress ThemeEXPECTATIONS

Code StandardsHTML5, CSS3 & Responsive

Design Typography &Minimalist layouts

Documentation

User instructions




“Don’t Make me Think”

www.sensible.com/

Do-It-Yourself Guide to Finding and Fixing Usability Problems

A Common Sense Approach to Web Usability

Steve Krug


http://www.sensible.com/

http://www.sensible.com/



Before Theme Selection





• Plan Website Goals & Objectives






• Content Strategy Development







• Forecast Future Needs








• Features & Customization








• Features & Customization

• Evaluate Your Ability & Time




Content Strategy what content buckets do you need?





• Define the Project





• Define the Project Evaluate current content





• Define the Project Evaluate current content Outline new content






• Design Layout






• Design Layout Simple mockup or Wireframes






• Design Layout Simple mockup or Wireframes

• Develop Content




Multiple Learning Layers

Essential Advanced WordPress Admin UI HTML5 Theme Functionality CSS3 Theme Options PHP Theme Widgets JQUERY

“Learn” image Aaron Schmidthttp://www.flickr.com/photos/aaronschmidt/


http://www.flickr.com/photos/aaronschmidt/

http://www.flickr.com/photos/aaronschmidt/



Users ProcessPlugin Selection

Set upTheme

ModifyTheme> > >

read docssearch webview videosview tutorials

Theme Selection

review on webselect & hopefor the best

read docssearch webview videosview tutorials

search webread reviewsread docssearch web

repe

at a

s ne

eded>




Team of Developersmany hats, jobs & skillsCODE DESIGN UI UX IA

One person wears all the hats.

Who makes Themes?

“Hat man” Andrew Warrenflickr.com/photos/27273053@N05/4507100640/


http://www.flickr.com/photos/27273053@N05/4507100640/

http://www.flickr.com/photos/27273053@N05/4507100640/



Theme Selection Paths

Free From WordPress.org

Randomly on the Web (danger)

Buy Commercial list on WordPress.org

Commercial Theme Shops

Theme Marketplace Sites

Build Hire Developer/Designer

Do It Yourself




Random Themes from WebNot Recommend

“Free WordPress Themes” Google results may not be safe or reputable.

May have malicious code and hidden spam links.

Little support or documentation. You’ve been warned!




WordPress.org 1,763 Free Themes

WordPress Theme Review Process

Theme Unit Test

Ratings& Stats

Updates

SupportForum




Theme Stats

Reflects how many times downloaded not how many are in use.

May be a good indicator for a quality theme.




Commercial Theme on WordPress.org

65 ShopsListed




Commercial Theme Companiesalso called “Premium”

• Membership-Based • Renewal (monthly/annually ) for

updates, support & new releases• All Theme Packages - Lifetime Support• Startup Fee• Niche themes (Hermes Themes $200)• Pay-What-You-Want

Generally commercial themes offer good customization, quality and support.




Theme MarketPlace

• Market for developers/designers selling their themes.

• Support directly from the developer not the marketplace.

• Choose carefully - some ignore WP Standards & best practices.

• Read user feedback on authors & themes




Theme Marketplace Issues

“Many of us are tired of fixing issues with or coming up with workarounds for ThemeForest themes.”Justin Tadlock

“…QUIT GLOBALLY REPLACING CONTENT OUTPUT AND BREAKING OTHER PEOPLES CODE…”

@carlhancock tweet started that discussion.

Carl Hancock


http://justintadlock.com/archives/2012/09/17/themeforest-an-experiment

http://justintadlock.com/archives/2012/09/17/themeforest-an-experiment

http://twitter.com/carlhancock

http://twitter.com/carlhancock

https://twitter.com/carlhancock






“Theme Arms Race” Problem

Theme authors are marketing to make more money. They are packing as much into themes as they can to make a sale.

• Feature Bloat• Baked in Shortcodes & Features• Kitchen Sink Option Pages

wordpress.tv/2011/09/29/brandon-ryan-jones-the-anarchist-and-the-patriot/


http://wordpress.tv/2011/09/29/brandon-ryan-jones-the-anarchist-and-the-patriot/






When You Can’t Do It Yourself

Growing developer community - choose wisely.

Pick a theme/framework that has an eco system supporting it.

e.g. Many pitch themselves as a Genesis theme developer.




Building a Theme

http://evansolomon.me/notes/premium-themes-are-a-lie/

In my experience, most themes are not of high quality anyway. The only true way to have

high quality website code is to hand build it. By high quality I mean standards and

accessible compliant, page speed optimized, SEO optimized, minified, free of divitis, and

many other aspects that make website code a high standard. I have rarely seen any

theme available online that is of such high standards, I get the impression people just

want to build themes quick and sell cheap. That’s why we hand build all our websites and

stay away from any free or “premium”.

Laurence CopeAugust 16, 2012






types of themesout of the boxone size !ts alldrag & drop interfaceparent/child frameworksstarter themescustom themes




One Size Fits All Option Page




Packed Full of Features● custom layout templates ● advanced support for custom

post types ● customizable drop-down menus ● featured

sliders ● tabbed sidebars ● magazine layout ● enhanced

widgets for Twitter, Flickr, Google ● translations in many

languages ● RTL language support ● WP 3.0 Menus ●

Custom Post Types & Custom Taxonomies integration ● 19

widget areas ● one-column, two-column and three-column

fixed-width & flexible-width layouts ● 8 pre-defined templates

● 19 pre-defined color schemes ● Suffusion

Theme Bloat!




Child Themes

/*Theme Name: My Twenty Twelve ChildTheme URI:Description: My Child themeAuthor: Your NameAuthor URI:Template: twentytwelveVersion: 1*/




Framework“A stand-alone base/starter Theme that is intended either to be forked into another Theme, or else to be used as a Parent Theme template.”

Built-in functions and jQuery/AJAX scripts to allow you to create Child Themes with the minimal amount of coding.

May include…• Custom functions in the Theme• Custom action hooks and filter hooks• Theme options page integration

wordpress.org




judging theme quality

not just on visual appealdoes it fit my site needscan it be extended or customizedavoid “theme lock in”html structure for seoreviews from developers(not from affilliate link sites)




support & documentation

most are behind a walled garden forumhelp desk - ticketed systemuser documentstheme updates




the buy indon’t know what to expect everyone is different

your cost is timebefore ・during ・after




theme trendsadaptive web designmobile firstuser centric designweb standardizationdesign simplicityspecialty themescustom post typescustomizerless built-ins · more pluginsless shortcodes




Join the

WordPress Global

Community




thank you!Gloria Antonelli

@GloriaAntonelligoogle +linkedinfacebook

Web Strategist WordPress Developer Consultant & Trainer

[email protected]



@GloriaAntonelli #wcmkeThursday, June 6, 13

Technology

WordPress Theme Selection Field Guide