The WordPress Visual Editor: Tips And Tricks for Beginners

By WP Saviour •  Updated: 03/02/21 •  7 min read

WordPress was initially constructed to be a easy running a blog system that made publishing content material on-line a breeze. With time, it has morphed right into a full-fledged Content material Administration System (CMS). Customers now have full management over the design and performance of their WordPress web sites. Nevertheless, with out content material, design and performance imply nothing and in that regard, WordPress stays true to its roots: content material creation and administration.

Whereas lots of options have been constructed into the WordPress base software program, content material creation stays its core driving pressure. With that in thoughts, let’s take a more in-depth take a look at the WordPress visible editor on this put up and how one can higher put it to use.


WordPress lets you create and handle content material visually relatively than coding it instantly into your recordsdata. Thus, it’s known as a WYSIWYG editor or “What You See Is What You Get” for the uninitiated. The editor instrument has three elements:

  1. Visible Editor
  2. Textual content Editor (the place you may enter code)
  3. Media Uploader (for importing picture recordsdata)

By default, the Visible Editor is energetic when you find yourself creating a brand new put up or web page (Pages > Add New or Posts > Add New). If by any likelihood it’s not energetic, click on on it:


WYSIWYG signifies that what you see within the Visible Editor whereas enhancing your put up is what is going to seem within the revealed put up. The Textual content Editor lets you enter plain textual content and in addition lets you enter code (HTML markup) instantly as for those who had been working with the precise HTML file. You activate it by clicking on the Textual content tab on the far-right of the editor:


The Media Uploader does simply that: uploads media recordsdata to the media library so that you could insert them into your posts as you want:


With this transient intro to the highly effective WordPress visible editor, let’s now see how you need to use some key buttons to create and edit content material. I’m utilizing the Blogger theme from our freebies assortment for the illustrations.

Including Textual content

Very first thing is to fireplace up a brand new web page or put up and open the visible editor: Go to Posts > Add New. By default, you will notice a condensed toolbar when creating a brand new put up:


Click on on the Kitchen Sink icon to disclose different formatting choices within the toolbar:


For fundamental content material creation and administration, the above formatting choices will just do superb. Even for those who’re new to WordPress, a lot of the icons can be acquainted from different textual content editors similar to Microsoft Phrase. In reality, all of the icons on the visible editor’s toolbar carry out the identical perform as similar icons in Microsoft Phrase do, so I’ve singled out the much less acquainted ones to debate.

So as to add textual content, merely sort your content material into the editor window. Nevertheless, typically you could have your content material already typed someplace and in that case you may merely paste it as plain or formatted textual content from Phrase utilizing these buttons on the toolbar:


Utilizing this route is quick and the visible editor does a superb job of preserving a lot of your formatting from Phrase—higher than commonplace copy and paste, at the least. Nevertheless, as you’ll quickly uncover, it’s not a flawless job and typically you could find yourself with mangled textual content. I discover that it’s a lot simpler to stick as plain textual content after which do the formatting contained in the visible editor.

Take away Formatting From Your Textual content

As we’ve seen or as you’ll see while you experiment with these formatting buttons, the visible editor has weaknesses in the case of dealing with formatted textual content imported from different textual content editors. So that you may discover that working with plain outdated textual content is the higher factor to do. That is the button you have to be utilizing to take away formatting from imported textual content:


Spotlight your textual content and click on on that button. Your textual content will now have the default formatting of your theme. Be aware that this button doesn’t work for some formatting varieties similar to blockquotes and headers. There are different formatting buttons that handle these varieties.

Altering Textual content Kind

You’re going to have a number of textual content varieties in your doc together with paragraphs and headings. To vary your textual content sort, spotlight the textual content portion you need to modify and click on on the format drop-down menu on the intense left of the editor’s toolbar. Choose the format you need and also you’re carried out:


Clearly, you may format your posts any manner you need, however be sure there’s some construction for consistency. Part headings, as an illustration, ought to have the identical heading format, similar to Heading 2, whereas the first heading is often Heading 1. As well as, commonplace paragraph textual content ought to have a default format and so ought to preformatted textual content and addresses.

Bear in mind: the default codecs for the assorted textual content varieties rely in your theme. Each theme comes with its personal default styling for the kinds you see within the format drop-down field.

Use the Paragraph sort within the drop-down field to take away formatting from headers for the reason that Take away formatting button doesn’t work for headings and blockquotes.

Use the Blockquote button to format or take away blockquote formatting:


Full Display Modifying


In case you wish to work with minimal distractions, you’ll discover the full-screen mode ideally suited for you and that is the button that prompts it. It merely closes all non-essential stuff on the display screen and leaves you with solely with the content material field and a condensed toolbar that mechanically hides and seems while you hover atop the web page.

Insert Extra Tag


Whereas that is an typically ignored function of the visible editor, it is extremely helpful in the case of displaying put up excerpts in your weblog. As you’re already conscious, when you have revealed posts in your weblog, WordPress shows excerpts of those posts on the house and archives pages. Nevertheless, WordPress truncates the excerpts randomly and this might be in the course of a sentence.

That is the place the nifty Insert Extra tag function turns out to be useful. It lets you specify precisely the place the excerpt will finish. A hyperlink that factors to the complete put up can be inserted the place you specified the excerpt to finish. There are various methods you may format this tag however, keep in mind, by default it solely works for posts (not pages):


Be aware: Using the Insert Extra tag depends upon your chosen theme’s help. Most thoughtfully developed themes help it, however some don’t.


Inserting and eradicating hyperlinks is easy too utilizing these buttons. They’re inactive by default till you spotlight the textual content you need to make the hyperlink. The button on the left provides a hyperlink whereas the one on the proper removes hyperlinks.

Particular Characters


In case you’ve ever used the particular characters button in Phrase, this too ought to be acquainted. Nevertheless, this one is extra intuitive because it shows a personality’s HTML and NUM codes as you hover over it:


In case you’re a daily WordPress person, chances are high you’re already aware of a lot of the issues we’ve checked out above, however for brand spanking new WordPress customers, this ought to be a helpful starter information to the visible editor in WordPress; its capabilities in addition to its limitations.

gp-3110373 as-7057500

WP Saviour

I am a WordPress specialist. My mission is to help you create beautiful websites with ease!