As someone who builds websites with WordPress and then hands them off to others, it’s easy at times to slip into thinking that the site administration is already taken care of. That’s why we use WordPress after all, and WordPress has a well-earned reputation as being easy to use [at least for a content management system (CMS)].

But there are also plenty of places where the WordPress admin isn’t as good as it could be. So when I build a site for someone else, my goal is to do so in a way that encourages making good decisions and discourages making bad ones.

One of the most basic and important features for a WordPress user is the text editor. In fact, I imagine it’s the most-used feature in the admin. The primary purpose of WordPress is to publish content, yet the WordPress text editor has too many buttons, gives prominence to the wrong ones, and, in doing so, encourages bad editing practices by users who don’t know better.

That’s why I built and recently released ((For the past few years, I’ve installed a version of this plugin on all client sites. I released the new public version to share a tool I’ve found essential to building good WordPress sites.)) MRW Web Design Simple TinyMCE. In this post, I want to explain the thinking behind the decisions I made for the plugin.

Text Formatting Principles

Let’s get to it then! I believe that the best possible text formatting and styling in a CMS is:

1. Portable: Text formatting should be context-agnostic, working in multiple systems.
2. Semantic: Text formatting should be meaningful to humans and computers.
3. Accessible: Text formatting should not exclude formatted content from some people.
4. Easy: Text formatting should be quick to learn and apply.

Each of these principles ((Remember all four principles with the fantastic acronym: P.S.E.A. The “P” is silent but still equally important. :P)) lead to decisions I made about what buttons the ideal text editor includes.

Portable

“Portability,” as a technical term, refers to how easy software, or in this case content, is to move from one place to another—either at the same time or in the future. There are many different contexts in which a post can appear when it’s published with WordPress:

1. In an RSS feed reader like Feedly.
2. In a “read it later” app like Pocket or Readability.
3. In an email sent by a MailChimp RSS-to-email campaign or Jetpack Subscriptions.
4. In a new theme, should your website design ever change.
5. In a new content management system, should you migrate some or all of you content.

Take a look at these screenshots of a recent blog post that included an image, headings, and blockquote in multiple different contexts and notice how the meaning of the formatting stays while the specifics change. This is what portable content looks like:

(RSS and email readers may need to visit site to view gallery.)

Making content portable requires formatting it in a way that can be interpreted by multiple systems so that it always looks good. With a multitude of devices, screen sizes, and programs, we have less control than we used to over where content appears, so we must format text under the assumption it people will read it in places we haven’t anticipated.

What does this mean in practice? It means we must encourage the use of headings and blockquotes and lists appropriately and not rely on “inline” ((In this context, “inline” means that the styles are attached directly to the piece of text rather than universally applied to a certain format. It’s the difference between “This sentence should be 20px, bold, Arial, and orange” and “This sentence is a blockquote and all blockquotes are 20px, bold, Arial, and orange.”)) font colors or sizes that could be overridden or not look good outside of the specific site a post published on. In the plugin, this means removing the font color and underline buttons.

I also add the ability for developers to create custom styles such as “warning,” “notice,” or “disclaimer.” These styles apply an appropriate HTML element (like a heading or blockquote) if one exists and ensure that text is styled in a way that can be quickly redefined in future themes.

While not part of the “Simple TinyMCE” plugin, to make sure that web-appropriate styles are applied and extraneous styles are removed, I always install Paste as Plain Text to automatically strip “bad” styles from text and encourage people to use the WordPress text editor for all formatting.

Semantic

Why does using headings and blockquotes and lists make content portable? Because those types of formatting have strictly-defined and universally agreed upon meanings. That is to say, they are “semantic.” By formatting in this way, each new context can have different pre-assigned visual styles for each format that looks good in that specific setting. It’s more important that text be identifiable as a blockquote than a specific color or size.

To encourage semantic formatting, I remove the font color option (again), Heading 1 (since the page title is the only H1), and move the headings to the top row where they are available by default. I also move the blockquote alongside the heading options since they are similar in application. And those, custom styles like “warning” that can be added by developers? Those are also semantic.

All of these decisions focus the editor on formatting text for what it is (e.g. “blockquote”) not how it looks (e.g. big, bold, and indented).

Accessible

An accessible website requires cooperation from the designer, developer, and content editors as all three determine whether a site  is fully accessible. A designer must create an accessible color palette with a large-enough font size. A developer must ensure the WordPress theme and other code is usable by screen readers and keyboard navigators. And content editors must enter appropriate alternative text and correctly format text.

By default, many of the WordPress text editor buttons can negatively impact accessibility and usability:

• Underline should only be applied to links and that should be done automatically.
• Allowing editors to select text color enabled the creation of low-contrast text.
• Centered, right-aligned, and full-justified text are all much less readable and too open to abuse.

And because the default WordPress editor hides the Headings drop down in the second row, surely thousands of site editors miss it. Again, the new editor has the drop down with headings as the first item since headings are one of the keys to creating accessible content.

Easy

An editor with lots of buttons is powerful. That includes the power to do bad things. ((That does not include The Power of Love.)) A smaller editor is easy.

After removing many buttons and options, it’s possible to condense all formatting buttons to a single row with the most important options first. In addition, I moved the blockquote to the Formats drop down since blockquote is a format more like a heading than a style like bold or italic. Headings 5 and 6 are removed since pages rarely get that deep and, at least anecdotally, it seems that having more headings encourages people to using headings incorrectly.

I also chose to remove the “More Tag” button which I find most people struggle to understand and properly use. When it’s needed, I make sure it’s easy to add back.

The Results

The original editor includes buttons that are bad for portability, semantics, accessibility, and ease-of-use.

The modified editor puts important buttons first and moves all remaining buttons to a permanently-visible first row:

I believe that this editor is a significantly better default for almost all WordPress users. While I can write HTML just fine and have experience using markdown and other formatting languages, this editor is how I prefer to write and there isn’t anything I find missing.

As it is said, I have “dogfooded” this editor, and it turns out it’s one of those tasty types of dog food that tastes good to humans…err…Let’s just say it’s really good for writing for the web.

Try out MRW Web Design Simple TinyMCE today.

Let me know in the comments what buttons/formats, if any, you think are missing or should be removed.