Note: If you’re interested in learning how to use the WordPress Text editor, I’ve included the Text contents of this post as a PNG image and a .txt file. Follow along with the post and you’ll learn just about everything you need to know!

WordPress gives you two ways to edit your posts: the Visual editor and the Text editor. Both are designed to make it (somewhat) easy to do rich-text word processing in your web browser. However, the two editors work quite differently:

The WordPress Visual editor is an attempt at a what-you-see-is-what-you-get (WYSIWYG) text editor, produced as part of a third-party software project called TinyMCE. It requires no special technical knowledge and allows you to create posts using an interface similar to Microsoft Word and other text editors. However, there are also many things you can’t do with it, because of the limits of WYSIWYG editors in general, and the TinyMCE WYSIWYG editor in particular.

The WordPress Text editor is an almost straightforward HTML text editor (it has a few quirks, which we discuss at the bottom). You must know basic HTML to use it properly, but it allows you to directly control the layout and appearance of your posts and pages, and to solve many problems that the Visual editor can’t address.

You can switch between these two editors as you edit any post, using the tabs at the top right of the post editing window. Clicking “Text” lets you edit the post in the Text editor, and clicking “Visual” lets you edit the post in the Visual editor.

Here, I’ll be describing why I have such a strong preference for the Text editor, despite the Visual editor being seemingly easier to use and more intuitive. Before that, though, let’s go deeper into both editors and how they work.

How the Visual and Text editors relate

Here’s the short version: The Visual editor is just a handy way to visualize and modify the contents of the Text editor. If that already makes sense, you’ll get most of the rest of this as well. If not, read on!

It’s all HTML…

No matter what editor you use to write your posts, each post is just text and HTML tags.

As you may know, “Writing a WordPress post” is synonymous with “creating a block of HTML-formatted text and saving it in my site’s WordPress database.”

In other words, no matter what editor you use to write your posts, each post is just a single collection of raw text and HTML tags—that is, of “HTML markup.”

When you’re editing a post, the Visual editor and the Text editor look at the same HTML markup: the markup that is that post.

…But presented differently

So the two editors are looking at the same markup. However, they present that markup in very different ways:

The Visual editor never lets you see the HTML directly. It writes HTML on its own from the commands you input into its WYSIWYG interface, and it displays HTML styles, not the code itself.

The Text editor lets you write the HTML yourself, and doesn’t show you the results (that is, the styles the code generates) until you look at a draft of the page.

So the Text editor shows you a post’s markup, while the Visual editor does its best to interpret that markup as a browser would. Make sense?

This leads into the…

Limitations of the Visual editor

The TinyMCE Visual editor hides a post’s markup and displays its own interpretation of what that markup should look like in a browser, giving it some major limitations:

You can’t add HTML markup.

You can’t enter HTML into the Visual editor, so:

1. You can’t set smart, repeatable CSS-based styling rules.
2. You can’t organize content intelligently using divs or other markup not readily accessible from the visual editor.
3. You can’t paste in HTML-formatted text (for example, existing webpage contents, Google conversion-tracking scripts, etc.); these will get rendered as actual text in your post body itself.

You can’t change HTML markup.

You can never take direct control of how your page comes out looking.

At least, not directly—which means that you can never take direct control of how your page comes out looking and behaving. You can do a lot of triage in the Visual editor trying, and failing, to get a result that would be super-easy with the Text editor and basic HTML knowledge.

Your existing markup may be reinterpreted in harmful ways.

The major problem with WYSIWYG editors is that they have to create HTML markup based on their best guess at what you’re trying to achieve. Because of the complexity of HTML, they’re never perfect, and the TinyMCE editor isn’t even close.

The Visual editor can take good existing HTML markup and scramble it in lots of ways.

The Visual editor can take good existing HTML markup and scramble it in lots of ways: wrap elements in unwanted tags, delete them altogether, pepper the markup with awful and verbose inline styles, or add in extra spacing that causes trouble (mostly unwanted paragraph breaks) down the line.

Advantages of the Text editor

The Text editor is the only way to directly control the content of your posts.

The great thing about the Text editor is that it doesn’t have the problems above. Phrased differently, the Text editor is the only way to directly control the content of your posts. Reason enough to learn it, right?

Learning to use the Text editor means leanring to write HTML tags directly. That means a short excursion into the very basics of HTML:

Basic Introductory Remedial HTML 101

HTML is the first language you need to understand to “get” WordPress, the Text editor, or the web in general. Fortunately, it’s not that tricky.

What it is

HTML is just a way to mark up—add to, organize, and format—the plain-text contents of a webpage. For example, HTML lets you take a piece of text and color it red:

<span style="color: red;">This will be red.</span>

This yields the following: This will be red.

How to use it

As you can see, HTML is made of tags, which either insert things (like images) onto the page, or tell existing things how to look and behave. The <span> tag above, for example, told the text inside it to be red.

Like our span tag, most tags enclose things: <tag>Text and markup inside tag</tag> They have a start point, <tag>, some content inside, and a close point, </tag> defined by the / at the beginning of the tag name. The tag’s properties apply to everything inside it.

We’ll do one more example. In this example, we’ll nest HTML tags, which you can totally do:

<p style="color: black;">This paragraph will be black, except <span style="color: darkblue; font-size: .85em">this part will be dark blue and slightly smaller</span>, after which the rest will be black again.</p>

This paragraph will be black, except this part will be dark blue and slightly smaller, after which the rest will be black again.

Some useful HTML tags

We’ll close out with an incomplete list of tags that are useful very frequently in the Text editor:

• <p>: Creates a paragraph, separated from the other text by white space top and bottom.
• <strong>: Makes text bold.
• <em>: Italicizes text.
• <h1> through <h6>: Section header tags, from largest (<h1>) to smallest (<h6>).
• <img>: How HTML places images. (These are tricky in a few ways, so read up on them before trying to place or edit in HTML directly.)
• <ul> and <ol>: Create a nonnumbered and numbered list, respectively (these stand for “unordered list” and “ordered list”). Within either list type, you need to use the <li> tag to mark out individual list elements.

Dive in!

There’s so much else to learn about HTML, most of which is useful in the WordPress Text editor, so keep learning! If you don’t know HTML, I absolutely can’t think of a more hugely useful three or four hours you could spend.

For more, check out one of the hundreds of great HTML tutorials out there—maybe beginning with browsing W3schools.

<p> tags and linebreaks in the WordPress Text editor

The HTML in the Text editor is close but not identical to the full HTML of your post.

A bit of complexity you should know about: The HTML you see in the WordPress Text editor is close but not identical to the full post HTML that gets saved in your database and displayed on your site. (This is why the “Text” editor was renamed from the “HTML” editor a few versions back.)

The main difference you’ll notice is that WordPress puts paragraphs everywhere. Normal HTML ignores whitespaces; without paragraph tags, text will just jam together:

Where'd my

whitespace go?

Will give you “Where’d my whitespace go?”

So to save you the trouble of wrapping every single paragraph in a <p> tag, WordPress does it for you, invisibly changing the following text in the Text editor:

No paragraph

tags here

into the following HTML markup:

<p>No paragraph</p>

<p>tags here</p>

which your browser will render as:

No paragraph

tags here

So it’s nice that you’re saved the trouble of wrapping every text block in paragraph tags. On the negative side, if you’re seeing extra or unexpected markup in your posts, this is probably why.

In conclusion…

Learning to use the WordPress Text editor gives you real control over what shows up in your WordPress posts. It’s a bit of a learning curve, but it pays off so hugely in saved hours of frustration that I’d say you should make the investment no matter what your goals for your WordPress site.

Any questions? Thoughts on the relative merits of Text and Visual? We’d love to hear from you in the comments below!