Proposed WordPress Customizer Theme-Switching UX

This is a proposal for how theme-switching and theme-installation could be incorporated into WordPress’ Customizer. This will eventually be attempted in some form as a feature-plugin to later be merged into WordPress core. The goal is to soften the distinction between themes and theme options and to make theme switching a fast, streamlined experience built-in with other Customization options in a unified interface.

Themes is a panel, but with backwards-sliding, coming in from the left instead of the right. This implies a new layer of hierarchy above the top-level controls. Switching contexts to the theme-browser is just like switching contexts to a panel, but to exit the themes context, you select a theme. The currently active/currently previewed theme is selected and has an arrow back to the right, to slide back to the top-level controls. All of this sliding can also be triggered by swiping on touch devices.

When a different theme is selected from the theme browser, it instantly slides back to the main panel of top-level controls, but now reflects the controls available in the new theme. This is accomplished by rendering the controls specific to the new theme via ajax and the new customizer sections/panels JS API, and then deleting the controls that were specific to the old theme. This should be doable in a back-compatible way by working some trickery with the existing customizer APIs, caching stuff, and/or leveraging WP-API.

The preview would instantly need to switch to a loading indicator until the front-end re-rendered with the new theme, but that shouldn’t take too long and is unavoidable regardless of the implementation here.

In the theme browser, the add-new-theme functionality would be present via a + new theme tile matching the one in the current interface, and bring up a modal containing the 3.9 pieces of THX. From there, the theme-installer previewer (also containing the theme details) would need to either remain in the (almost-full-screen) modal or open in a new tab that closed on install/close-button-click (or, do a full-screen iframe on top of the customizer and modal with the theme-install-preview, although that might get a bit crazy).

We would need a solution for unsaved changes in previewed themes that are not activated, as theme-specific controls are hidden/removed when previewing another theme.

Prerequisites:

  • JS API for adding and deleting panels, sections, settings, and controls, to complement the existing controls API.
  • Distinction/ability to save changes without publishing and/or the ability to save without activating a new theme. Although, not distinguishing between saving and saving and activating would probably make more sense here.
A screenshot of the Twenty Fourteen theme with the Fourteen Colors plugin, featuring a light gray contrast color and a light blue accent color

Custom Colors in Twenty Fourteen

Twenty Fourteen is WordPress’ shiny new default theme, released Thursday alongside WordPress 3.8. I worked with the Twenty Fourteen development team throughout the cycle, doing everything from proposing features to removing features to proposing design tweaks, fixing bugs, and testing the theme everywhere.

Screenshot of the Twenty Fourteen WordPress theme, taken from the demo site on WordPress.com

Twenty Fourteen features black, white, and green as its primary colors. In September, I introduced an “Accent Color” feature that allowed users to change the green color to any color of their choosing. With a lot of help from the rest of the Twenty Fourteen development team, the feature made it into the theme and was improved through the duration of the development cycle.

But just over a week before the theme was set to debut to millions of self-hosted WordPress users–and after the theme had debuted on WordPress.com–the accent color feature was removed.

There are several reasons for the feature’s removal. For one, it was possible to pick any color, which meant that users could select low-contrast colors rendering portions of their site unusable. Additionally, two alternate shades of the user’s choice of color were generated behind the scenes, meaning that the feature was code-heavy. The default WordPress themes seek to be as code-simple as possible, to aid beginning developers and to make the default themes good candidates for use as starter or parent themes.

Because of the short development cycle for WordPress 3.8 (the cycle actually overlapped 3.7, but there was very little time devoted exclusively to 3.8 after 3.7 came out), it was clear that there wasn’t time to develop an alternative or improved accent color implementation in the theme, and the feature was removed.

However, I moved the feature to a plugin while it was removed from the core theme. I also added a new “Contrast Color” option. Over the past week, I’ve built out this new plugin, entitled Fourteen Colors, and I pushed a polished version 1.0 just as WordPress 3.8 was released.

A screenshot of the Twenty Fourteen theme, with a gray contrast color and a yellow accent color applied

In just a couple of days, the response to Fourteen Colors has been amazing. I knew that it was well-done both inside the code and to the end user, but I never expected such a positive response from developers and casual users alike. Check it out now, review it, spread the word. And let me know if you find any bugs, maybe-bugs, ideas for enhancements, or anything else. Fourteen Colors is off to a great start, and I’d like to keep the momentum going! One of the most significant things that helping develop Twenty Fourteen taught me is the power of the community: the more we collaborate and help each other towards common goals, the more successful we are in our individual pursuits are as well.

Thirteen or Fourteen Colors

You may have noticed that I’ve added my eighth plugin to WordPress.org: Fourteen Colors. It adds color customization to the new Twenty Fourteen default WordPress theme, half of which was developed in the core theme before being removed yesterday, just over a week before the theme’s release (broader explanation coming soon).

In the next week, I’ll build out Fourteen Colors, creating what I hope is my most polished plugin yet, inside and out. I already know that I’ll be further utilizing the function that generates color variants, which I wrote when the feature was developed for the core theme, to ensure the highest color contrast possible given various contexts within the theme.

I also created a plugin to customize the (much bolder and more varied) colors of the Twenty Thirteen theme, entitled Thirteen Colors (that plugin is much less elegant than I hope Fourteen Colors will be). I’m starting to wonder why WordPress’ default themes don’t place an emphasis on built-in visual customization. Twenty Eleven was the last to have comprehensive color customization options, or even a link color option, for that matter.

The reasons that the custom accent color was removed from Twenty Fourteen seem referable to the broader lack of customization available in default themes. Hopefully, Fourteen Colors can successfully provide an answer to the concerns over giving users the power to make “bad” color choices, at least in terms of readability if not in terms of beauty. As for code complexity, maybe it’s time to consider customization as a component worthy of adding some weight, like featured content is in Twenty Fourteen. At the end of the day, these themes are the first thing users encounter when getting started with WordPress, and it seems wrong not to showcase the power and flexibility of the platform in the first-run experience (the ability to easily browse for new themes is also critical here).

Maybe Twenty Fifteen will bring the power of native visual customization back to the end user. After all, we have a wonderful Theme Customizer that works excellently for visual customizations. I’d love not to create a “Fifteen Colors” plugin next year.

Figure/Ground theme, featuring orthogonal black and white rectangles galore, in a screenshot from its alpha development.

New Theme: Figure/Ground

I’ve just launched a new theme here on the root portion of Cello Expressions (containing the about & contact pages & the blog): Figure/Ground.

Figure/Ground is completely different from any WordPress theme (or website, for that matter) I’ve ever seen. The site’s design is alive and quite literally evolving before your eyes, as geometric patterns emerge and disappear in the page background.

figure/ground in paper, 18x24"
A physical experiment with figure/ground; with the purpose of defining two squares.

Artists will quickly realize the Figure/Ground is a play on the concept of figure/ground, where one color represents a figure and another represents the background. Figure/ground exercises are common for architecture students because they aid in the exploration of the ideas of solid and void.

The Figure/Ground theme takes the concept of figure/ground to another, leveraging the digital medium to create a dynamic animation that constantly creates and destroys space. The figures are drawn and removed at randomly-generated positions in randomly-generated sizes at a fixed interval. When the page initially loads, a few hundred iterations of this process are instantly run, creating the initial figure/ground canvas. As a result, the background never repeats its patterns and starts from a different configuration on every page load. The constant motion, as well as the constant creation and destruction, create  dialog about modern society’s constructive and destructive nature.

Outside of the figure/ground animation, the rest of the theme strictly adheres to a flat, two-color palette (plus an accent color), extending the figure/ground concept to the content. As the user scrolls, different content (posts, comments, widgets), alternates in its use of colors and background colors, which flow directly into the background animation without visual separation. While it’s besides the point for this theme, this is flat, for the record.

Layouts take hints from both Twenty Thirteen and Twenty Fourteen, but you’ll hardly notice within the dynamic visual context of something entirely new and different. My ideas for this theme slowly evolved from a series of digital art projects that I call “Pseudo-random Experiments” (you’ll see the figure/ground random rectangles experiment there, as well as the circular version.)

Overall, the concept of the Figure/Ground theme is simple: to transform your site into a work of art.

Future Availability

From the start, my plan has been to release Figure/Ground as my first public WordPress theme in the WordPress.org repository. Getting it from its current barely-“finished” form to a polished, publicly available theme will take time and effort. The WordPress.org repository isn’t in great shape at the moment anyway, and there is an ongoing effort to improve the theme experience within WordPress as well. Because of the potential for improvements there, I’m going to aim for a December/January timeline for making Figure/Ground public, which also gives me plenty of time to polish it.

Customization Potential

Figure/Ground Circular mode screenshot.
An early version of Figure/Ground in circular mode.

Figure/Ground is also unique in its huge potential for visual customization. The theme uses only three colors (off-white, off-black, raspberry by default), and each is customizable via the WordPress theme customizer. Additionally, the following components of the figure/ground animation can be customized:

  • Rectangles or Circles for the dynamic animation. Circular mode will also make the content boxes rounded in a fun way.
  • Maximum rectangle width
  • Maximum rectangle height
  • Maximum circle radius (circular mode)
  • Delay between each figure is drawn/removed
  • Initial iterations of figure/ground to run on page load
  • Ability to disable the dynamic animation, in favor of only running the figure/ground background generator on page load

I’m very interested in your feedback on this exciting new theme. Please leave a comment or contact me directly if you have any ideas or suggestions!