How To Use & Extend WordPress Visual Editor?

WordPress provides you two kinds of editors (Visual & Text)  can be used for creating or editing content inside your posts, pages and other custom post types. Text editor works like a normal HTML editor, with text editor you can manually insert formatting tags, paste content from other websites and no formatting will be included.

The WordPress visual editor provides you a semi-WYSIWYG (What You See is What You Get) content editor which enables you to create, edit, and format your content in a view similar to that of an office application.

Visual editor is present on editing screens of posts, pages and most custom post types by default.

A user can disable visual editor from his profile page (Dashboard -> Users -> Your Profile) by ticking ‘Disable the visual editor when writing’ option.

Just above the visual editor button, there is an ‘Add Media‘ button for inserting images and other media files inside your content. We have already discussed about this earlier in the following tutorials:

How To Switch Between Visual & Text (HTML) Editor?

How To Use WordPress Visual Editor? 1

From a content editing screen. For example: From ADD NEW/EDIT post screen, you can click to select the Visual tab visible in top right corner of the your editor area, as shown in the given screenshot.

Visual editor has two rows: Row 1 and Row 2

Row 2 is hidden by default but you can open it by clicking the Toggle button (last button in first row).

Row 1 has total 16 buttons by default where:

  1. Bold
  2. Italic
  3. Strike-through
  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.)

    Your text here

  7. Horizontal line

  8. Align Left
  9. Align Center
  10. Align Right
  11. Insert/edit link
  12. Unlink
  13. Insert More tag
  14. Proofread/Spell Check
  15. Toggle Distraction Free Writing
  16. Toolbar Toggle (enables the second row of editing icons)

Row 2 has total 12 buttons by default where:

  1. Style – various formatting styles defined by the activated theme in your website
  2. Underline
  3. Justify
  4. Select text color – for changing the text color
  5. Paste as Text
  6. Clear formatting – removes all auto-copied styles and tags (excluding links) in your text
  7. Insert special character
  8. Outdent – move text further left
  9. Indent – move text further right
  10. Undo – undo your last action
  11. Redo – redo your last action
  12. Help – display usage information about your editor and  the keyboard shortcuts for using editing actions

Your editor might have some more buttons, it depends on what plugins you are using. Some plugins automatically adds more TinyMCE buttons on your visual editor.

Extending Visual Editor:

You can manually add more buttons to make formatting easier: Read our tutorial on Adding Advanced Formatting Options In WordPress Visual Editor.

Next Reading:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.