WordPress - Visual Editor Toolbar

The visual editor available on all WordPress Pages or Posts 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.

The visual editor is the default editing mode for WordPress; however, if it does not appear enabled or you would like to work in the text editor, select appropriate tab in the top right corner or the editing area. Select Visual for the visual editor and Text for the text editor. 

visual editor

Contained within the Visual Editor are two rows of editing icons. You can find out what each icon does by hovering your mouse over the icon - this will cause a small tooltip to appear describing the function of the icon. 
Initially, the Visual Editor will only display a single row of icons.

first row visual editor

These icons are: 
  1. Style
    • The style drop-down menu allows you to change the formatting of any selected text. This includes various headings and other pre-defined styles included with your theme.
      Note: Different themes will have different additional styles. 

  2. Bold
  3. Italic
  4. Unordered list (bullet points)
  5. Ordered list (numbered)
  6. Blockquote (specifically styled quote text; varies depending on theme)
  7. Align Left
  8. Align Center
  9. Align Right
  10. Insert/Edit Link
  11. Remove Link
  12. Insert "Read More" tag
  13. Toolbar Toggle (enabled a second row of editing icons)
  14. Distraction-free Writing Mode. 

If you would like to display the second row of icons, toggle the Toolbar icon.

second row visual icons

The second row icons are: 
  1. Strikethrough
  2. Horizontal rule (line)
  3. Text color - change colors
    • To change the text color, you must first highlight a section of text, then click the down arrow next to the text color icon which will display the color selector. Selecting a color will apply that color to the selected text and make it the default color for the color button. Once a default color is selected, that color can be applied using the color button itself. 

  4. Paste as text
    • Often, text that has been copied from a different document and pasted into your WordPress editor does not appear exactly as you'd like. However, if you use the Paste as text button, WordPress runs a special cleanup process to remove any special formatting and HTML tags that may cause changes to your text. Clicking on the Paste as text button will change the editor to a plain text editor and will remain as such until you turn off the plain text editor by selecting the Paste as text button again. 

  5. Clear formatting 
    • All formatting in the text editor box will be removed. This includes formatting such as bolding, italics, colors, etc.

  6. Special character
    • A popup window will appear displaying numerous special characters that can be inserted with your cursor to suit your needs. 
  7. Outdent - move text to the left
  8. Indent - move text to the right
  9. Undo - undo last action
  10. Redo - redo last action
  11. Help - display information about the editor and keyboard shortcuts. 

For more information, please visit NMSU WordPress Video Tutorials or the WordPress Support Forums.

If you have any questions, come by the Help Desk at Hardman & Jacobs Undergraduate Learning Center Room 105, call 646-1840, or email us at help@nmsu.edu.

Keywords:wordpress page post visual editor wysiwyg   Doc ID:73837
Owner:John B.Group:New Mexico State University
Created:2017-06-06 11:39 MDTUpdated:2018-11-26 15:59 MDT
Sites:New Mexico State University
Feedback:  0   0