Beef up TinyMCE in WordPress with the style selector

Simplifying your client’s experience with WordPress is a great way to help keep websites up-to-date in the way you intended. One way that can be accomplished is by streamlining WordPress’ built-in implementation of TinyMCE, a “what-you-see-is-what-you-get” editor that makes the Visual Editor possible.

Out of the box, WordPress’ version of TinyMCE comes with a number of features that help you and your clients create content more quickly and easily. But suppose you need to style text in a certain way frequently? Perhaps it’s a style for pull quotes, or a frequently used call to action style.Asking clients to learn HTML and CSS snippets is a recipe for frustration. Fortunately, WordPress makes it easy to add custom styles to TinyMCE.

Let’s meet the TinyMCE style selector.

What is the style selector?

The style selector is a handy way to allow your clients to apply certain styles to text. Styles can be anything from a simple HTML element with a specific assigned class to a full-blown HTML element with a number of inline CSS style properties attached.

It’s important to note that the style selector is distinct from the “block formats” selector. You’re already familiar with that dropdown; it’s enabled in WordPress by default, and lets you apply headers, paragraph tags, code tags, etc. You can’t apply styles or classes with the block formats dropdown; it’s just for applying block-level elements to text.

To enable the style selector, you’ll need some custom code. Let’s have an example. Suppose we want the ability to set certain text as an inline pull-quote. Here’s how you’d do that.