PHPMatters Help You Better Hosting Your PHP-based Sites
The Beginner's Guide on WordPress Visual Editor

The Beginner’s Guide on WordPress Visual Editor

The visual editor is a special tool for the editing of WordPress posts. As it is a WYSIWYG editor, you can preview your blog posts, modify the content structure, and add some images or multimedia during the content creation process.

As comparing with the text editor, the visual one is much more user-friendly for both newbies and experienced webmasters. With it, you do not need to add some coding stuff for content customization and click the Preview button to check how your posts displayed in the front-end. Instead, you can edit your posts and add some visual effects simply by clicking a few buttons. Also, the content that shows up on your editing screen will be displayed in the same way on your front-end.

Due to this great ease of use, here, we’d like to come out a beginner’s guide about this special WordPress editor.

Character Customization

In the text editor, you have to use some special tags to add the formats of bold, italic, strike-through and underline to your characters. With the visual editor, however, you can add these effects by clicking the corresponding buttons.

Character customization

Besides, you can decide the font size by choosing from the drop-down list as the screenshot displayed in the following. Note that the list includes various headings and some pre-defined styles built into your templates. Therefore, besides the default styles, you may be able to utilize some additional formatting to apply to your text.

Font Size

As for the text color, you can make use of the “A” button by picking your target color. Note that WordPress only allows 39 options by default, but you can add some custom options as you want.

Font Color

Paragraph Format

As for the format of paragraph, you can firstly decide the alignment, including left-aligned, right-aligned and center-located. Besides, you can align your paragraph to both left and right margins by adding additional spaces between your characters, achieving a full-display of your content.

Paragraph Alignment

Besides, if your posts have some sub-points or sub-paragraphs, you can also achieve the bulleted list and the numbered list with the following two buttons.

List Button

Lastly, you can also make use of two indent buttons to move your text left or right by one level, fully meeting your webpage design and layout.

Indent Buttons

Functional Buttons

WordPress visual editor has some functional buttons to achieve different goals. For instance, you can add some quotes with the block-quote button, add a horizontal line with the horizontal-line button, insert a read more tag with the read more button, add some special characters with the special-character button, clear all the formatting with the eraser button, remove or repeat the last actions with the undo or redo button.

Function Buttons

Besides these, you can also find a button allowing you to paste words as text. Generally, when you copy and paste some words from somewhere else, you may find that they will change the format of your current text using their original styles. In this case, the utilization of this button is great as it automatically removes any special formatting and tags of your copied text. This is particularly useful when you copy words from Microsoft Word.

Paste as Text

Insert Links

No matter you are going to insert an internal link or an external link, WordPress visual editor allows you to do this within second. Here, you only need to click the Insert Link button, enter the target URL and link title, and click the Add Link button. If you want to insert an internal link, you can click the “link to existing content” button and choose your preferred link within your website. Note that if you want this link to be opened in a new window or tab, you can check the box as the image showed as below.

Insert Links

As for the removal of links, simply click the remove link button.

Special Note

By default, you can only check the first row of buttons from WordPress visual editor. If you need the second role of buttons to achieve your goal, you have to click the Toolbar Toggle button.

Besides, if you add some plugins to extend the functionality of the core WordPress installation, you may get additional buttons from the visual editor.

Toolbar Toggle button