Evolution of a theme

On WordPress.com we have a showcase full of beautiful, diverse themes, but it has an ugly side as well, hidden from the public view. Behind the scenes we have Trac (our bug tracking system of choice) full of issues reported by our customers. Some of those issues are legitimate bugs. Oftentimes though, we receive reports of issues that feel like bugs to the customer, but are actually the intended theme behaviour, or a conscious design decision.

Let me give you an example. It used to be the developer’s decision to display or hide site’s tagline. Some themes just hid the tagline with CSS, while others didn’t include it in the page source at all. Over time we received reports from unhappy customers, who wanted to display tagline on their sites, but were unable to. To make matters worse, it was still possible to add the tagline in the site’s Customizer or Settings areas, even though it wasn’t being displayed anywhere.

When this happens, it’s often possible to salvage the situation, by handing the user custom CSS rules that address the issue. Other times, sadly, we close the ticket as a “wontfix”.

I bring up those bug-like issues, because we (the Theme Team at Automattic) have been doing some exciting work lately, aimed at bringing consistency to our themes. You see, looking at the existing theme base (over 380 themes strong!), we realized that our themes are unpredictable. As a result, new customers are met with a steep learning curve not only when first setting up a site, but every time they switch a theme. So instead of launching only brand new themes on WordPress.com, we’ve been fixing them! Let me tell you about one of our recently refreshed themes – Apostrophe 2, and its journey.

Apostrophe’s predecessor – Semicolon by Konstantin Kovshenin – first launched in 2014 as a clean and simple magazine theme, with some exciting features under the hood. In 2015 it got a significant makeover from the talented Sarah Semark and launched on WordPress.com as Apostrophe.

Sarah did a beautiful job on updating the design, so I had my work cut out for me when I approached re-launching Apostrophe earlier this year. So I focused on bringing the consistency to the user experience instead.

Our team spent a good part of last year examining our existing themes, and ways we could unify user experience. As a result of those efforts, we created a list of best practices, which we follow in all our themes ever since. So the first thing I did, was go through our Theme User Experience list (TUX for short), and make sure Apostrophe is compliant.

apostrophe-content-options

Next up, I focused on implementing Jetpack’s Content Options. This is another Theme Team project, spearheaded by Thomas Guillot, aimed at giving users more control over their sites, and an easy way to make small visual changes. Thanks to Content Options, users are able to make decisions on things, that used to be pre-defined by theme author, for example whether to display certain post details like date or categories, or if they want to display featured images on single posts and pages, or not. In case of Apostrophe, implementing Content Options allowed to me to remove a custom theme option to display author bio.

apostrophe-feature-star

Lastly, I had to decide what to do about Apostrophe’s unique implementation of Jetpack’s Featured Content. Typically, to feature a piece of content, a special tag has to be added through the site’s backend. In Apostrophe though, it was possible to tag posts straight from the front page. This approach felt intuitive and natural, so I contemplated for a while whether or not I should remove this feature (in fact it was also discussed before Apostrophe’s initial launch on WordPress.com). Ultimately I removed Featured Content front-end tagging in the name of consistency.

Overall, re-launching Apostrophe took only a few days, and it was an efficient and gratifying project. This wouldn’t be possible without the collective work of my amazing colleagues, who deserve a big thank you! Special thanks goes to Tammie Lister, who led the charge on Theme User Experience project.

If you’re curious about Apostrophe and would like to look under the hood, you can download the self-hosted version from our showcase.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s