The visual editor provides a semi-WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. (What You See is What You GetWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page.) 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 for 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.

screenshot of WordPress TinyMCE WYSIWYG Visual editor

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:

screenshot of WordPress TinyMCE WYSIWYG toolbar first row

  1. Style – various formatting styles defined by your theme
  2. Bold
  3. Italic
  4. Unordered list (bullet points):
    • Item 1
    • Item 2
  5. Ordered list
    1. Item 1
    2. Item 2
  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 Toggle (enables the second row of editing icons)
  14. Toggle Distraction-free Writing Mode

Top ↑

Row 2

To display the second row of icons, select the Toggle Toolbar icon  screenshot of the Toggle Toolbar button in WordPress TinyMCE editor toolbarscreenshot of WordPress TinyMCE WYSIWYG toolbar second row

  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 your last action
  10. Redo – redo your last action
  11. Help – display some information about using the editor, as well as keyboard shortcuts.

Top ↑

Alignment

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

Left

Right

Center

Full

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

Top ↑

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.

screenshot of TinyMCE editor's Styles dropdown

Top ↑

Text Color

To change text color you must first highlight a section of text:

Clicking on the down arrow next to the text color button will display a color selector:

screenshot of TinyMCE Text color picker

Selecting a color will apply that color to the selected text and make it the default color for the color button.

Clicking on the text color button itself will apply the last default color.

Top ↑

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 then a special cleanup process will run to remove any special formatting and HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. tags that may otherwise change your text. If you are pasting from Microsoft Word you can use the Paste from MS Word button to remove any formatting.

Once clicked, a window appears where you can enter your text:

Checking the keep linebreaks box will preserve all HTML <br /> tags. Unchecking this option will remove them.

Top ↑

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

Top ↑

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:

screenshot of TinyMCE editor's Special Characters modal

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

Top ↑

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

Top ↑

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.

Top ↑

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 Help icon and then the Hotkeys tab.

screenshot of WordPress TinyMCE WYSIWYG editor's Keyboard Shortcuts modal