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 as a designer 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’ 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. Enter 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. 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. 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.

Pages: 1 2 3 View All

  • Dennis Gaebel

    Sweetness! Giving it a whirl right now. We shall see how I do. I’ll report back for sure.