At Automattic this year, we’ve focused heavily on improving people’s experience using themes on WordPress.com. It’s one reason we introduced the TUX List, a set of theme user experience requirements. Putting these best practices into your themes on WordPress.org and elsewhere means anyone using them will have an easier time getting to what they really want to do: publish their site. Not fiddle with theme setup and options. Making themes easier is a job for everyone, so let’s keep working at it!
My colleague, Michael Arestad, wrote an excellent post awhile back called, The shape of WordPress shapes the web. In it, he poses the questions:
Should the design of content creation in WordPress expand past blogging?
If so, what would the creation of content look like? Would the shape of the editor be determined by the theme? Would it be something more flexible involving direct manipulation? Could it be a mix of both?
Those are tough questions, but fun ones to think about, especially without the limits of the current content creation process. Some of what I envision for a better experience there already exists – in bits and pieces in different content management systems and platforms. Some of the reasons WordPress lacks a more optimal content creation process doesn’t have to do with just user experience, design or code, but also some of its contributors. I’m talking about themers – myself included.
From my vantage point, themes cause some of the biggest frustrations for the people who use WordPress every day. As we all know, born as blogging software, WordPress has evolved into a full-fledged content management system and its contributors have it looking more and more like an application platform every day. With that fluidness comes freedom. WordPress can do a lot. Sure, the post screen available at
post-new.php has its limits, but that hasn’t stopped anyone yet. Meta boxes, custom fields, widgets, special classes, page builders and more have all tried to make the process better. But nothing has stuck, and everything has felt like a patch instead of a cohesive experience. And worse, open up any WordPress site that extends beyond a blog and you’re likely to find them all handling content in slightly different ways. Everyone loses here. The people who use WordPress, and those who make it and build tools from it.
I certainly don’t think the perfect content creation process exist for all the types of content that goes into WordPress. And I don’t think pulling in ideas and concepts from other sources is the whole answer. If the design of content creation in WordPress expands past blogging, it will take experimentation, user testing and a lot of collaboration to find something that works. So how do we get there? We have to start – together.
I know that we as themers can do a better job of bringing consistency to the themes we build, both individually and as a community. We’re doing a better job than we once did, reducing theme options, sticking mostly to the Customizer, keeping content types in plugins, etc. but more work remains. We’re all creating themes in our own worlds, but something better lies ahead. We need to sketch, design, build and create outside of themes, and with each other. WordPress Core needs you. Maybe you start working through some tickets. Or revive a stalled feature plugin that’s needed. The opportunities exist everywhere, and content creation doesn’t get better without themers.
It’s bittersweet and slightly nostalgic to see the theme come to an end. When I launched the Tavern in 2009, I regularly linked to tutorials and articles published by [Ian] Stewart. I’m almost certain Thematic and its creator helped out a number of budding theme developers between 2008-2011.– Jeff Chandler in After Eight Years, Thematic Theme’s Lead Developers Discontinue the Project
I feel the same way. When I first started hacking on WordPress themes, I started with Thematic. My final project in graduate school ended up being two child themes, built with Thematic. It introduced me to a lot of theming concepts and best practices. I’m glad it will live on in a fork. So long Thematic – thanks for all those hooks and filters!
Okay, that’s a slightly silly title, but it makes sense once you know what I’m talking about. I wrote a tutorial over on ThemeShaper on how to display the featured image from the latest post in a collection of featured content. Featured, featured! Give it a read!
Seeing a call for theme review tips on the Make WordPress Themes site inspired me to share my own workflow. Hopefully, it helps some of you who may want to become theme reviewers or hone your craft.
A team of volunteers checks all the WordPress themes that end up in the WordPress.org theme directory. They ensure that the themes meet a set of standard requirements so people get a consistent experience when using a theme from the directory. You can become a reviewer too!
First, A Quick Peek
Before I even begin reviewing a theme, I like to scan it quickly to get an idea of what it’s like, and where I might find issues. This takes about five minutes, and I follow these steps:
- Look at the file structure: What do you see? Is it a custom theme or child theme? What frameworks or libraries are used? Is the theme set up in a standard way, like a Core theme.
- Check out the
functions.phpfile. Does anything make you pause and wonder why it’s done like that?
- Load the major pages in a browser to see if you notice anything out of the ordinary or broken. Major pages include: home, archive, page and single post. Also, check out the Customizer to see what the options and theme setup might be like.
Doing that gives me a broad overview of the theme, and helps pinpoint any areas I may need to pay extra attention to when reviewing. Next, I can begin my full review.
Next, A Full Review Workflow
- Look at the code first, going file by file. I like to start with the
- I like to check for code related issues first, such as function names, escaping and translations, etc. Then I look at details, like documentation, screenshot and the stylesheet header.
- Lastly, I’ll take the theme for a spin, testing the front end and theme options making sure they work properly.
Finally, A Few Tips and Tricks
I’m always tweaking my review process because I never think it’s efficient enough. Here are a few tips and tricks I’ve used lately:
- I have templates for replying to reviews. I’ve put them on Github in case you want to steal them.
- I always have the current requirements open in a browser tab to cross reference during the review, just in case something has changed recently
- I run the Theme Check plugin on a theme before anything else in a full review to get clues where I may need to focus my attention.
- My standard setup uses WordPress VVV with all of the theme-related plugins recommended in the Developer plugin.
- I primarily use Chrome to test themes. I will use just Firefox to test keyboard accessibility because it has no default
:focusstyles, and Safari to test with Voiceover on because the two are well integrated.
- Spotting possible escaping issues always proves challenging. I like to use PHP Codesniffer with the WordPress sniffs to check for escaping issues. Running this command just executes the escaping “sniff”:
phpcs --standard=WordPress-Extra --sniffs=WordPress.XSS.EscapeOutput /path/to/code/It won’t be perfect all the time, but it will save you time.
- I like to use regular expressions in Atom to search for various things like function names, text domains, and more.
Now, go become a more prolific reviewer, and don’t forget to share your own tips!
Today, Automattic’s Theme Team launched Components, a toolbox for taking your WordPress themes where you want them to go, faster. I’m really excited to work on Components because I believe it pushes theme development toward becoming more centered on who really uses themes – people.
With Components, a theme developer gets a everything they need to create something focused on a particular use case. The people who use those themes hopefully get more themes that just work, with minimal setup, less options and no meaningless buzz words. We have big ideas for Components, and this represents just the beginning. If you look closely at any part of the project, you’ll likely find unfinished work and rough edges. As we prepared to release the project, I reread Matt’s post called 1.0 Is the Loneliest Number, all about shipping your work. Matt says:
… if you’re not embarrassed when you ship your first version you waited too long.
I’m embarrassed, but more excited than anything because we finally have this idea out there, and can keep iterating on it to make it better. 🙂 That means better themes for everyone.
If you’re interested in Components, be sure to check out the post, and the Github repositories.
I wrote a post over on ThemeShaper, curating some of the Automattic Theme Team’s recent and best talks all about themes and user experience. Check it out if you want to learn more about an often-overlooked skill in the theming world.
The last few weeks have turned out to be a pretty amazing stretch for me professionally. I attended WordCamp U.S., my first “big” WordCamp, and gave a talk there called Themes are for Users. You can watch it on WordPress.tv. I also got invited to the Community Summit and helped out at Contributor Day. Plus, a few days ago, WordPress 4.4 came out, which included a new default theme, Twenty Sixteen that I helped build. It’s on WordPress.com too.
That doesn’t even count all the great people from the WordPress community I met in real life at WordCamp U.S., putting faces and voices behind the Gravatars. I can’t wait for the next year in WordPress.
I love themes because they’re central to the WordPress experience. After they install WordPress, users view the front end of their site and start configuring their theme. Despite this, themes have become very disconnected from users. Many theme authors approach themes by building for everyone, but when you build for everyone, you build for no one. Themers need to bring users into their theming process.
Meet Michelle. She wants to build a website to showcase the creativity that goes into her handmade purses and handbag accessories. She’s a full-time college student in her second year studying fashion marketing and management. She works part time at the school library and enjoys reading, photography and rowing as hobbies. She’s 20 years-old, maintains a 3.6 grade point average and is goal oriented. She’s interested in photo blogging about her creative process and building a community of followers on her blog. She’s fairly tech-savvy, owns an iPhone 5s and Chromebook. She loves browsing Etsy for pattern ideas, symbols and other neat inspiration that could adorn her handbags.
What Happens When Many Users Meet a Theme
Sounds like Michelle could be your ideal WordPress user. Right? She searches through the available themes, and believes she’s found the one. Michelle visits the demo and wonders how to make her site look like that. “It can’t be that hard,” she says to herself and activates the theme. She follows standard WordPress instructions to set her home page as a static page, and then sets a special home page template for the same page. But when she visits the site, she sees nothing but a blank page. Next, she clicks the “Customize” link in her toolbar and finds her way to the “Theme Options” panel. There, she sees a giant list of options and doesn’t know where to start. Understandably, Michelle gets frustrated. She plays with a few of the settings in the theme’s options, but gives up.
Michelle isn’t alone. Tons of WordPress users give up on themes they had their hearts set on. These are quotes from actual WordPress.com users who asked for refunds for their premium theme purchases:
So, I thought I could make my page look professional on my own…No way in ****. This is for technologically savvy only, I suppose.
Too hard to use! Disappointed!
Lovely theme but I just don’t have the time and patience to learn it, I discovered.
Those aren’t happy users. We see themes with misleading screenshots and demos. Themes with tons of options and complex setups too. This leaves users with false hopes and countless ways to fail. It doesn’t have to be this way. Let’s look at why we’re many people leave the theme experience disappointed.
People Resist Complicated
First, we need to start with the way the brain works. It is, after all, the chief instrument we’ll use in building our site.
Your brain, and yes, Michelle’s brain – our poor user who gave up on building her fashion blog, can only handle so much information. As you take in more information when working on something critical, like setting up a theme, the part of your brain that controls decision making and emotions can hit overload. When it does, it will shut off. Once that happens, Michelle could be prone to making stupid mistakes and bad choices.
The brain can also do tricky things when it comes to choices. In a fantastic Ted Talk, psychologist Barry Schwartz highlights the paradox of choice. Imagine a dairy aisle filled with endless varieties of yogurt. Sounds good, right? It may, but Schwartz says, “With so many options to choose from, people find it very difficult to choose at all.” Give a user too many theme options and you could have indecision and unsatisfied users. On the flip side, Schwartz says, “…Even if we manage to overcome the paralysis and make a choice, we end up less satisfied with the result of the choice than we would be if we had fewer options to choose from.” Why? Because we expect more? Michelle, our user saw all those options and thought she could make exactly what she wanted, but it didn’t turn out that way.
You may see a pattern developing here – less is more. The same approach has greater effect when looking at a number of steps a person has to finish before calling a task done. In 100 Things Every Designer Should Know About People, Susan Weinschenk points out that people focus on what’s left more than what’s completed. A study she sighted said people were more motivated to continue when they focused on what was left to do, so shorter lists help keep users like Michelle motivated.
Lastly, focusing on your user and the overall experience can impact your bottom line in a big way. As an example, when one major hotel chain launched various user improvements to its site, it saw a year-over-year revenue growth of 83 percent. Other branded websites within the industry saw a growth of 33 percent for the same time period. Michelle will buy more themes or services from you, and recommend you, if she has a better experience.
Creating a Mindful Process
So how do we give Michelle a better experience? We need to examine our process. The process for many themes might start with an idea. Great, we have an idea – let’s flesh that out in a design. Once we nudge all our pixels into place, we can start building. As we build, we’ll test the major aspects, and launch. Finished theme! Now, we’ll set back and watch the download counter rise!
However, it’s not that easy. You can’t find Michelle, her needs or voice anywhere in that process. In that process, the opportunity for failure, feedback and improvement doesn’t exist. Our process needs to embrace iteration more. What if it looked more like this? You have a discovery phase where you do research, like looking at analytics, creating surveys or conducting user interviews. A build phase where you sketch, create wireframes, style guides and start designing and coding your solution. Lastly, you evaluate all of that, running more user tests, looking at analytics and analyzing any data that will help you determine what has worked and what hasn’t.
That simplifies a lot of work into three major phases, but one thing to realize is that you can:
- make this process a cycle, repeating it as you move along.
- break up your project into chunks and use this method on different aspects.
- launch at nearly any point, from showing a user test to design tweak to the full project.
This puts iteration at the forefront of your theming process. Sure, it can become messy at times, but that’s part of what makes creating fun. It’s how the creating, the making happens. You need feedback to get a more accurate view of how users will actually use your themes, and it will help you make better decisions and know why you made them.
Bringing Better User Experience to Your Themes
We know we need to alter our process somewhat to help create the best possible themes for Michelle. But how? Let’s look at the discover phase and what you can do to bring a mature user experience process into your theming workflow. It may seem intimidating to dive into research, especially if you haven’t done it much before, but it helps form a solid foundation to work from for all your future design decisions.
Here are some ways you can dive into your own “discover” phase:
- Look at your analytics. What patterns do you see?
- Look at your competitors. What themes are they building? What gaps in the marketplace have they not filled?
- Talk to your support staff, or do support. What pain points do you notice?
- Run surveys with your customers. They’ll tell you more than you think.
- Interview users formally, and create user personas.
- Test a current theme, asking users to perform specific tasks.
After the “discover” phase, you move onto the “build” phase. You may think of the build phase of your theming project as just for writing code, but it’s for any process where you create an artifact that would be something tangible. Here are some of those tangible items and tools that may help you create them:
- Sketch (pencil and paper)
- Moodboard (Sketch or Photoshop)
- Style Guides (HTML/CSS/JS or CodePen)
- Wireframes (Balsamiq)
- Prototype (HTML/CSS/JS or CodePen)
- Get feedback (Yes, again.)
- User testing (Yes, again.)
Lastly, after you “build” what you need to build, you should evaluate whether or not it proved to be effective. You can loop back to some of the data you gathered or analyzed during the “discover” phase to compare it all. See if you see a change in your analytics, or your support staff hear something different from your customers – as an example. Of course, you’ll want to make changes based on what you find out. Small changes work best since they’re less risky and easier to test and measure against.
Moving into Theming
Once you begin making decisions based on user feedback and data you’ll find that:
your theme options become simpler:
- they become what they truly are: optional.
- they start to actually enhance a theme’s purpose.
- you start to put them into logical groups.
When you’re working with your theme setup, you’ll find:
- you’re following logical patterns across the web for common interactions.
- you’re building your theme setup in layers, where each one works independently without need the others.
- you’ll get your users from theme activation to complete setup in fewer steps.
Your theme documentation will:
- be created in less time and easier to maintain.
- no longer be required reading for users who want to get started using your themes.
Your screenshot and demo will:
- be realistic in what it shows.
As you move through your theming process:
- Before the theme: Research and focus.
- While theming: Build your theme in chunks. Test as you go, and don’t be afraid to make and learn from your mistakes.
- After theming: Ask yourself what you’ve learned. Iterate.
My favorite thing on the Internet is clicking on a link and landing on a personal site, customized by the author. A good WordPress theme can open up a new world to those using it, and in turn, reveal something unique about the site’s owner to the world. A theme can become the centerpiece to someone’s story. That can’t happen without all of us making better WordPress themes. Themes that just work for users like Michelle. Let’s build them.
You may have seen this pop up in a few places, but the WordPress project has put the interviews for its Milestones: The Story of WordPress book online. The book is available on GitHub and in progress. If you’re a themer, you can listen to the rich history behind everything themes, from the creation of premium themes to Kubrick and more. Plus, all the usual WordPress history. 🙂