Writing & Editing

Classic Editor

This guide explains how to use the Classic Editor. If you are using the default WordPress editor, please see this guide.

While the Classic Editor is still available, it is not recommended to use. You can use the block editor to create media-rich, mobile responsive, and unique websites that the modern internet user expects to see. For help transitioning to the block editor, please see this guide.

Table of Contents

How to Access the Classic Editor

If you have a free site or a site on the Personal or Premium plan, you can access the Classic Editor via WP Admin.

You can view your WP Admin dashboard by clicking on WP Admin at the very bottom of the left sidebar menu under ‘My Sites’. From there, navigate to Pages. Hover of the page you wish to edit and select Classic Editor:

Image showing a list of pages and the classic editor link

If you have a Business or eCommerce plan with plugins installed, you can access the Classic Editor by activating the Classic Editor plugin at My Site → Tools → Plugins → Installed Plugins.


↑ Table of Contents ↑

About the Classic Editor

You can use the classic editor to create, edit, and format your content in a view similar to that of a word processor.

To ensure you’re not looking at the HTML view of the post or page, select the Visual tab in the top right corner of the editor area, as depicted below.

Visual Tab -Classic Editor
Make sure you’re on the Visual tab

The content in the classic editor is styled by the CSS (a type of code that gives HTML styling such as color, spacing, width, etc) of the theme that you choose. What you see in the editor may not exactly match the live site. Please use the Preview button to check how the post or page looks on the live site.


↑ Table of Contents ↑

Explanation of the Classic Editor Buttons

There are two rows of editing buttons in the classic editor. You can find out what each button does by hovering over it with your mouse. A small tooltip will appear describing the icon and its purpose.

First Row of Editing Buttons

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

image of icons on row 1 of toolbar in classic editor
Editing buttons in the first row – see below for an explanation of each option
  1. Add Media
  2. Style – various formatting styles defined by your theme
  3. Bold
  4. Italic
  5. Unordered list (bullet points):
    • Item 1
    • Item 2
  6. Ordered list
    1. Item 1
    2. Item 2
  7. Blockquote (a way of displaying quoted text; each theme will style this differently.)
  8. Align Left
  9. Align Center
  10. Align Right
  11. Insert/edit/remove link
  12. Insert More tag
  13. Toolbar Toggle (enables the second row of editing icons)
  14. Add Contact Form

Second Row of Editing Buttons

To display the second row of icons, select the toolbar toggle icon on the right of the first row (button number 13 above). This will open a second toolbar that looks like this:

image of 2nd row of toolbar icons in classic editor
Editing buttons in the second row – see below for an explanation of each option
  1. Strikethrough
  2. Horizontal line
  3. Select text color – change the text color
  4. Paste as Text
  5. Clear formatting
  6. Insert special 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 keyboard shortcuts.

↑ Table of Contents ↑

Alignment

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

Left

Align Left
Align Left

Right

Align Right
Align Right

Center

Align Center
Align Center

↑ Table of Contents ↑

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 further style modification requires Custom CSS (and appropriate knowledge of CSS).

Text styles in the Classic Editor
Text styles in the Classic Editor

↑ Table of Contents ↑

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. While the color selector is open, the arrow will point up. You can click on it to close the selector without selecting a color:

image of colors selection option

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.

image of default color selection button

↑ Table of Contents ↑

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 because pasting from another program (such as an email or word processor) can bring with it some unwanted formatting.

If you use the Paste as text button, a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text’s formatting.

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

image of paste as text button when not active

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

image of paste as text button when

↑ Table of Contents ↑

Clear Formatting

Clear formatting button

The clear formatting button removes all formatting (bold, italic, colors, etc) from a highlighted section of text. First select your text:

image of formatted text

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

image of text after clicking the clear formatting button.

↑ Table of Contents ↑

Special Characters

You can insert special characters into your post or page. Position your cursor to where you want to insert a character and click on the insert custom character button. A popup window will appear:

image of special characters

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


↑ Table of Contents ↑

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

↑ Table of Contents ↑

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, hold the Shift key while hitting Enter.


↑ Table of Contents ↑

Keyboard Shortcuts

The classic 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.

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

Image of keyboard shortcuts

To use the default shortcuts, press Command + key on Mac or Control + key on Windows:

KeyActionKeyAction
cCopyxCut
vPasteaSelect all
zUndoyRedo
bBoldiItalic
uUnderlinekInsert/edit link

For additional shortcuts, press Control + Option + key on Mac or Control + Alt + key on Windows:

KeyActionKeyAction
1Heading 12Heading 2
3Heading 34Heading 4
5Heading 56Heading 6
lAlign leftcAlign center
rAlign rightjJustify
dStrikethroughqBlockquote
uBullet listoNumbered list
aInsert/edit linksRemove link
mInsert/edit imagetInsert Read More tag
hKeyboard ShortcutsxCode
pInsert Page Break tag

Still confused?

Contact support.

Not quite what you're looking for?

Get Help