Customizer Theme Switcher Update

The Customizer Theme Switcher feature-plugin brings theme switching into the Customizer. This project aims to clarify the relationship between themes and theme options by introducing a themes “panel” (it’s actually a custom section since it contains controls, not a multi-level hierarchy of sections and controls) to the Customizer. The themes panel slides in from the left instead of the right, implying a hierarchy of:

  1. Themes – change the entire layout of the site
  2. Theme/site options – tweak various options (default view)
  3. Panels – edit larger groups of site appearance options, such as Widgets and Menus

Essentially, the phase of the project proposed for WordPress 4.2 (and that exists in the plugin currently) brings the “THX38” theme browsing experience into the Customizer. Installed themes are browse-able directly in the Customizer controls panel, and have a details modal like the admin page. Functionally, theme-switching is accomplished by reloading the Customizer to live-preview a different theme. @westonruter is working on several related improvements that could further streamlining the experience from a technical perspective, but this feature plugin is focusing on the switching UI, with other improvements considered “nice to have”. @folletto and I have also started planning a second phase of the project for a future release that would also address installing new themes, and simplifying the distinction between installed and available themes. @designsimply is currently in the process of user-testing the plugin.

Get Involved

We’ll hold a meeting in #core-customize Slack to discuss the progress of the plugin this Tuesday, January 27, 2015 16:00 UTC, and continue at that time weekly as needed at that time. Development is happening directly in the WordPress.org plugins repo – I’ll give commit access to anyone interested in contributing code. Outstanding issues are noted below, but the plugin is generally ready for review of code, inline-docs, design, and accessibility (with each of those being theoretically good-to-go in the plugin). Note that the plugin can’t really work on mobile because the Customizer doesn’t really work on mobile, see #28784 (great 4.2 candidate if it gets a patch).

Known issues (see also a list of core merge notes in the plugin’s readme):

  • Animation closing the themes panel is broken (see commented-out CSS) (@celloexpressions)
  • Persist “return” & “url” URL parameters in the switch-themes links (@celloexpressions)
  • Don’t show the loading animation if there are unsaved changes to avoid getting stuck. Actually fixing the underlying issue requires a minor core patch. (@DrewAPicture)
  • Break out of the customize.php iframe if the Customizer was loaded with the customize-loader script (@celloexpressions)
  • PostMessage setting transport may not be working immediately after switching themes, cause unknown (@celloexpressions)

#customize, #theme-switcher, #themes, #thx38

THX38 “Theme Experience” Overview

Re-imagine a theme experience that is beautiful, visually focused (able to display more/bigger screenshots), fast, and mobile-ready. Plugin url: https://wordpress.org/plugins/thx38/

Initially we were covering themes.php and install-theme.php. Time and dev resources constraints forced us to focus the last few weeks solely on getting themes.php fully ready.

Screen Shot 2013-10-23 at 5.18.19 PM

Screen Shot 2013-10-23 at 5.18.29 PM

Screen Shot 2013-10-23 at 5.18.44 PM

Problem Solving

Problems:

  • A very text and information heavy interface for something that is eminently visual.
  • Convoluted presentation of your current theme, your installed themes, and adding new ones.

First user test with current admin interface showed the amount of time between arriving at themes.php and understanding what was going on (which themes are installed, how to add new ones, etc) was quite big, going to the install themes screen took them ages. In contrast, tests ran with the THX plugin showed us the interface was grasped very fast, and people got to the install themes page in a matter of seconds.

Solutions:

  • Moved theme descriptions to a details overlay, and streamlined the presentation to its bare bones.
  • Removed tabbed interface and made adding new themes organic to the grid presentation.
  • Focused on perceived performance, made theme browsing and search faster, with a fully responsive design at all stages.
  • Added url triggers for opening specific themes, as well as arrow-keys navigation while browsing the detailed view.
  • Added basic support for multiple screenshots per theme, and bigger display.
  • Focus on the customizer as the primary action for your current theme.

The installing themes screen was left as a prototype for the future.

User Testing

  • https://make.wordpress.org/ui/2013/08/20/thx38-first-meeting-summary/
  • https://make.wordpress.org/ui/2013/09/05/update-on-thx38/
  • https://make.wordpress.org/ui/2013/10/23/thx38-0-7-1-user-testing/

Early user testing clearly showed understanding and interacting with the screen is not easy. One user eloquently said, “I was thinking I would have a screen with a bunch of themes to look at.” For install-themes, filters proved to be hard to use paired with the fact the words users think of to describe themes aren’t present in the theme keywords we offer.

#3-8, #core-plugins, #feature-plugins, #proposal, #themes, #thx38