Set a Highlight Color for WordPress Content with Live Preview in the Customizer

In a recent interview on the WordPress Weekly podcast, when asked about his comments at WordCamp US regarding customization being the biggest opportunity to improve the WordPress experience, Matt Mullenweg said, “The Customizer is everything.” He followed it up by saying that customizing sites via both the Customizer and themes is currently the platform’s weakest area.

“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.”

Developers are finding new ways to extend the Customizer to every aspect of site customization, including emails, the login page, a custom CSS editor, and more. When speaking with developers who have dipped their toes into the Customizer API, they are often surprised by how easy it is to work with, whether it’s building plugins or switching theme options to use the Customizer’s live preview.

Nick Halsey, one of the Customizer component’s maintainers, is a core contributor who has helped make that possible. He has also built many plugins that demonstrate the flexibility of the feature. Custom Highlight Color is his latest release, a simple yet powerful plugin that allows users to set a highlight color for text selection.

“Many devices and browsers provide less-than-ideal colors when selecting text on sites,” Halsey said in the plugin’s description. “Users may select text for a variety of reasons, including as a habit when reading or to share a quote.” His plugin gives site owners the ability customize the highlight color to match the rest of the site’s design using live preview within the Customizer.

The color picker doesn’t translate very well in the animated gif, but this gives a rough idea of how nicely the live preview works as you are testing highlight colors.

Halsey built it in such a way that even if the active theme sets a default highlight color, the plugin allows for it to be changed to a different color. The color option is available alongside any other controls added by the theme. Halsey noted that Firefox users may have issues with the live preview but the custom highlight color should work once changes are saved.

After testing it, I found that Custom Highlight Color is a plugin that brings the delight factor – it’s like using a virtual paint brush. If all site customization controls were this fun to use, WordPress themes might start to reverse their reputation for being difficult to customize.