Visual Editor vs Text Editor

When you are using WordPress, you are probably used to seeing this by default:

visual editor

The Visual Editor

This is called the Visual editor. Notice how there are two tabs at the top right of the text box and the one labeled “Visual” is selected. The Visual editor is called that because it shows you an approximation of what the page will actually look like on the website. Headings look like headings, you can see each image and its size, etc. You use this to do most of your editing on the site. But there is another option

Text Editor

Clicking on the Text tab will bring you into the Text editor:

The Text Editor

The Text Editor

This is the plain HTML view of the page. So headings no longer look like headings; instead, they are plain text surrounded by an HTML tag: <h2>My Heading</h2>

This can be disorienting if you are not used to looking at code, so in general, you probably want to avoid using the Text view. There are, however two important uses for the Text editor.

Embed Code

Always paste HTML code into the Text editor, not the Visual editor.

If you have an HTML widget, or some other bit of HTML code to put on your page, you need to paste it into the Text view of the page so that it will be properly interpreted as HTML code. If you paste HTML code into the Visual editor, it will simply display the code as text on your web page rather than actually running the code to produce a widget or whatever else.

Read my previous post with more information about embedding objects on your page.

Pasting text of any kind

Always paste text into the Text editor, not the Visual editor.

If you are copying and pasting some text from Microsoft Word or some other source, it’s best to paste it in the Text editor. This will convert it to plain text, which you can then edit and style within the Visual editor. When you copy text from any source, you are also copying style information, such as text size, color, spacing, etc. Sometimes WordPress will keep this information if you paste it into the Visual editor, which can cause problems with formatting on your page. Pasting into the Text editor will convert it is to plain text. It’s a way of “cleaning” the text of any unseen code that could cause formatting problems.