Using the Visual Editor

The Visual Editor

Visual Editor is a text editor in WordPress post edit screen. The WordPress Post Edit screen has two editors, Visual and Text.

The Visual Editor is a “What you see is what you get” (WYSIWG) editor, meaning that however the content shows up on your display (within the Visual editor) that is exactly the way it will be published. Editors like Microsoft Word fall into this category as well.

With WordPress’s Visual Editor, users can write posts and format them without having to write HTML. At the top right corner of the editor, you may toggle between the Visual and Text editor modes if needed.

This page will cover all you need to know about the Visual Editor and the formatting options it provides.

Toolbar | Row 1

Visual Editor


  1. Style – Various formatting styles defined by your theme
  2. Bold
  3. Italic
  4. Unordered list (bullet points)
  5. Ordered list (numbered)
  6. Blockquote (a way of displaying quoted text; each theme will style this differently)

    Always forgive your enemies; nothing annoys them so much.

  7. Align Left
  8. Align Center
  9. Align Right
  10. Insert / Edit Link
  11. Remove Link
  12. Insert read More Tag
  13. Toolbar Toggleenables a second row of editing icons
  14. Toggle Distraction – free Writing Mode

Styles

The style drop-down menu allows you to change the formatting of any selected text. This includes various headings and other pre-defined styles built into your theme.

Note that your WordPress Theme may come with additional styles that you can apply to your text.

Alignment

Both text and images can be aligned using the appropriate icons.

Insert / Edit Link

This allows you to insert a url link to ant selected text. If you have a valid url copied to your clip board, you may allow just paste it while selected on the text.

    • To insert a live email address, type “mailto:” infront of the email. For example the link url for an email will look like this “mailto:jane.dow@archden.org”
    • To insert a live phone number, type “tel:+” in front of the phone number (no spaces). For example the link url for a phone number would look like this “tel:+3039790093”

Secondary Toolbar Toggle

If you click on this, this will toggle a second row of formatting options. The second row is described below.

Toolbar | Row 2

Visual Editor


  1. Strikethrough
  2. Horizontal Rule
  3. Text colorchange the text color
  4. Paste as Text
  5. Clear Formatting
  6. Insert custom character
  7. Outdent – move text further left
  8. Indent – move text further right
  9. Undo – undo last action
  10. Redo – redo last action
  11. Help – display some information about using the editor, as well as keyboard shortcuts.

Text Color

To change the color of a text, you must first select/highlight a section of text. Click on the down arrow next to the text color button and a color selector will appear. Selecting a color will apply that color to the selected text and make it the default color for the color button.

Pasting Text

If you copy and paste text from somewhere else, you may discover that it does not always appear exactly as you would expect. This is particularly a problem if you cut and paste from Microsoft Word. If you use the Paste as text button it will toggle Plain Text Mode. Contents will now be pasted as plain text (without formatting) until  you toggle this option off.

Clear Formatting

The clear formatting button, removes all bold, italic,colors, etc from a highlighted/selected section of text.


Spacing – Tip

Hitting the Enter (Return) key will end the paragraph you are writing and start a new one. If you want to start a new line without creating a new paragraph, press the Shift key while hitting Enter. (not a formatting icon)

For more details on the Visual Editor visit the WordPress page below.

Word Press | Learn More on the Visual Editor

Powered by BetterDocs

Privacy Preference Center