Goodbye Thematic

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!

A Collection of WordPress Theme Review Tips

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.php file. 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 functions.php file first, since it’s the brain of a theme. Then, I’ll look at other include files to get a sense of what should happen on the front end. Then I look at the template files to see the HTML. Lastly, I’ll check out the JavaScript and CSS files to see how they add to the theme.
  • 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 :focus styles, 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!

Speaking at WordPress D.C. on Themes and UX

On Tuesday, I’ll be speaking at WordPress DC, giving an encore of my WordCamp U.S. talk – Themes are for Users. You should come out if you’re in the area and want to learn more about WordPress and mingle with the local WordPress community. Plus, as a new wrinkle to my talk, I’ll dive into Components, a new project from the theme team at Automattic. Hope to see you there!

Meet Components

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.

WordPress 4.4 and More

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.

Themes are for Users

This is an adaption of my talk for the 2015 WordCamp U.S. Download the PDF slides (23 MB) or view the talk on WordPress.tv.

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

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.

Discover

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.

Build

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.)

Evaluate

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.

Speaking at WordCamp US 2015

I’m excited to share I’ll be speaking at WordCamp US 2015! I’m working on a talk called, Themes are for Users, all about the user experience around WordPress themes. I hope to see you there!

This is my first “big” WordCamp as I never attended WordCamp San Francisco, so I’ll get to meet a lot of people in person for the first time. If we’ve interacted in the WordPress community over the years, please come say “Hello!” 🙂