April 29, 2019
April 29, 2019
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.
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:
And this is the text 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:
After choosing edit as HTML, this is how it looks:
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.
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  .
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.
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>.
The result would look like this:
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.
|Heading||To define the heading of a post||<h1> to <h6> tags||<h1>Heading 1</h1>
|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>
|To make ordered lists||<ol> tags||<ol>
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.
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:
It would make no difference in your published posts like this one.
Instead, you would need to use the <br> tag, to break up the text.
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.