Building sites for clients in WordPress is a tricky balance between offering control, and overwhelming novice users with style options.
Custom classes provide a mechanism to add styling through the UI, but in a relatively low overhead way, since they do not add excessive options.
Often, developers will disable the custom class pane for content editors and use it as a way to patch in custom styles that novice users will be blissfully unaware of.
More than 75% of WordPress developers said they used the custom classes pane "relatively frequently" and 40% used it "all the time".
Unfortunately, even though this feature is heavily used - it has been neglected from a UX perspective.
Just look at this humble text input field waiting for some well-deserved attention:
There are several irritating issues with how the basic custom class input is implemented in WordPress core:
First, it’s hard to see what classes are actually applied if there are more than one or two since its a tiny input field.
Second, there is no validation. It’s easy to accidentally omit a space and not notice.
Third, its cumbersome to delete a specific class since you have to carefully select it within the tiny input and make sure you don’t accidentally delete an extra space, breaking other classes in the process.
Finally, it requires free recall of potentially arbitrary class names to apply the styles you want for the site, since there is no autocomplete functionality.
As a solve for some of these issues, I created a plugin that hooks into the editing interface and extends it with a custom classes pane.
This provides a tag style interface that allows you to apply classes one by one and see them as "chip" components that can be easily deleted by clicking an "X" button.
You can also "star" classes, which adds them to a list of favorites. When you start typing to apply classes on other blocks (even across pages or post types) your starred classes will pop up to autocomplete.
These enhancements make using custom classes feel much less hacky, and more like a built in feature for customization.
The plugin also adds an options screen where you can view your entire library of favorited classes. You can add and delete just as you would within an individual post, and you can copy the full class library to import it into another site.
This is particularly handy for agencies that use specific frameworks, so that they can quickly have an autocomplete library of their common classes even starting out fresh on new builds.
One of the nice things about this plugin is it hooks into the existing infrastructure of the editor and basically just acts as a UI wrapper. This means if the plugin is deleted, no data will be lost. All the classes will still be present, they will simply now be presented through the native UI.
Feel free to grab the early alpha of this plugin from my github account. You can also read more about my process for building the plugin on my wordpress related blog.