Skip to content

Learning to Love the WordPress Text Editor

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.

The WordPress text editor and visual editorYou 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!

Fred Meyer

10 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Elizabeth Jamieson
June 24, 2015 11:14 am

I am always trying to encourage people to use the text editor as well. You are not alone!

Formatting WordPress Post Content: The Good, The Bad, and The Ugly | WPShout.com
February 17, 2015 4:08 pm

[…] turns out there are a lot of things that WordPress’s default post editor (both the Visual and Text editors) can’t do. For […]

CIS 197 Skill Share | Carley Brantley Asn03
February 2, 2015 1:57 am

[…] WP Shout WPMUDEV […]

Why the WordPress Front-End Editor is Going to be Amazing | WPShout.com
December 16, 2014 9:51 pm

[…] editor is a third-party package called TinyMCE. Specifically, it’s the TinyMCE Visual editor; TinyMCE also has a Text editor that gives you access to the raw HTML that the Visual editor […]

WP Tutorial: How to Remove TinyMCE Buttons • RachieVee: Rachel's Blog
November 10, 2014 11:18 pm

[…] I recently read a blog post by Tom McFarlin titled, Remove TinyMCE Buttons. For the confused, TinyMCE buttons refers to the buttons available in WordPress’ text-editor toolbar for formatting and styling your content. Here’s more on how to use the text-editor along with learning to love the text-editor. […]

Jacquelyn Butler
October 8, 2014 6:22 am

Why does the code below does not work in my text editor in WP?

Welcome
to: PATIENCE: Love Thy
Neighbor As Thyself

 

A
Non-Profit Organization created to help promote balanced,
respectful, and enriched relationships between people focusing on relationships
and relationships improvement.

Unfrustrate Your Image Formatting with the WordPress Text Editor | WPShout.com
October 7, 2014 5:06 pm

[…] This post follows up on a post from a few months ago detailing the differences between WordPress’s Visual and Text editors. […]

Tweet Parade (no.26 Jun 2014) - Best Articles of Last Week | gonzoblog
June 28, 2014 9:02 am

[…] Learning to Love the WordPress Text Editor – 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. […]

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25 Best Free WordPress Themes (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...