Author: David A. Kennedy

Gutenberg promises the vision you have takes shape in the editor, instead of something you can’t see. Why’s that so powerful?

It happened again.

I sat with a potential WordPress themer, who wanted to know how to get started the right way with theme development. He’s a user experience professional by day, looking to up his coding skills.

He pointed to the WordPress editor, and said something like, “I understand HTML and CSS, but I’m not sure how to make something beyond putting it in there.”

We’ve all been there. Having that vision of what you want your site to look like, and not knowing how to get there. Gutenberg promises the vision you have takes shape in the editor, instead of some PHP file or a special plugin that isn’t truly native to WordPress. That’s powerful! It shifts much of the customization control from the themer to the person using the theme.

Today, if you’re trying to get into WordPress development, you might start by tweaking an existing theme. Then making a child theme. Then diving into a custom theme. My user-experience professional friend did just that. He’s already customized a theme and made a child theme. But the whole world of specialized WordPress theme knowledge can intimidate even professional web workers. Imagine how it feels to new users of WordPress who have never built a website before?

But with Gutenberg, people – professionals and beginners alike – can begin building what they want. Now, Gutenberg will no doubt need its own specialized knowledge. But at its heart, it will transform what a theme means to WordPress. They can become more about pure design, powered by the simplicity of CSS.

You might be saying, “But you can already use CSS now to change a theme’s design.” That’s true, but much of a theme’s structure gets determined by and locked away in template files. Hard to change unless you start learning how to “theme.” But with much of that structure and markup becoming blocks that can be added to a theme, it becomes easier for people who aren’t themers to see different possibilities.

Say goodbye to lots of custom widgets and theme options. Oh, and to limiting page templates. The future of WordPress themes can become more about empowering users to work on their vision instead of always having to learn how to “theme.” It starts in the editor and not with the theme.

When we think of space flight, we often think of the thing that gets us there: the shuttle, module or rockets that take us out of this world.

However, in the early days of space flight programs at NASA, one man realized how important control from the ground would be to quickly evolving missions. Christopher Kraft pioneered the creation of Mission Control, the place where dozens of engineers, scientists and staff on the ground assist the astronauts in carrying out their mission from thousands of miles away.

About the Flight Director, the person in charge of Mission Control, Kraft said:

[T]he guy on the ground ultimately controls the mission. There’s no question about that in my mind or in the astronauts’ minds. They are going to do what he says.

The notion of Mission Control makes a good metaphor for a WordPress theme. Themes sit at the center of the WordPress experience. They run the show. WordPress is the ship and rockets that get us there. Without a theme, the mission won’t be successful. Sure, at its core, WordPress is publishing software, but many more people interact with the front end of a site than its back end.

So how do we start thinking of themes as an experience, rather than part of the experience?

Design how the pieces fit together. Most themers see the parts of a theme experience as separate. I did too, until recently. When I say separate, I mean as different parts of one flow. We often create the theme and the documentation with little thought as to how customers get from the theme to the help text when they need it. We also don’t spend time on onboarding or setup with customers. All that matters though, and it can help get a customer to success and make them feel like a success. We need to pay more attention to how those parts connect for a better experience.

Be consistent. Themes in WordPress have this great strength because they can do nearly anything. Their biggest weakness? They can do nearly anything. This means how a theme behaves can vary widely from one to the next. We’ve tried to address this in projects like Underscores and the TUX (Themes User Experience) list, but you can never do enough. I’d like to see themes only vary greatly from the norm if it accomplishes an important design goal for the customer.

Mind the internals. Recently, we had our support team at WordPress.com share why themes frustrate our customers. So much of the frustrations boil down to what a customer might not have control over in a typical theme. Things like how an image is cropped or how WordPress Core handles some default data. Experimenting with how these types of things work for your customers can mean they’re happier in the end.

If you make these items a bigger part of your theme design process, you’ll have more control over your theme’s experience. And your customer’s missions will have a greater chance of success.

Every few months I read a post about how the WordPress theme business has shrunk. The authors always reach a similar conclusion. Sales have dwindled. Competition has increased. Putting food on the table, finding a niche and standing out is near impossible.

It may not be so impossible though. With a new editing interface on the horizon, the theme landscape will change in a big way. That editing interface, and eventually better site customization, means we (those who create themes) will all have a chance to redefine what a theme is and means to people who use WordPress. It will be new, fertile ground to discover – the next chapter for themes. We just can’t make the same mistakes we’ve made before.

A long time ago, especially in Internet years, you could sell a collection of well-designed WordPress themes and make a living. These became known in the WordPress space as premium themes. What made them “premium” was loosely defined. They often sported a unique look or carried interesting features. As a consumer, premium themes always seemed more special to me. They took risks. That runs against what we say on the Theme Team at WordPress.com, where we do nothing but create WordPress themes: The only difference between a free theme and a premium one is the price.

As more and more theme shops sprang up, the feature race began. Many themes became as complex as WordPress itself. Designers and developers had less time to experiment because we spent more time glancing over our shoulders. What’s the next trend? What’s this other theme shop doing?

To correct for the complexity, the larger theme ecosystem became obsessed with standards. Like making sure a theme did things the WordPress way or always met “best practices.” The web industry as a whole also continues to obsess over and rely on build tools and frameworks, sometimes to a fault. They should solve technical hurdles for us. But do they? Sometimes they do at the expense of our customers. Make no mistake, I’m not arguing against best practices or tools. We do the samething. However, the status quo, even if it means well, can blind you to what’s important.

What’s important, you ask? Our customers. Doing the invisible things that make their experience its best. Focusing on accessibility, performance and security. Making sure the the small screens look just as good as the large screens. Gutenberg, the project name for the new editing interface, will make one theme become many. A customer using a theme will be able to bend it many different ways – turning the focal point of the theme from its capabilities to its design.

Customers want their sites to look just right. They don’t want to learn a theme. So when the new age of themes begins, promise me you’ll focus on what they want. You won’t get distracted by the many different ways to extend this new editor or become mired in all the ways to prevent the abuse of customizing it.

This matters. Your customers need you. And you’ll stand out and put more food on your table.

The title may strike you as a bit ominous, but fear not. Underscores, our popular starter theme for WordPress theme development, isn’t going anywhere. As we continue to push for consistency in themes and imagine what they might become with Gutenberg, we’re bringing our attention back to Underscores. 🚀

For the last year and a half, we’ve experimented with a new starter-theme generator called Components. It was a way to make a few different theme “types” comprised of different components. The starter themes born from it brought with them more code and styles, and gave theme authors a bigger head start in their work. The generator we built to piece the different components together got complex quickly, though. We created a plugin to test builds locally and struggled with a seamless way to make many starter themes from one code base.

We learned a lot, though. We worked on Components at two team meetups, made almost 900 commits to the project and launched dozens of themes with it. However, we hit a point where we realized we had over-engineered parts of the project. The original idea is still solid: make starter themes do more by crafting them out of building blocks. But we didn’t hit the mark, so we’re retiring Components, and looking to bring some of what we learned there to Underscores.

In the last year, we’ve gotten a lot of questions from the community about Underscores and whether we had abandoned it. No way! It’s a stable project, and we enjoyed working on something new, away from it. It gave us better perspective and more ideas for the future of Underscores.

We also know that involvement from the community is vital. It’s been a while since we added our first contributor external to Automattic. To that end, we’ve given long-time Underscores contributor Ulrich Pogson commit access. He’s also a contributor to WordPress, most frequently as a member of the Theme Review Team. We’re excited to have his expertise and passion for world-class themes as part of the project. Please join me in welcoming Ulrich! 🎉

It’s always hard to let go of a project, in this case, Components. But it shouldn’t be, when you walk away with more knowledge than before. It has us excited and reinvigorated about Underscores and its role in the future of theming. And we’re glad Ulrich will help us along the way!

What kinds of themes do we look for when we add to our collection on WordPress.com? We get this question a lot, both from existing and potential theme shops. And while some of the specifics evolve over time, the principles of what makes a good theme good remain the same. Whether it’s on WordPress.com or not.

When reviewing themes for WordPress.com, we never accept a theme based on design alone. We want to see the entire theme experience and for that you have to look at the user experience and code too. Why? You can have a beautiful design, but still make a bad theme. So we always look at three aspects, what we call the Three Amigos, named after a popular American comedy movie.

Design

We consider a lot of different design aspects. In general, we look for a strong grasp of design principles, especially methods that help establish harmony and unity:

Perspective: sense of distance between elements.

Similarity: repeating similar – but not identical – elements with strong visual connections.

Continuation: the sense of having a line or pattern extend throughout a design.

Repetition: elements being copied or mimicked numerous times.

Rhythm: achieved when recurring position, size, color, and use of a graphic element has a focal point interruption.

Altering the basic foundation of the design achieves unity and helps keep interest.

Code

User Experience

We run through setup to see how challenging it is to make the theme look like the theme demo. Complicated theme setups cause a large amount of user frustration, refunds and theme switches. We look at theme options to see if they’re intuitive to set up, simple, or complex. Any patterns that may confuse WordPress.com users are noted. User experience might just be the most important thing. You can’t use a theme if you can’t use it.

We’re always open to exceptions, if they can be justified by an innovative or creative theme that users will love.

And one last note – whether our marketplace is officially accepting new theme shops or not, we’re always looking for amazing, new themes. Make one, put it out there, and we’ll probably find it.

This year, we’ve focused heavily on improving people’s experience using themes on WordPress.com. We’ve dug into defining the most common and tricky issues for people using themes through research, user testing, and iteration.

We still have a long way to go toward substantially improving people’s WordPress theme experience. To that end, we’re introducing a new set of requirements for all themes on WordPress.com to follow, geared toward making themes easier for people to set up and use. We call it the TUX List.

It features best practices like this:

Keep widget names descriptive of their location, ie. Sidebar, Footer, etc. Reason: Users can more easily find them and know what area they refer to.

Widget IDs should take the format of sidebar-1, sidebar-2, etc.

Reason: Consistency across themes means that a user can switch themes and not have to reassign their widgets to the theme’s widget locations. It also allows for easier readability in code.

We wanted to share it with the community, since incorporating 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. Nothing on the list should restrict your creativity when it comes to designs.

Give it a read and let us know if you have any questions or ideas on how to make it better. Making themes easier is a job for everyone. Happy theming!

For the latest ThemeShaper remake, we added Featured Content to Twenty Sixteen. That’s standard, but our design called for not showing the featured image of every post, but only the latest post. That image serves as a backdrop to our collection of featured posts, which can be from one to three posts at a time. It’s a neat design pattern, so I thought I’d share the code needed to grab that image.

First, we need to grab the featured posts, and check to make sure there are some posts.

If there is, we assign the post ID of the latest post to a variable, $post_id. We’ll need that later.

Next, if the latest post has a post thumbnail, we create another variable, $big_post_image, and use it to assign the actual output of the image URL.

Finally, we output the markup. It outputs as a style attribute, and you can then style the rest via CSS. In your theme, you just attach the function to the div or html element you want to apply the style on.

That’s it! Hopefully, this code snippet helps you in the next theme you create. Happy theming!

We love a good starter theme. Since launching Toolbox and its popular successor, Underscores, we’ve always reached for a starter theme when building our next, awesome WordPress theme to get us off on the right foot. With Underscores, we always say it gives you a 1,000-hour start. We get excited when we see someone fork Underscores and make it their own, so it shouldn’t come as a surprise that we’re obsessed with evolving what we think of as a starter theme.

Continuing that journey, we’re pleased to announce Components. Think of it as a toolbox for taking your themes where you want them to go, faster. Forked from Underscores, Components gives you a solid base to work from – but it also takes the starter theme to the next level, offering a choice between five different theme types. Each one adds the code needed for starting a certain type of theme. You can select from:

The Classic Blog

A two-column layout

A sidebar with widgets

Navigation in the header

A fixed maximum width of 1120px in your style.css file

The Modern Blog

A single-column layout

A sliding panel for navigation, social menu, and also widgets

A large featured image with full-width script

Portfolio

A portfolio post type, courtesy of Jetpack, added to all the necessary files

A grid portfolio view

A single column blog template

A sliding panel for navigation, social menu, and also widgets

A large featured image with full-width script

Magazine

A front page template with featured images in grid a layout, plus a two-column blog

Layout with excerpts

A two-column layout

A sidebar with widgets

Navigation in the header

A fixed maximum width of 1120px in your style.css file

Business

A front-page template with a custom header, testimonials section, and page content area

A custom testimonial post type turned on, courtesy of Jetpack

A two-column layout

A sidebar with widgets

Navigation in the header

A fixed maximum width of 1120px in your style.css file

Why Components?

So why the different approach with Components? Three main things inspired this direction: the community behind Underscores, the people who use our themes every day, and the web design and development community.

While maintaining and improving Underscores, we always see great pull requests from the community that we turn away because the contributions end up being too specific for a normal starter theme. Many of those additions would have been perfect in most themes. Now, some of them have a home in a project that zeroes in on a certain kind of user with each theme it builds. Speaking of users, we know from launching hundreds of themes on WordPress.com that themes are one of the most challenging areas of WordPress for people to understand. They need more themes that “just work,” and we hope Components will help achieve that. Lastly, the web community has embraced building systems, methodically created with the pieces that make up a site. Even some popular libraries have taken this approach. We see Components as the first step to allowing you to make a starter theme that’s just right for your project.

We’re very excited to see what the community brings to the project and are looking forward to evolving Components with your help. Right now, we’re in the early stages of our vision and execution for Components, so expect both repositories that power this project, theme-components and components.underscores.me to evolve quickly and constantly.

Good user experience in WordPress themes can make the difference between frustrated or happy users. Yet, it’s often overlooked. A solid user experience can feel just right, creating sound expectations and delight. If you’re looking to boost your theming skills and learn more about themes and user experience, we recommend these three recent talks by members of the Automattic Theme Team:

Kirk Wight, A Call for Simplicity: As WordPress blazes into its second decade, theming, plugin development, and WordPress core itself are reaching troublesome levels of complexity and confusion, challenging the very essence of what has gotten WordPress to where it is in the first place. Pulling from diverse areas of culture and tech, we’ll tie together our need for simplicity, and issue a call to arms for the next ten years of WordPress.

Tammie Lister, Theme, Don’t Be My Everything: It’s time to stop putting everything including the kitchen sink into themes. A theme shouldn’t be a bloated monster with an options panel that stretches out the horizon. This talk is a call to action to stop making themes that do everything and start making themes that focus.

David Kennedy, Themes are for Users: In this talk, we’ll explore user research, theme setup, theme options and more. By the end, you’ll know what makes up a theme’s user experience, and how to set your users up for success.

And if you’re still getting started with theming, or even WordPress, wondering how you could ever contribute to WordPress and add value – you’re not alone. Check out Kathryn Presner’s The Techie Continuum, and start contributing to WordPress today!

Devin Price of WP Theming recently interviewed Ellen Bauer and Manuel Esposito of Elmastudio about running your own theme business, selling on WordPress.com, and much more. You can listen to the interview or read the transcript. It’s a great peek inside a successful theme business. Here are a few of my favorite quotes:

Ellen, on the hardest parts of running a theme business:

You have to find a work routine yourself and be consistent. Over the long run, if you want to do your work or job for a couple years, you have to think a little bit ahead. I think this is what we’ve learned over the last years, that consistency is most important. You have to be there for your customers and for your people.

Manuel, on finding inspiration:

All of the stuff that’s happening in your life and around you. It could be food. Print magazines are great inspirations for typography, the detail stuff. But the main designs, the layout, the conception- it comes from weird stuff actually.

Ellen, on focusing a design:

From our experience, we just have the most fun and we can do the best job we can if we do design we just love and we would use. It’s okay, not everyone loves our style of design. I think it’s totally okay because there are so many solutions to doing a WordPress design.

Ellen, on selling themes on WordPress.com:

We always try to do very minimal themes and do them, if you can say, the WordPress way – don’t do a very custom development style, so it’s not that hard to get the themes [to] work on WordPress.com.