Skip to content

Visual Editor

The visual editor provides a semi-WYSIWYG (What You See is What You Get) content editor that allows you to easily create, edit, and format your blog content in a view similar to that of a word processor.

This is the default editing mode of WordPress, but if it does not appear to be enabled, you can select the Visual tab in the top right corner of the editor area, as depicted below.

visual-editor-pointer

There are two (2) rows of editing icons contained within the visual editor. You can find out what any icon means or does by hovering over it with your mouse – a small tooltip will appear describing the icon and its purpose.


ROW 1

When initially opened, the visual editor will display a single row of icons:

visual-editor-top-row

  1. Bold
  2. Italic
  3. Strike-through
  4. Unordered list (Bullet points)
  5. Ordered list (Numbered)
  6. Blockquote (a way of displaying quoted text; each theme will style this differently.)
  7. Horizontal Rule. (Separates content)
  8. Align Left
  9. Align Center
  10. Align Right
  11. Insert/edit link
  12. Unlink
  13. Insert More Tag
  14. Toolbar Toggle (enables the second row of editing icons)
  15. Shortcode Dropdown

ROW 2

To display the second row of icons, select the toolbar toggle icon.

visual-editor-bottom-row

  1. Forms – Format blocks of content with theme styles.
  2. Style – Various formatting styles.
  3. Underline
  4. Justify
  5. Change the text color
  6. Past as text
  7. Clear formatting
  8. Insert special character
  9. Outdent – move text further left
  10. Indent – move text further right
  11. Undo – undo your last action
  12. Redo – redo your last action
  13. Help – display some information about using the editor, as well as keyboard shortcuts
  14. Icons – Easily insert various icons into your content.

ALIGNMENT

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

visualeditor-alignment

Left

leftalign

Right

alignright

Center

centered

Justify

fullalign

Note that justified alignment can only be applied to text and will align both sides of the text.


STYLES

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

Note that further style modification requires custom css.

styles_dropdown


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. If you use the Paste as textbutton then a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text.

The first time you click the button, a window will appear notifying you that you will be pasting in plain text. This window will only reappear after you refresh or open a new post or page:

visualeditor-pasteastextpopup1

Once you’ve enabled the Plain Text option once for a post or page, subsequent clicks on the button will turn it on (evidenced by a box around the button) or off (no box around the button). You will not see the pop up window again unless you reload the page or go to a new post/page, but the toggle option still works.

Below is how the Toolbar looks in “Plain Text off” mode. Note that there’s no box around it:

screen-shot-2014-04-08-at-1-43-20-p

Below is how the Toolbar looks in “Plain Text on” mode. Notice the icon now has a box around it:

screen-shot-2014-04-08-at-1-40-33-p


REMOVE FORMATTING

The remove formatting button, as you would expect, removes all formatting (bold, italic, colors etc) from a highlighted section of text. First select your text:

highlight-format2

When the button is clicked, all the formatting will be removed:

unformatted2


CUSTOM CHARACTERS

As well as the normal letters available directly from your keyboard, you can also insert special characters. Position your cursor to where you want to insert a character and click on the insert custom character button. A popup window will appear:

visualeditor-specialcharacters

Click any character and it will be inserted at you cursor position.


OUTDENT / INDENT

The indent button will move text in by one level, and the outdent button will take away one level.

outdent-example

indent-example


SPACING

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.


KEYBOARD SHORTCUTS

The visual editor has several keyboard shortcuts, or hotkeys, built in.

To see a list of all of the available shortcuts, click the toolbar toggle to show the second row of icons and then click the Keyboard Shortcuts (question mark) icon at the end of the second row.

visualeditor-helpicon

A window will pop up showing a list of keyboard shortcuts available in the editor.

keyboard_shortcuts