Vous êtes sur la page 1sur 102

Find the Perfect Theme

WordCamp Phoenix 2013 themeshaper.com/jumpstart

Thursday, January 17, 13

Find the Perfect Theme


Lance Willett Theme Wrangler, Automattic WordPress.com

Thursday, January 17, 13

Hi! I'm Lance Willett. And I love themes.

Find the Perfect Theme


Lance Willett Theme Wrangler, Automattic WordPress.com

Thursday, January 17, 13

I love themes so much that the word is literally in my job title I work for Automattic, on themes and customization And I led the Twenty Twelve theme project in core last year This is what I work on all day, every day I'm honored and excited to be here to share with you

Find the Perfect Theme


themeshaper.com/jumpstart

Thursday, January 17, 13

Heres a link to download these slides, on the same page are many more links and resources Ive put together for you Feel free to grab it now to follow along, or any time to reference what we talk about today

Find the Perfect Theme


themeshaper.com/jumpstart

Thursday, January 17, 13

[Quick questions to know the audience] Themes are special because they are in many ways indistinguishable from your WP site, and to your site visitors it'll be one and the same thing. Even though under the hood that's not necessarily trueit's the most visible part of your site.

Find the Perfect Theme


themeshaper.com/jumpstart

Thursday, January 17, 13

Your theme is your identity, your brand it's how you present yourself to the world Taking special care to nd, choose, and customize a theme can make a huge difference to the effectiveness of your site: communicating your content and your message clearly to your readers, visitors, customers Punchline: themes are a really fun part of WP, knowing how to talk about them, nd and choose, and *use* themes will give you a great jumpstart into getting the most out of WP

1. Basics 2. Find and choose 3. Modify

Thursday, January 17, 13

Just to give you a chance to switch rooms before we dig in This session will be broken into three equal parts Leaving time for your questions This talk will NOT cover: - No code (we're not learning CSS, HTML, JS, PHP here today) - In-depth on web & graphic design or layout techniques - No ASU vs UofA jokes (any Sun Devils in the room?!)

Thursday, January 17, 13

Go Cats!

Part 1

What is a theme?

Thursday, January 17, 13

Let's start by answering the question ... what is a theme?

A theme is a collection of les that work together to produce a graphical interface with an underlying unifying design for a weblog. A theme modies the way the weblog is displayed, without modifying the underlying software. Essentially, the WordPress theme system is a way to skin your weblog.
http://codex.wordpress.org/Themes

Thursday, January 17, 13

10

Other names you might hear, around WP but also with other web publishing software: template, skin, theme, design package

A theme, template, skin, etc is a ready-to-use design and layout that you can pop right onto your existing WordPress site. WordPress handles all of the content for you (posts, pages, comments), while the theme transforms that content into a beautiful and clean layout for your visitors to see.
http://www.woothemes.com/frequently-asked-questions/

Thursday, January 17, 13

11

Let's hear how other folks dene a theme

The key takeaway about WordPress themes any beginner must know is that at any moment a WordPress websites theme may be changed without adversely affecting the actual content of the website.
Graph Paper Press beginners guide http://downloads.graphpaperpress.com.s3.amazonaws.com/beginners-guideto-wordpress.pdf

Thursday, January 17, 13

12

This is an important point, I'd like to underline it Your theme should be thought of as separate from the text, images, media you publish with WordPress Its also something to be aware of when making or choosing a theme making sure your content isnt *too* locked into you theme (or plugin, or site, or anything else you build with WP)

Think of it like a house. WordPress provides the foundation and framing, while your theme adds in the paint, ooring, curtains, etc. everything you need to construct the look of your site.
http://ithemes.com/start-here/

Thursday, January 17, 13

13

Yep, this is another great way to think of your theme http://ithemes.com/start-here/

3 types of themes

Thursday, January 17, 13

14

With that in mind, let's look at common types of themes Often this is the most confusing part of judging and nding a great theme Theme designers and theme companies use buzz words to market their products, and you should know what you're getting 3 basic kinds of themes: plain old awesome, starter themes, frameworks

Plain ol awesome themes

Thursday, January 17, 13

15

First you have plain old awesome WordPress themes that you'd use when you start a blog or site for your business or a site for your local reading club This is the typical theme you'll nd, great for almost everything, lots of choices and styles. Almost anything you can think of. Self-contained, typically you don't need anything else. Just grab it, install it, and activate it for your WordPress site

Twenty Twelve

Thursday, January 17, 13

16

Twenty Twelve http://twentytwelvedemo.wordpress.com/

Mystique

Thursday, January 17, 13

17

Mystique by Milenko Popovi (aka "Mile" or Digital Nature) http://theme.wordpress.com/themes/mystique/

Autofocus

Thursday, January 17, 13

18

AutoFocus by Allan Cole http://theme.wordpress.com/themes/autofocus/

Starter themes

Thursday, January 17, 13

19

Starter themes are blank themes designed for you to take and hack and turn into your own theme. As my colleague Ian Stewart likes to say They never look good. They can save you tons of time. And help you make sure youre building your theme the right way. Saving you time and effort with the underlying code and allowing you to focus on creating the design and layout.

Sandbox

Thursday, January 17, 13

20

Sandbox from Scott Wallick oldie but solidly goodie http://wp-themes.com/sandbox/

Starkers

Thursday, January 17, 13

21

Starkers by Elliot Jay Stocks http://viewportindustries.com/products/starkers/

_s

Thursday, January 17, 13

22

On my team at Automattic we use a starter theme for all our new theme projects because it cuts or time to launch in half, because we're not reinventing the wheel each time. http://underscores.me/

Frameworks

Thursday, January 17, 13

23

What is a framework? A: There are as many denitions as there are frameworks.

Genesis

Thursday, January 17, 13

24

Genesis from StudioPress http://www.studiopress.com/themes/genesis

Hybrid Core

Thursday, January 17, 13

25

Hybrid by Justin Tadlock http://themehybrid.com/themes/hybrid

In short, a framework is a robust WordPress theme that can be utilized out of the boxas isor also easily extended with child themes and hooks (customized code). Not only do they provide a number of enhancements above and beyond a typical WordPress theme, they also serve as a platform on which to build added functionality.
Genesis for beginners PDF guide: http://www.studiopress.com/news/genesis-for-beginners.htm

Thursday, January 17, 13

26

A framework often includes heavy duty programming, which can be a bonus by adding much needed functionality lacking in WordPress, but can also be overkill for most sites. All the complexity can be dangerous, tooif the code isn't vetted and audited regularly.

Frameworks
Starter frameworks Options frameworks

Thursday, January 17, 13

27

- Starter: solid starting point theme can use to build with a child theme - Options: uses options to set various elements of your theme from your WP admin dashboard

Child themes
http://codex.wordpress.org/Child_Themes

Thursday, January 17, 13

28

I'm not a fan of theme frameworks for my own work I do think they have an important place in the theme world, though -- especially if you want to reduce how much you have to code repetitive tasks over and over, utilities, functions you use often Then ... you can make child themes that essentially just change the look of the basic framework

Child themes
http://codex.wordpress.org/Child_Themes

Thursday, January 17, 13

29

Child themes can be used to easily customize any WordPress theme, but you'll nd that certain themes are made with child themes in mind (frameworks, default themes) The default WordPress themes, we call them the "Twenty Somethings"make great parent themes. They have the basic functionality you need, you can add your own styles and images to make it yours. Don't reinvent the wheel for all the WP features like comments, featured images, post thumbnails, search/archives/404. Avoid coding all the needed PHP code into the theme les, just make tiny changes to the look as you see t

Commercial themes and marketplaces

Thursday, January 17, 13

30

When you pay for a theme, you expect something more: superb design, advanced features, dedicated support and maybe more timely updates from the author Your mileage may vary! All the things were talking about today apply to both free and paid themes -- well cover paying for a theme later on in more detail Theme marketplaces are sites that showcase and sell a ton of commercial themes at once http://wpcandy.com/presents/wordpress-theme-marketplace-comparison

Denition: template

Thursday, January 17, 13

31

Lets pull out one often misused term, template This one is confusing because it's often used by other web software as a synonym for "theme" -- what in WordPress is the entire theme package Its much more specic in WP lingo

... A template is a le that denes an area of the web pages generated by a theme. For example, there is typically a template for the header area at the top of the web pages, a template for the content, a template for the sidebars, and so on. The templates are like building blocks that make up the complete web page.
http://codex.wordpress.org/Glossary

Thursday, January 17, 13

32

Official denition is a building block A theme is made up of templates, a stylesheet, and optionally other nice web designy things like images/icons, scripts, and such

Thursday, January 17, 13

33

This is what we mean by template, its a PHP le that makes up the guts of the theme Don't feel bad if any of these terms or words are confusing to you. It's a wild and crazy world! I often have to clarify these things for myself, so make a note of these sites I mentioned for reference, and keep them handy if you run into a confusing situation.

Jumpstart // Learn more


themeshaper.com/jumpstart

Thursday, January 17, 13

34

Learn more at Jumpstart to theme basics and terminology http://themeshaper.com/jumpstart/#basics

Part 2

Find and choose a theme

Thursday, January 17, 13

35

Now that we have some terminology and understanding of what makes up a theme, it's time to talk about nding a great theme for your site.

Where do you start?

Thursday, January 17, 13

36

Common tactics include: 1. Finding an existing theme yourself and maybe tweak it just a bit 2. Making your own theme from scratch 3. Hiring a pro to make a custom theme for you The rst tactic is probably the most common. So that's what I'm going to cover in this section.

Where do you start?


WordPress.org Extend directory of free themes http://wordpress.org/extend/themes/

Thursday, January 17, 13

37

Id suggest starting here, at the WordPress.org Extend directory of free themes

Thursday, January 17, 13

38

http://wordpress.org/extend/themes/ - well tested and reviewed - there's an entire team of volunteers who review and test each theme submission - that means you know they work well with WP and are at least vetted for some basic requirements

Thursday, January 17, 13

39

Thursday, January 17, 13

40

See also the Extend commercial listing: http://wordpress.org/extend/themes/commercial/ - These companies are vetted, so it's a great place to start for paid themes (themes are not reviewed, though) - You can use this to reference when searching for well-known commercial theme sites and companies with good reputations

Thursday, January 17, 13

41

Google? Not so much ...

Thursday, January 17, 13

42

How *not* to nd a free theme: I recommend *not* searching Google for free themes. Often the top hits are spammy and poorly designed themes lled with ads and hidden links. Avoid this tactic!

How to judge a theme?

Thursday, January 17, 13

43

Just like with good coffee (or beer, wine, anything else you can think of) there are levels of quality within the themes out there. There are many, many theme choices.

Thursday, January 17, 13

44

We have a technical term for this ... BINDERS FULL OF THEMES!! http://bindersfullofwomen.tumblr.com/image/33753756139

There are a lot of good themes but a great theme is one that has well structured code & style sheets, nicely integrated theme options, polished design, detailed documentation and equally important, competent support.
http://www.wptavern.com/interview-with-brad-potter

Thursday, January 17, 13

45

Great points made here by theme designer Brad Potter In an interview on WPTavern

...the monkey wrench thrown into the equation is that themes are subjective and what looks great to one person may look like crap to someone else.
http://www.wptavern.com/ian-stewarts-predictions-on-wordpress-themesfor-2012

Thursday, January 17, 13

46

Code quality, how great the design is with colors, fonts, layout? There is no one answer. All of the above. It's personal.

You can judge a theme based on code... or design... or even the people and community behind it.
Michelle Langston, Theme Wrangler @michiecat

Thursday, January 17, 13

47

How does it resonate with you? How does a theme make you feel? Do you want to marry it? Does it feel like a shirt you're going to wear every day for a week, then get tired of it and hang it in the closet for a year? It's OK. It's all good.

Finding an awesome WordPress theme is like having the coolest toy that you can keep forever... or until you nd a better one.
http://twitter.com/PeteVanWest/statuses/157176375252488192

Thursday, January 17, 13

48

Haha! How many of us know someone like this? They have this great theme on their site, then a new one the next month. Ooh, shiny!

Choosing the theme for your blog is the same thing as choosing the design on your business card. Make an impression.
http://twitter.com/bgardner/status/285576433881993216

Thursday, January 17, 13

49

Totes

How to judge a theme?


Visual design Fun factor Fits your needs Supports WP features

Thursday, January 17, 13

50

404 page

Thursday, January 17, 13

51

Looking at how a theme handles errors can be a great litmus test Does it display a helpful message? Maybe throw in a little humor?

Thursday, January 17, 13

52

Oulipo has Mal the error duck http://wordpress.org/extend/themes/oulipo theme by Andrea Mignolo

Thursday, January 17, 13

53

Whoa, you broke the internet seen in the Standard theme by 8BIT http://standardtheme.com/

Thursday, January 17, 13

54

Twenty Eleven http://twentyelevendemo.wordpress.com/404/ Nice, useful, friendly, tiny bit of sarcasm ;)

Widget areas

Thursday, January 17, 13

55

Another example: widget areas How does the theme support this important piece of WP content?

Thursday, January 17, 13

56

I have just the theme for you! Run away! Overkill alert! 70 widget positions!

Thursday, January 17, 13

57

http://www.wptavern.com/a-theme-with-70-different-widget-spots

Thursday, January 17, 13

58

This is REAL, yall See it at http://demo.rockettheme.com/wordpress/wp_tachyon/features/widget-variations/

Thursday, January 17, 13

59

Thursday, January 17, 13

60

Quintus example, good use of widgets Gracefully goes to 1-col layout http://theme.wordpress.com/themes/quintus/

Thursday, January 17, 13

61

Thursday, January 17, 13

62

Thursday, January 17, 13

63

Paying for a theme

Thursday, January 17, 13

64

OK. So maybe you looked at free themes, and didn't nd a perfect one yet. You could also pay for a theme. In fact it's quite a vibrant and still growing industry. There are literally thousands of theme authors and theme companies out there selling themes. Just like with free ones, there is a whole range of quality.

Thursday, January 17, 13

65

There is a huge amount of theme sellers specializing in WP This screenshot is from a site called http://themesorter.com/sellers

Thursday, January 17, 13

66

And this is a fun map from the folks at WooThemes, a popular theme company They made a city of the commercial theme company landscape See the full image and story http://www.woothemes.com/2011/02/wooville-5-wheres-woo/

Thursday, January 17, 13

67

The closest thing we have right now is the Extend commercial listing I mentioned before. Bookmark that page, and when you run across a candidate theme that you really like, check rst that the company is listed there. http://wordpress.org/extend/themes/commercial/

Premium means quality?

Thursday, January 17, 13

68

Common question: what's a premium theme? aka "commercial, paid, purchase, not free"

... Just because you pay for a theme doesnt mean its worth the money. Not all premium themes are created equal. And not every top-notch theme is going to work for your needs.
http://ithemes.com/premium-wordpress-theme-guide/

Thursday, January 17, 13

69

As I said before, your mileage will vary with the huge variety of themes, companies, and individuals Not all themesand not all theme companiesare created equal

The best theme company


Support and docs Community record User reviews Do they blog? Features Price License: GPL Design quality and aesthetic

Thursday, January 17, 13

70

Many people who look for themes tend to nd a great theme company, and stick with them. Versus always using a broad search, they build loyalty with one theme shop, and follow them closely. Heres my suggested list of things to look for in a great theme company

The best theme company


Support and docs Community record User reviews Do they blog? Features Price License: GPL Design quality and aesthetic

Thursday, January 17, 13

71

License note: does it promote the same open licensing as WP? GPL, free as in speech, not as in beer. It's important that as an end user you know your rights, what your getting when you download a themeyou don't have to know the legalese and all the history of GPL, but pay attention to the license agreement the theme author presents to you and that they actually *have* a license explanation. Maybe the most important: "Do you like it? Do you *love* it?" Sometimes it's a gut reaction.

Finding new themes


Word of mouth Extend directory and commercial listing Expert reviews on WP sites Follow specic theme companies Theme sorters and marketplaces

Thursday, January 17, 13

72

Let's recap. A broad search will get you familiar with the playing eld, but the best results will come from ... Bottom line for choosing, just like with anything else, is to nd something that meets your needs and your budget. And that you love.

Jumpstart // Learn more


themeshaper.com/jumpstart

Thursday, January 17, 13

73

Jumpstart: learn more http://themeshaper.com/jumpstart/#nd-choose

Part 3

Modifying a theme

Thursday, January 17, 13

74

Tips and tricks for adjusting a theme to suit you and your site Covering the built-in WordPress "Appearance" settings

Example: 3 avors of Twenty Something

Thursday, January 17, 13

75

I'd like to show you the same theme with very slight variations, using simple customizations to achieve very different looks

1. No changes

Thursday, January 17, 13

76

No changes, only thing different between this site and many other ones using this theme = your content

2. Using WP features
Header image Background color and image Widgets and menus

Thursday, January 17, 13

77

Simple changes, change only header or maybe the background Add some color to it Then your content, and images, will make it shine

3. Fully Customized
CSS skills Custom typography Drastic changes to layout and design

Thursday, January 17, 13

78

A bit more complex style, using the WP.com Custom Design features Very similar to how a child theme would work, I could accomplish this same outcome with a Twenty Eleven child theme This full customization allows for much more exibility However, it has a steeper learning curve if you're just starting out with WP or with your web design skills

Twenty Ten

Thursday, January 17, 13

79

Thursday, January 17, 13

80

The one, the only: Twenty Ten http://twentytendemo.wordpress.com/

Thursday, January 17, 13

81

George Orwell's diary, posted 70 years to the day after they were written http://orwelldiaries.wordpress.com

Thursday, January 17, 13

82

Friends of Urban Wildlife site, my wife's non-prot group in Tucson http://tucsonwildlife.wordpress.com/

Thursday, January 17, 13

83

Neat customizations done by a foodie blogger from South Africa http://bakelovenotwar.co.za/ (Yum, now I want a cupcake)

Thursday, January 17, 13

84

Mary Caperton Morton, The Blonde Coyote http://theblondecoyote.com/ This theme is called Vostok, a child theme of Twenty Ten

Twenty Eleven

Thursday, January 17, 13

85

Thursday, January 17, 13

86

http://twentyelevendemo.wordpress.com/

Thursday, January 17, 13

87

Beautiful photography by Aimee Bar-am, based in the Phoenix area http://baramphotography.net/

Thursday, January 17, 13

88

Men in Black III http://mibwatch.wordpress.com

Twenty Twelve

Thursday, January 17, 13

89

Thursday, January 17, 13

90

The newest default theme, Twenty Twelve No changes, just as it is out-of-the-box http://twentytwelvedemo.wordpress.com/

Thursday, January 17, 13

91

http://jaco.by/

Thursday, January 17, 13

92

http://fautrever.com/

Thursday, January 17, 13

93

http://jennabethday.com/

I want my own

Thursday, January 17, 13

94

60 million WP sites, about half on WP.com the rest self-hosted on places like GoDaddy, page.ly here in AZ Imagine if every single one of those WP sites had a different, unique theme. That'd be a ton of themes! It's not feasible to have every single one be a fully custom, turnkey solution. So what are most people doing? They're either using the theme exactly as they downloaded it, or they've modied it slightly to make it their own. I consider this approach much more common. So if you want to dig into theme design and dev start here: learn the WP basics for modifying appearance like widgets, menus, custom header images, custom background color and image, etc

From scratch? Yes, please

Thursday, January 17, 13

95

When to make a theme yourself, or hire a pro to do it for you? The how-to for making themes is beyond this talk Sounds like a crazy huge task, right? Even the most advanced theme designers started in the exact same place Start with Twenty Eleven or Twelve, or pick your favorite theme and open it up

Hiring a pro

Thursday, January 17, 13

96

If you have a budget or really complex site, I suggest hiring a pro, keeping in mind your basics and the ways to judge a theme You can look at their portfolio, or their existing themes and reference the vocabulary and ideas for judging themes that we've talked about today So you can feel condent and understand what you're getting you now can speak theme lingo and communicate your needs clearly if you hire a pro

Jumpstart // Learn more


themeshaper.com/jumpstart

Thursday, January 17, 13

97

Where to nd a theme pro? Talk to people at WordCamp and your local WP meetup Find a marketing or design agency that specializes in WordPress Just ask them, do you love WP? Can you show me some examples of WP sites you've designed and built? More at Jumpstart: modifying a theme http://themeshaper.com/jumpstart/#customize

What are we looking for in a theme?


Philip Arthur Moore, Theme Wrangler @philip_arthur

Thursday, January 17, 13

98

To put all this in perspective, lets ask the question: What are people looking for when they look for themes? A question put to me recently by my colleague Philip

What are we looking for in a theme?

Self-expression.

Thursday, January 17, 13

99

Self-expression.

Your theme is your site.

Thursday, January 17, 13

100

Your theme _is_ your WordPress site. Make it count. Make it your own. Bottom line for jumpstarting into themes: - Simple and quick? Grab a theme from Extend, and activate it in your dashboard. Then make some small tweaks to make it yours. - Unique and complex site? hire a designer, they'll use their skills to make you a professional theme - Don't be afraid to dig into themes yourself, starting with WP customization tools, then grab a theme and get your hands dirty

Have fun! Thank you.

Thursday, January 17, 13

101

Most of all, have fun! Thank you.

Find the Perfect Theme


Lance Willett WordCamp Phoenix 2013 @simpledream http://simpledream.net/ Slides: themeshaper.com/jumpstart
Thursday, January 17, 13 102

Lets talk afterward in the hallway, at lunch, or the Rockstar Bar. Get these slides at http://themeshaper.com/jumpstart/