Theming with the REST API – Meet Picard

If there’s one thing that has been making waves in the WordPress ecosystem this year, it is the new REST API. Officially known as WP-API, and currently available as a plugin, it is due to be rolled into core at some point this year.


A REST API may not initially seem like a useful feature for theme developers. It is clearly very useful for those looking to use WordPress as an application platform, but how the REST API can be used within a theme is perhaps more opaque.

The Theme Division at Automattic have had an eye on the potential uses of a REST API powering a theme for at least a couple of years now, and in recent months some concepts have started to take shape.

The Future is JavaScript

There are many potential benefits to building themes that rely more than ever before on JavaScript and the REST API, including but not limited to:

  • Design: We can have smooth transitions between the different types of content on our websites.
  • Speed: We can store content from the REST API in localStorage (effectively the browser’s memory). This means that on the initial site load we can store any post that is retrieved. Imagine a user clicking a ‘read more’ link and the full post being displayed without the need of a further server request.
  • Offline: By handling interactions with JavaScript, as developers we gain control of what happens if the user goes offline while browsing our site. We can let them know that the server doesn’t appear to be reachable and we can present content that we know is stored in their browser in a graceful way.

Picard Screenshot


In February of this year, the team worked together on a prototype REST API theme that has become known as Picard (a geeky nod to “the next generation” of themes). To create Picard, we used React, a JavaScript library for building user interfaces. Coupled with vanilla JavaScript and a number of other libraries sourced through npm, we were quickly able to produce an engaging, working prototype.

Recently, I have been talking about building themes with the REST API and our approach to building Picard at a number of WordCamps so far this year, culminating in a workshop at the inaugural LoopConf.

Today, Picard is now publicly available on GitHub.


We intend to continue developing Picard and working on some of the harder problems that we have not yet solved. We aren’t stopping at Picard either. Our experiments have led us in various directions. My colleague Kirk Wight has created another experimental theme called Tango. Tango is an extension of the concepts we are exploring with Picard, blended with the bulletproof Underscores starter theme.

Make It So

The future of WordPress theming may dramatically shift with the official adoption of the REST API but you don’t have to wait for the future to take advantage of it now. Clone Picard and Tango. Experiment and see what you can do. These are exciting times for themes!

Further Reading and Resources


Photo credit: JD Hancock/flickr

MacBook Air with person using keyboard

Building a Strong Foundation with Keyboard Accessibility

When you build a house, you start with the foundation. It becomes the base upon which you form everything else around. Without it, your house could crumble because of improper construction. Web accessibility shares some of the same principles. You need a solid foundation to have an accessible website and WordPress theme.

Keyboard accessibility can serve as your foundation for an accessibility-ready theme, helping you create a base that you can build on with confidence. Once you have it in place, accessibility becomes easier as you go.

Keyboard Accessibility Principles

But where do you start? You can tackle any of the four principles below one at a time. Pick one, practice implementing it in your next theme, and you’ll see the benefits. Bringing these to your project matters more than mastering them in any specific order.

Use the Keyboard

Know how to navigate with a keyboard alone. WebAIM, a non-profit organization focused on web accessibility, has an excellent article on keyboard accessibility. It includes how to use a page with the keyboard alone. From the article:

With modern web accessibility, there are many ways in which keyboard accessibility can become difficult or impossible. Fortunately, keyboard testing is easy – simply put the mouse away and test the page using only a keyboard. The tab and shift + tab keys can be used to navigate through links and form controls, and Enter can be used to activate links, buttons, or other interactive elements.

Who uses the keyboard every day on the Web? People who are blind use it almost exclusively. People with low vision may also use it if a page can be enlarged and the contrast is high enough. Those with motor disabilities often can’t use a mouse. Alternative devices also come into play too, like those that allow users to “puff and sip,” and work with airflow from the mouth. These devices interact with the computer similar to a keyboard, so they benefit from proper keyboard accessibility.

Watch your Source Order

Keep your source order in mind. Source order means how your HTML is ordered and how it flows on the page. As you create your theme, make sure that it’s logical. Turning off CSS provides a good, simple way to test this. Once everything on the page becomes linearized, does it still make sense?

Links and Buttons are Links and Buttons

Use semantic HTML and controls that have accessibility already built in. This means that links Home and buttons Main Menu are your best choice. Only three elements in HTML can be focused on by default: links, buttons and form fields. If you use a

or to create an element that’s clickable via JavaScript, a keyboard user will not be able to reach that element. Sure, you can use JavaScript to make it focusable, but why would you if HTML already does the work for you? If you don’t like the default styles of a normal , then you can style it however you’d like with CSS.

Don’t Lose Your :focus

Design and pay attention to the :focus states for your theme. Users with disabilities have an array of needs that don’t always start with a screen reader. Many users access the web using a keyboard alone, or other devices that rely on keyboard access to navigate the web. Having visual :focus styles on elements like links, buttons and form fields means they can see where they are as they navigate. For example, Underscores comes with this bit of CSS on links in the Reset section:

a:focus {
	outline: thin dotted;

a:active {
	outline: 0;

Having a thin, dotted outline on :focus is considered the default focus style in most browsers. It’s a good place to start, but if you’d like something different, you can design it. However, do not completely remove focus styles by setting outline: 0. That leaves your theme unusable by people who depend on the keyboard. Focus states can often mimic hover states, but they do not have to be identical. The important point here is that they do not rely on color alone. Many users have varying degrees of color blindness and/or low vision. Relying on color alone can become problematic. Using an outline, border or some other kind of shape helps your focus styles shine.

Potential Problems and Enhancements

Keyboard accessibility can become more complex in a few places. Patterns like dropdown menus, menu toggles, tabs, and modals require extra care and thought, but the same principles apply. Knowledge of the tab index attribute and ARIA roles and properties come in handy here. These advanced techniques are beyond the scope of this article, but some useful posts and tutorials have more information:

Further Reading and Resources

Let me know if you have any questions in the comments. Happy theming with accessibility in mind!


What Developers Need to Know About Theme Design

Making a theme is really exciting. It’s a great way to practice your coding skills. It could be a good way to bring in some extra pocket change. Best yet, seeing someone use something you’ve built is incredibly rewarding.

I’ve watched the quality of theme design get better and better in the WordPress.org directory in the last few years, but I still see a lot of themes that look the same. Free themes still lag behind premium themes in terms of design quality. You can help change all that. You don’t need a design background to make good design decisions: a developer conscious of design can still make a good-looking theme.

Here are a few general tips and tricks you can apply to your themes to give them a solid design base, regardless of your background.

Pick a Direction

When planning out your new theme, have a specific user or use case in mind. That use case shouldn’t be “a theme for everyone.” Your use case can still be pretty broad — “a modern theme for small businesses” is still targeted enough for your ideal user to solve a specific goal by using your theme. Alternately, you can get super specific, giving yourself a prompt like “a food blogging theme targeting smartphone photographers.” Each theme idea has a different set of constraints, and by embracing and sticking to these constraints, you can make better themes.

Once you have a direction in mind, think through that scenario and what your target users would need. The more you imagine how people are going to use your theme, the stronger your concept becomes.

For a modern business theme, think about what a great business website needs. If the company has a physical location, site visitors need an easy way to find an address or directions. People visiting the site need a way to contact the business, via phone, email, or contact form. The theme needs strong page templates, but probably not a unique blog template. It probably needs a navigation bar that can support up to a dozen or more pages at various levels. Typography should probably be strong and serious. A business might also need to display their products, so you could consider adding support for popular e-commerce plugins.

On the other hand, an amateur food blogger, especially if they don’t have a nice camera, needs a theme that focuses more on super strong typography. Photos should be present, but de-emphasized in case they aren’t top-quality. The theme’s users need a way to easily display recipes. Maybe this means building a plugin that pairs with the theme for extra feature support, or maybe it means really nice post styling. A variety of page templates probably aren’t extremely important, but well-styled category archive templates are. Type can have a little more personality, but still has to be readable.

In both situations, you want to have a strong responsive design so site visitors can browse on their phones or tablets. After all, 50% of web traffic comes from mobile devices.

Look at other themes and websites that fit within your use case. Find five really great ones and figure out what makes them great. Take these insights and apply them to your theme.

Visual Design


Typography is probably the most important part of the vast majority of themes. What’s a site without text? Type needs to be clear, readable, and context-appropriate. There’s a couple rules of thumb you can use to make sure your theme’s typography looks good.

The hardest part of theme typography is picking the right fonts. The “popular” sorting option on Google Fonts is a surprisingly okay place to start looking for a font to use. Try to pick fonts that have multiple weights. Depending on the font, a light or semibold weight might be more appropriate than just regular or bold. At the very least, avoid using fonts that don’t come with bold or italic. There is (finally)! a “number of styles” filter in Google Fonts that you can also browse through. Don’t trust Google’s recommended font pairings — they’re actually pretty poor.

If you want to combine a serif and a sans-serif and you’re unsure which typefaces to pick, go for a font family. These are built to have similar features and will naturally pair well. Some families on Google Fonts include Merriweather Sans and Serif, PT Sans and Serif, and Noto Sans and Serif.

When in doubt, use font combinations from sites you like.

Once you’ve chosen your font(s), you need to style your text to be readable. This means using appropriate font sizing. Don’t make someone squint! Use at least 14px or higher for your body text. If 14px looks too small, don’t be afraid to go up to 16px, or even 18px.

One of the biggest issues I see concerning type on themes is an overall lack of line height, which is the space between each line of text. As a general rule of thumb, my headers are always between 1.2-1.4* the size of my font, and my body text is almost always between 1.4-1.6* the size of your font. And the awesome thing about line-height is you can even just use line-height: 1.4 instead of having to calculate the actual pixel value.

As a general rule, paragraphs shouldn’t be more than 50- 75 characters long. This helps keep them nice and readable.

Finally, limit the number of font styles. I mentioned earlier that you should look for fonts that have multiple font weights. While you should seek these out, don’t combine too many different font weights and sizes, since they negatively impact your content’s hierarchy and flow.


There is a lot of psychology around color. You don’t need to be an expert in color, but learn a little bit before you pick them for your theme. Colors also have different meanings in different cultures, so keep your audience in mind when picking your palette. For a good introduction to color theory, watch Aaron Jorbin’s presentation on WordPress.tv.

Color also affects whether or not your users will be able to view your theme. Keep in mind contrast when designing your themes — contrast that’s too high or too low makes it hard for people, especially people with visual impairments, to read your text and navigate through the site. Keep in mind people with low vision or color blindness.

Don’t use too many bright or bold colors. They’re great for emphasis and drawing attention to specific parts of the page, but too many strong colors can make your theme hard to look at, or can make it difficult for people to find the most important content on the page.

Soften your blacks. Pure black doesn’t really exist in the world around us, and pure black on the web ends up looking harsh and unnatural. Add hints of color to your black by going up and right in most color pickers, or go for a dark grey.

If you’re struggling with color, here’s some things you can do:

  • Stick to dark text on a light background with one or two accent colors. You can’t go wrong with dark grey text on white.
  • Use a site like Adobe Color or Colour Lovers to find nice palettes.
  • Borrow color palettes from sites you like.


Let everything breathe. Use ample white space between separate elements in your theme.

Finding the right balance of whitespace is hard. When in doubt, l o o s e n  t h i n g s  u p  a  l i t t l e. (Just not your lowercase text — only add letter spacing to uppercase text.)


Don’t go crazy with the details. Less is more.

For example, consider if the drop-shadow you’re using adds a necessary sense of depth to your theme, or if it’s purely decorative. If it’s necessary, tone it down a little. In general, don’t use drop-shadows darker than 25% opacity. The same can be said for gradients; try to keep gradients subtle.

Use animation sparingly. I mean really sparingly. Inappropriate animation is jarring and detracts from your theme. Motion should only be used to show change, not for decoration.

UX Design

There is nothing worse than finding a theme that looks awesome and does what you need, only to install and activate it and find a thousand options you need to hand-configure to make it look like the demo.

Many of WordPress’s core philosophies revolve around simplicity and ease of use:

  • Great software should work with little configuration and setup.
  • Design for the majority.
  • Decisions, not options.
  • Clean, lean, and mean.
  • Striving for simplicity.

You should take these core philosophies to heart when creating your themes. Cut the number of options down to what’s absolutely necessary. For example, instead of letting people control every single color in your theme, let them choose two or three and generate a color scheme based on those colors. Make smart defaults and informed assumptions. If you include options that can be previewed, put them in the Customizer. Stop using gigantic theme options and settings pages. They are almost universally a bad experience for users.

Lastly — user test! If you’re creating a premium theme, you owe it to your users to make your theme as easy to set up and use as possible. UserTesting.com is relatively cheap and easy. Running as few as 3 user tests will catch the majority of your theme’s issues.

Free theme? No budget? Ask around for some beta testers. Don’t want to? Then at the very least, set up your theme on a couple different demo sites. Try it on one totally new, empty site, and then try setting it up on a site that already has content. Record your screen as you set it up. If you did well and remembered where everything was — awesome! You can now use that video as documentation. Did you struggle? Figure out where the process broke down, and fix it.

Love the idea of user testing? Read Rocket Surgery Made Easy by Steve Krug. It’s short, concise, and explains everything you need to know to run a good user test.

You don’t need to be a designer to make a good theme — you just need to be conscious of your design decisions. Now go forth and theme!

Hand turning up volume on sound board

Up Your Theming Game by Reviewing Themes

You have strong theme sense, you’ve started working on or released a theme into the world, and you want to get better. You can do just that and do it without one design iteration or a single line of code.

Join the WordPress Theme Review team.

Few communities like the WordPress community exist in the world. You’ll find many opportunities to make behind-the-scenes contributions that have huge ripple effects. The WordPress Theme Review team is one of those opportunities. If you’re a themer at any level, you can learn more than you ever would creating themes by yourself.

You’ll get to know the theme requirements. Reviewing themes taps you into the pulse of WordPress theming and its best practices. You’ll become an expert with the theme requirements in no time. With that knowledge, you’ll be able to create better themes, and create them faster. Plus, you don’t really know something until you have to explain it with clarity to someone else. You’ll do that with each review.

You can contribute without code. You know and I know it, seeing your name on the WordPress credits page is a thrill. However, you can help WordPress in many ways without knowing the ins and outs of code. Contributing to the Theme Review team can improve your code skills fast. You’ll read more code and provide more feedback than you could on your own. Each time a theme you reviewed goes live, you’ll feel just as good as seeing your name on the WordPress credits page – promise.

See better themes everywhere. This should go without saying, but with each theme you review, you’ll have a chance to make it a little better. That means better themes for the users of WordPress and better experiences across millions of sites. More people will be able to find a theme that fits them perfectly, and be more willing to publish and share their ideas with the world. What a great way to spend a few hours of your time.

You’ll find inspiration and become a better themer. Each new theme review will expose you to new ideas, from design to code to tools to process and so much more. Every theme has its own dose of inspiration. Take it in. Experiment. Iterate. Repeat.

Help people create. At the end of the day, you’re doing something incredibly special – you’re helping someone’s creation come to life. I love theming because you get to build something from scratch. You mix some art, science, and part of you into something that has never existed before. Creating is good, helping others create is even better.

Learn from shared knowledge and teamwork. When reviewing a theme, you’re not just helping or teaching – you’re on the same team. You have so much to share with each other. You both have the same goal. It’s not about who knows more, it’s about how much you know together. See what you can do with it.

Learn about the WordPress Theme Review team and become a reviewer today.

Happy theming theme reviewing!


Working with the Eventbrite API Plugin

Eventbrite and WordPress are the perfect fit, but until now, integrating the two has not been for the faint of heart. In early 2014, Eventbrite announced its new upcoming REST API, and this became the perfect opportunity to give theme developers an easy-to-use set of tools for working with Eventbrite events: the Eventbrite API plugin.

The plugin gives theme developers three ways to interact with the Eventbrite API:

  • Theme support
  • The Eventbrite_Query class
  • Helper functions

Theme Support

While the Eventbrite API plugin can display events in any theme, events look their best if the theme declares support and provides tailored templates. This simple process guarantees that events fit perfectly with the theme design, and adding support should take no more than ten minutes.

  1. Add a support declaration, hooked to after_setup_theme. There are no arguments, and usually this can be added to a theme’s existing setup function.
    function themeslug_setup() {
    	 * Add theme support for the Eventbrite API plugin.
    	 * See: https://wordpress.org/plugins/eventbrite-api/
    	add_theme_support( 'eventbrite' );
    add_action( 'after_setup_theme', 'themeslug_setup' );
  2. Create an eventbrite folder in your theme, and copy over the plugin’s main template files (tmpl/eventbrite-index.php and tmpl/eventbrite-single.php).
  3. Compare the markup in eventbrite-index.php to your own index.php and adjust as necessary. Also, verify that your markup for archive titles matches the Eventbrite template’s page title. The Eventbrite templates don’t use template parts for the post markup, so you may need to compare with content.php or the like. Of course, there’s no reason you couldn’t add a content-eventbrite.php to your theme, if you prefer.
  4. Repeat step 3 with eventbrite-single.php and your own single template.

That’s it! If support is declared, the plugin will use those templates if they exist, or fall back to the plugin’s templates. To see some custom templates in action, check out any of the Twenty* default themes; their templates are included in the plugin.

Eventbrite integration with Twenty Fifteen.

Eventbrite integration with Twenty Fifteen.

The Eventbrite_Query Class

It was important to us that working with the Eventbrite API plugin should be a simple and familiar process for theme developers, with a low barrier to entry. With that in mind, we developed the Eventbrite_Query class, so fetching and displaying events is as simple as making a secondary loop (in fact, the class extends WP_Query). This allows for easy creation of special-purpose loops, widgets, creative page templates – any combination of events you want to display in a theme.

	// Get the next three unpublicized events for the Apollo Planetarium.
	$events = new Eventbrite_Query( apply_filters( 'eventbrite_query_args', array(
		'display_private' => true,
		'limit' => 3,
		'venue_id' => 6955925,
	) ) );

	if ( $events->have_posts() ) :
		while ( $events->have_posts() ) : $events->the_post(); ?>

There are a few things to keep in mind while working with Eventbrite_Query loops.

  • You can continue to use familiar template tags in event loops, such as the_post_thumbnail(), the_title(), the_content(), etc. They’ve simply been filtered to provide content from the current event.
  • For technical reasons, a few template tags need their Eventbrite equivalent, such as eventbrite_is_single() and eventbrite_edit_post_link().
  • Being a secondary loop, don’t forget to add wp_reset_postdata() at the end.
  • All of the plugin’s template tags are pluggable, and filters exist at various points for further customization.

Helper Functions

If you’re happy processing your own results, and just want an easy-to-use set of tools to handle the API requests, the included helper functions are for you. Each supported API endpoint has its own helper function, and these functions in turn use the Eventbrite_Manager class for the heavy lifting. Not only does this class make the actual API requests, but also handles validation and transients, so you can concentrate on results rather than mechanics.

The Eventbrite API plugin is developed on GitHub, and issues or questions can be posted there or in the forums. Additional info and documentation can be found here.

Along with the Eventbrite Services plugin, it’s never been easier or more fun to display events in your WordPress website. Let us know what you’re doing with Eventbrite, and tell us if there’s anything the Eventbrite API plugin can do to make your Eventbrite integrations easier for you!

The Eventbrite API plugin requires the Keyring plugin for managing OAuth2 authorization to Eventbrite. If you get stuck, check out our detailed instructions for getting connected to Eventbrite.


Underscores.me — The Best Way To Get Started With The _s Theme

Back in February we introduced you to _s, or Underscores, the WordPress starter theme we use at Automattic to build the majority of our themes (and even when we’re not building themes from it we’re referring to it). It’s come a long way since then with a steady stream of refinements. But one thing about it has always been … less than refined. To fork _s you’d have to do a, well, OK, kind of annoying search and replace routine that could easily trip people up if they did it wrong. Thanks to the efforts of Hugo Baeta and Konstantin Kovshenin that isn’t the case anymore. And they’ve done away with that problem with incredible style. Themers, check out Underscores.me:

You can now download your own version of _s with your own custom theme name — the search and replace is all done for you. All you have to do is theme. Plus, you can see all the beautiful people who have contributed to your favorite WordPress starter theme. Look at them all! Community theme development, FTW.

So, what are you waiting for? Get over to Underscores.me and start developing that awesome theme. We can’t wait to see it.