WordPress Tutorial

WordPress Text Editor Explained: Why to Use it Over the Visual Editor

You’ve probably noticed that WordPress has two native text editor, the visual editor, and the classic text editor. Both of these options have their pros and cons. Read on, and find out everything you need to get started with both varieties of the native WordPress text editors.

In this article, we will learn about creating posts using the WordPress editor and introduce you to basic HTML knowledge for WordPress.

Let’s get started.

Creating Posts on WordPress

Whether you’re using the classic editor or the newly introduced Gutenberg editor, WordPress will give you two editing modes.

In the classic editor, the editing modes are located side by side, which is very handy for switching on the go.

This is how using the visual editor looks:

WordPress Visual Editor of Classic Editor

And this is the text editor:

WordPress Text Editor of Classic Editor

On the other hand, since WordPress 5.0, Gutenberg became the default editor for WordPress. It introduces the use of blocks that will make creating rich-media content much easier.

The Gutenberg editor also has two editing modes. But, you need to click on the three-dot button to switch between the editors.

This is how the visual editor looks on the Gutenberg editor:

Gutenberg Visual Editor

After choosing edit as HTML, this is how it looks:

WordPress Text Editor of Gutenberg

By default, you will see the visual editor each time you want to make a post.

WordPress calls the visual editor as a semi-WYSIWYG (What You See Is What You Get) — to ease beginners into creating posts or pages.

The visual editor provides you a set of buttons for formatting, just like your word processing software. But, under the hood, any posts you create with the WordPress visual editor are still formatted in HTML. Each button represents a certain HTML tag.

HTML stands for Hypertext Markup Language which is responsible for the structuring of online content. Hang on. We’ll talk about basic HTML later.

Text Editor Over Visual Editor

As we’ve touched on the fact before, the editors have their differences. Soon, you’ll find that using the text editor is more advantageous.

While the visual editor works fine, you might find unwanted formatting errors.

For example, when you copy paste content from other word processing software, it may look fine on the visual editor. However, when you look back at the text editor, you will see tags like <span>, <div>, or &nbsp.

HTML Tags on WordPress Text Editor

If this happens often, it can slow down your website and affect your website’s SEO.

Also, if you add some HTML tags in the text editor when you switch to the visual editor, the added tags might be stripped down.

That being said, sticking to the text editor is recommended to get full control of formatting. In fact, most advanced users prefer to utilize the text editor and add the formatting manually — by adding HTML code from scratch.

If you copied a text to WordPress and you don’t want the additional code laying about, you can press the clear formatting button while all text is selected. This will remove all HTML tags from your WordPress post.

Getting to Know Basic HTML for WordPress

To use the WordPress text editor, knowing basic HTML knowledge is a massive benefit. Plus, learning it is not as hard as it seems.

As previously mentioned, using the text editor will require you to understand HTML tags. For example, if you want to make a certain phrase bold, you can add <strong>words</strong>. Or, if you want to italicize a word you can use <em>words</em>.

Basic HTML Knowledge is Needed for WordPress Post Editing

The result would look like this:

The Result on Using the Right HTML Tags

You can add as many tags as you like depending on your needs.

Here are some useful tags that you can use to handle formatting style in the WordPress text editor.

Categories Purpose HTML Tags Examples
Heading To define the heading of a post <h1> to <h6> tags <h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Formating To bold text <b>tags <b>This text is bold</b>
To bold text an add strong semantic emphasis <strong> tags <strong>This text is strong</strong>
To italicize text <i> tags <i>This text is italic</i>
To italicized with emphasize <em> tags <em>This text is emphasized</em>
To highlight text <mark> tags <mark>Marked</mark>
Links Link to another page <a> tags <a href=”url”>Here</a>
To jump to another website on a new window/tab <a> tags <a href=”https://www.website.com/” target=”_blank”>Visit This Page!</a>
Lists To make an ordered lists <ul> tags <ul>

<li>First</li>

<li>Second</li>

</ul>

To make ordered lists <ol> tags <ol>

<li>First</li>

<li>Second</li>

</ol>

Paragraph Tag in WordPress Text Editor

One of the tags that you should pay attention to in the WordPress text editor is the paragraph tag.

Basically, you will start a paragraph with <p>paragraph</p> when using the WordPress text editor.

Paragraph Tags Used on WordPress Editor

Then, you can add another formatting option within the paragraph using the tags on the table above.

However, please note that pure HTML would ignore page breaks, meaning spaces between paragraphs won’t show on your browser.

So, if you add page breaks as shown in the example below:

Using Proper HTML Tags Properly is Recommended

It would make no difference in your published posts like this one.

Pure HTML Would Ignore the Page Breaks

Instead, you would need to use the <br> tag, to break up the text.

Conclusion

The WordPress visual editor is easier to use, but the text editor is more powerful when managing the formatting of your posts.

To use the text editor properly, you need to know some basic HTML. This will allow you to use the text editor properly and to its fullest potential.

However, you’ve learned from this article that it is not as hard as it seems.

Happy editing.

About the author

Suryadi K.

Suryadi, an avid content writer with years of IT experience, keeps on pursuing opportunities to engage with more people through articles about WordPress and other issues. During his free time, he enjoys playing Clash Royale.

Add Comment

Click here to post a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Exclusive Content

Join thousands of webmasters who get our free newsletter with tips on how to drive more traffic and revenue to their websites!

Please wait...

Thank you for sign up!

More in WordPress Tutorial
Best 8 Places to Hire a WordPress Freelancer
Close