Two Distinct Approaches Aimed at Making Site Customization in WordPress Easier

During the State of The Word at WordCamp US 2015, Matt Mullenweg highlighted customization as the largest opportunity to improve the WordPress experience. In a recent interview on WordPress Weekly, Mullenweg expanded on his thoughts saying he could see the customizer being the main focus of a release.

“If I think about leading a release, I could see the Customizer being a main focus of it,” Mullenweg said. “It’s so important to the user experience of someone new to WordPress especially, but also to everyone who uses WordPress day to day.”

There is an effort underway to improve the way users customize their sites in real-time via the customizer. One method that already exists in core is the ability to Shift+Click on a widget in the customizer preview and the corresponding controls will open in the customizer.

ShiftClickEditWidget.pngOne of the downsides to this technique is that the tooltip only displays when a user hovers over a widget making it difficult to discover. The other is that touchscreen devices don’t have a way for users to Shift+Click. Weston Ruter’s opened a trac ticket  aimed at exploring ideas to make something better.

The second method is an internal project at Automattic that has recently been open sourced into a plugin that’s freely available on GitHub. The plugin is the result of extensive user testing on which showed users tried clicking on the parts of the page they wanted to edit, rather than searching through the menus in the customizer.

This approach uses persistent icons to show the user which parts of the site can be customized when the customizer preview pane is open. When a user clicks on an icon, settings specific to that area are opened in the customizer. CustomizerIcons.gif

I tested the plugin and joyfully found it intuitive to use. One of the first things I noticed is that the icons don’t have tooltips associated with them so it’s difficult to know what you’re about to edit. Thankfully, someone has already opened an issue on GitHub and it looks like title attributes will be added in a later release.

Compatibility With All Themes Is a Pipe Dream

Considering the icons are colored, it’s possible that they may not display properly on certain themes. I asked Payton Swick, an Automattician working on the plugin, if they’ve run into support queries related to themes since launching the feature on, “Yes, and we’ve adjusted the plugin occasionally to help with that, but more often we’ve adjusted the themes,” Swick said.

“The most common issue is the z-index arms race. If a page places the site title on top of the header image, for example, we have to make sure the icons for both are distinctly positioned.

“Another example is when a large menu drop-down appears, covering elements on the page; there’s no easy way to determine if something is ‘covered up’, so we’ve tweaked the z-index many times on both the plugin and themes to try to find a happy middle ground.”

The icon approach limits compatibility with certain themes but as Swick notes, compatibility with all WordPress themes is close to impossible, “I’d say that something like this that tries to support all WordPress themes is a pipe dream,” he said.

“WordPress themes and plugins that modify the user interface can use literally any markup or CSS/JS, so there’s always going to be places where it falls short. We’ve done our best to support modern themes built on frameworks like Underscores or that follow theme standards and to fail gracefully when the plugin can’t figure out what’s going on. That said, there will still be incompatibilities.”

Automattic could have chosen to keep this enhancement for themselves and its users but opted to work with the community instead. “It was successful enough that we decided to open our work to the wider WordPress community,” Swick said.

“I’m certain it could use some clean-up and adjustment to better serve arbitrary sites. That’s one of the reasons we mentioned it on Trac. We hoped that some core developers would be interested enough to either borrow the ideas for core or contribute to the project directly.”

The plugin is experimental and not recommended for use on production sites. However, the team is anxious to hear feedback from a wider audience.

“It’s not our team’s main focus right now, but the plugin is out there to get feedback and to be used, so we are making changes when we find bugs,” Swick said. “To contribute, just open issues/pull requests on the repo. Issues labeled with bug will get the most attention.”

Users are encouraged to try the plugin on a test site with a number of different themes to see if it improves the customization experience. If you have any feedback or ideas on how to improve this effort, please share them in the comments.


13 responses to “Two Distinct Approaches Aimed at Making Site Customization in WordPress Easier”

  1. I am one of those who absolutely hate the customizer, I shouldn’t say “hate” but that describes just how much I dislike it and how much I have been saddened by all the human effort that has been poured into it rather than other parts of the WordPress project. But WOW, that customize-direct-manipulation plugin (maybe it needs a better name) changes everything. Now, thanks to it the customizer finally makes sense.

    Concerning the theme compatibility issues, and more specifically the z-index and color cases, maybe the plugin could add some settings page to the backend where the user (or more maybe even the theme author) could set their appropriate values and styling.

    Anyway, thanks for fixing the customizer experience.

  2. This looks like a very promising option for the future of editing WordPress sites. I think the biggest issue into the future might be the interaction between the thousands of existing themes and plugins. If this does take off, one would hope to see it be potentially enforced at the core level of WordPress. This way they might be able to implement some mechanism to make future themes and plugins support this type of framework. I myself often have multiple windows open when managing a site as it helps to easy the workflow of my edits or linking, etc. Having a framework that could make this process even easier then it already is would be welcomed by me.

  3. @jeff Thanks for the post. I’ll note that the tooltip+shift+click to edit is not what #27403 is proposing. On the contrary, tooltip+shift+click on elements is something that has been in core since widgets were added to the customizer in 3.9. It was later implemented for nav menu items as well. In 4.5 this was expanded to any element that implements the selective refresh interface, so commonly the site title, tagline, and custom logo. The ticket is all about figuring out a good theme-compatible solution for discovering editable elements. The reason why the tooltip with tooltip+shift+click was added is that it is compatible with virtually all themes. The UI that the Customize Direct Manipulation plugin introduces adds the needed discovery, but it has the challenge of theme compatibility. So yeah, we’re trying to find a good solution to upgrade the existing tooltip+shift+click behavior in core. The Customize Direct Manipulation plugin is one such solution.

  4. We’ve had quick edit links inside Note plugin since it’s release. You can open an entire sidebar, or an individual Note widget by clicking within the previewer. Nice to see someone with more clout introduce it, maybe broaden it’s adoption.

  5. Possibly naive question, but do we have user research or stats that demonstrate how often people customize the look of their sites? I’ve always felt that you design a site, launch it and then got on with the business of the site, whatever that is.

    I can see a fair amount of tweaking early on to get things right and adjust things that you might have missed in a first pass, but it rather mystifies me that people seem so fixated on the Customizer and related issues.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: