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
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
[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.
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
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?!)
Go Cats!
Part 1
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
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/
11
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
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/
13
3 types of themes
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
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
16
Mystique
17
Autofocus
18
Starter themes
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
20
Starkers
21
_s
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
23
Genesis
24
Hybrid Core
25
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
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
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
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
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
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
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
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
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.
34
Part 2
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.
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.
37
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
39
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
41
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!
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.
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
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
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
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
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
49
Totes
50
404 page
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?
52
Oulipo has Mal the error duck http://wordpress.org/extend/themes/oulipo theme by Andrea Mignolo
53
Whoa, you broke the internet seen in the Standard theme by 8BIT http://standardtheme.com/
54
Widget areas
55
Another example: widget areas How does the theme support this important piece of WP content?
56
I have just the theme for you! Run away! Overkill alert! 70 widget positions!
57
http://www.wptavern.com/a-theme-with-70-different-widget-spots
58
59
60
Quintus example, good use of widgets Gracefully goes to 1-col layout http://theme.wordpress.com/themes/quintus/
61
62
63
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.
65
There is a huge amount of theme sellers specializing in WP This screenshot is from a site called http://themesorter.com/sellers
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/
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/
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/
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
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
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.
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.
73
Part 3
Modifying a theme
74
Tips and tricks for adjusting a theme to suit you and your site Covering the built-in WordPress "Appearance" settings
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
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
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
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
79
80
81
George Orwell's diary, posted 70 years to the day after they were written http://orwelldiaries.wordpress.com
82
83
Neat customizations done by a foodie blogger from South Africa http://bakelovenotwar.co.za/ (Yum, now I want a cupcake)
84
Mary Caperton Morton, The Blonde Coyote http://theblondecoyote.com/ This theme is called Vostok, a child theme of Twenty Ten
Twenty Eleven
85
86
http://twentyelevendemo.wordpress.com/
87
88
Twenty Twelve
89
90
The newest default theme, Twenty Twelve No changes, just as it is out-of-the-box http://twentytwelvedemo.wordpress.com/
91
http://jaco.by/
92
http://fautrever.com/
93
http://jennabethday.com/
I want my own
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
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
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
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
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
Self-expression.
99
Self-expression.
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
101
Lets talk afterward in the hallway, at lunch, or the Rockstar Bar. Get these slides at http://themeshaper.com/jumpstart/