How To Use The WordPress Classic Editor

This tutorial shows you how to use the WordPress Visual Content Editor – what the menu items do, how to format text, plus useful tips and information on how to get the most out of the WordPress content editor.

For a white label version of this tutorial visit WPTrainingManual.com.

How To Use The WordPress Classic Content Editor

The WordPress classic content editor
WordPress classic content editor

WordPress makes publishing and formatting your web content easy with a fully-featured editor that lets you create professional-looking web pages with formatted text and embedded media quickly without coding skills.

In this tutorial, you will learn how to use and get the most out of the WordPress Classic content editor.

This tutorial covers the following topics:

  • WordPress Classic vs WordPress Block editor
  • The Editor menu – what the buttons do
  • How to format your content with the editor
  • Useful tips and additional information.

WordPress Classic vs WordPress Block Editor

In version 5.0, WordPress introduced a new block-based content editor, called ‘Gutenberg’.

The WordPress Block Editor (Gutenberg) lets you insert different types of content (e.g. paragraphs, images, quotes, multimedia, etc.) into your posts and pages and configure or rearrange your page layouts using ‘blocks’. For this reason, the Gutenberg editor is referred to as the WordPress Block Editor.

The WordPress Block Editor interface.
The WordPress Block Editor interface.

The original WordPress content editor is referred to as the WordPress Classic Editor.

The Classic Editor interface will feel familiar to anyone who has used word processing software. You can type, paste in, or insert content into the editor and then format it using a range of clickable and dropdown menu buttons.

The WordPress Classic editor interface.
WordPress Classic editor interface.

Switching Between The WordPress Classic Editor & WordPress Block Editor

To switch between using the Classic Editor or Block Editor, log into your WordPress admin area, go to Settings > Writing Settings in your main menu, and select the default editor for all users on your site. You can also choose whether or not to allow users to switch editors.

Writing Settings - Select default content editor for all users.
Select the default content editor for all users in Settings > Writing Settings.

Note: Depending on your site configuration, you may need to add an editor by installing plugins like the Gutenberg Block Content Editor plugin

Gutenberg - WordPress Block Content Editor plugin.
Gutenberg – WordPress Block Content Editor plugin.

Or the WordPress Classic Editor plugin

WordPress Classic Editor plugin.
WordPress Classic Editor plugin.

Now that we’ve covered the basic differences between the WordPress Classic Editor vs the Block editor, let’s show you how to use the WordPress Classic editor to add, edit, and format content in your posts and pages.

For detailed tutorials on how to use the Block Editor, go here: How To Use The WordPress Block Editor

WordPress Classic Editor Interface

The WordPress Classic editor includes two tabbed sections:

  • Visual Editor
  • Text Editor

Visual Editor

Clicking on the Visual tab switches the content editor to an intuitive semi-WYSIWYG (What-You-See-Is-What-You-Get) interface.

WordPress Classic Content Editor interface - Visual Tab.
The WordPress Classic Content Editor interface lets you easily edit and format your content in the Visual tab using clickable menu buttons.

The Visual Editor lets you easily add, compose, edit, and format content in your post and pages by typing, pasting in, or inserting text, insert hyperlinks, add images and other media, and more, using clickable menu buttons and dropdown menu selectors.

Text Editor

The text editor lets you add text and then format it using HTML tags (or paste in text with HTML tags).

WordPress Classic Editor - Text tab.
WordPress Classic Editor – Text tab.

The Text editor is useful for users who prefer to work directly with HTML. It also lets you view and edit your content formatting simply by switching between the Visual and Text tabs. See the ‘Tips’ section at the end of this tutorial for tips on using the Text editor.

tip

Learning basic HTML tags used in WordPress will help make it easier to format your content, and to understand, and troubleshoot formatting issues with your content.

WordPress Visual Editor Menu Buttons Explained

The WordPress Classic editor interface menu looks like the interface of word processing applications like MS Word.

WordPress Classic editor interface menu.
WordPress Classic editor interface menu.

Below is a brief description of each menu item’s function:

1. Post Title Field – Enter or paste in the title of your Post/Page here.

2. Permalink – Click on the Edit button to change your post/page slug. This lets you edit the URL of your post or page. WordPress will then automatically update all instances of published posts on your site with this URL in its database to reflect the new post slug using its Permalinks feature.

3. Add Media – Click the Add Media button to upload, manage, and insert media (pictures, videos, audio, etc.) into your post or page from your computer, external media storage location, or from your site’s media library.

4. Visual Tab – Click this tab to access the visual editor.

5. Text Tab – Click this tab to view and work directly with HTML code in your content. Switching between the Visual and Text tabs lets you compose and format your content using the menu buttons and then make changes, adjustments, or copy its underlying HTML code (e.g. for pasting into other applications.)

Note: When entering content into the text tab, line breaks are automatically converted into paragraphs.

WordPress Classic Editor - Text tab.
WordPress Classic Editor – Text tab.

6. Format Style. Select an option from this dropdown menu to add styling to your text (e.g. format your headings and subheadings).

Notes:

  • Many WordPress themes allow you to configure or add custom heading styles using different fonts and typographic elements. Depending on the theme you have installed on your site, the style dropdown menu may also include other pre-defined styles.
  • When you create a new post or page and start typing text into the content area, your text will be formatted using the default ‘Paragraph’ style.
  • Modifying or creating custom formatting styles typically requires knowledge of CSS (Cascading Style Sheets).

To add a style to your content, highlight your text, and select a format style from the dropdown menu.

Formatting styles menu and options.
Add formatting styles to your content, like headings and subheadings.

Note: ‘Preformatted’ is normally used to style code in your text, e.g.:

this_is_preformatted_text

7. Bold – Highlight one or more words or an entire section of text and click this button to add bold formatting to your content.

8. Italics – Highlight one or more words or an entire section of text and click this button to add italicized formatting to your content.

9. Unordered list – Click this button to turn selected content into an unordered list, e.g.:

  • List item 1
  • List item 2
  • List item 3
  • etc.

10. Ordered list – Click this button to turn selected content into an ordered list, e.g.:

  1. List item 1
  2. List item 2
  3. List item 3
  4. etc.

11. Blockquote – Highlighted the text you want to display as a quote and click this button to create a  blockquote as per the example below.

To exit the blockquote press the “Enter” key to create a line of space and then click the blockquote button again. This will end the command and return your text to normal formatting.

12, 13 & 14. Left, Center, and Right align buttons – Use these buttons to left, center, and right align elements in your content, e.g.:

12. Align Left

13. Align Center

14. Align Right

Note: Press the “Enter” key and add a line of space to end the alignment command.

15. Insert/Edit Link. Highlight text and click this button to insert a hyperlink in your content. (See this tutorial to learn more about creating links in your content: How To Use The WordPress Linking Tool).

16. Insert Read More Tag. Click this button to insert a “read more” tag in your content wherever you place your cursor.

Adding this tag displays your post content to blog visitors only up to the tag.

Read More tag.
The Read More tag lets you add a ‘Read More’ link into your content.

To view the rest of the content, users will need to click on the “read more” link on your published post.

Continue reading tag on published post.
Users need to click on ‘Continue reading’ to keep reading your content.

Info

The ‘Read More’ tag doesn’t work on WordPress Pages. It only works on the page displaying your latest blog posts (i.e. your Blog Page).

17. Toolbar Toggle. This is also known as the ‘Show/Hide Kitchen Sink’ button. Click this button to switch between the WordPress visual editor minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Click to enable/disable the Toolbar Toggle.
Click to enable/disable the Toolbar Toggle.

18. Strikethrough – Clicking this button adds strikethrough formatting to selected text.

19. Horizontal Line – Click this menu button to insert a horizontal line into your content.

Horizintal line menu button.
Use this button to insert a horizontal line into your content.

20. Text Color. Highlight a section of text and choose a color from the palette in the dropdown menu to change text color.

Text color
Use the Text color feature to change the color of your selected text.

Info

Add new colors to the swatch by clicking on the Custom section.

Color feature
Add custom colors to your color swatch.

This gives you access to an almost limitless choice of colors. If you are familiar with the Hexadecimal (HEX) color system, just type in the values of the specific color you want into the # field. Otherwise, click in the color box, enter RGB values, or use the color slider to select and add a new color to your swatch.

Here are the HEX color values of some of the most commonly used “web-safe” colors (colors that will display correctly across most web browsers):

Commonly used HEX color values [web safe colors].
Commonly used HEX color values [web safe colors].

21. Paste as Text. Clicking the button marked with a “T” lets you paste the content of your clipboard into your content editor area as plain text.

Paste as text - on/off mode.
Paste as text – on/off mode.

See the “Tips” section below for more information about using this function.

22. Clear formatting. If you detect unwanted formatting  in your text (or if your content isn’t displaying correctly), select the text and click this button to clear all the page formatting. See the “Tips” section below for more information about using this function.

23. Special character. Click this button to insert special characters like © ® ™ and other symbols into your content.

Special character screen.
Add special characters and symbols to your content.

For a tutorial on using special characters in WordPress, go here: How To Add Special Characters In WordPress Posts & Pages

24. Decrease Indent – Click this button to decrease indented text and return text to left alignment on the page.

25. Increase Indent – Click this button to indent a block of text or to increase its indentation.

This is a sample of indented text.

This line has been further indented by pressing the Increase Indent button again.

Increase indent

26. Undo. Click this button to undo your previous commands. Click this button if you accidentally delete a section of text or format text incorrectly and need to backtrack, revert, or restore your content to its previous state.

27. Redo. Click this button to reinstate a change or deletion that you have made.

28. Keyboard Shortcuts. Click this button to bring up the Keyboard Shortcuts screen. This is covered in more detail in the Tips section below.

29. Distraction-Free Writing Mode. Click this button to toggle between distraction-free writing mode and your normal screen. This is a handy feature for checking the placement of items on the page and for working on your content without distracting page elements.

Distraction-free writing mode enabled.
Distraction-free writing mode enabled.

When distraction-free writing mode is enabled, all the surrounding page elements return to the screen as soon as you move your cursor outside of the content editor area.

Distraction-free writing mode example.
Work free from distracting page elements.

See the “Tips” section further below for additional information about using this feature.

Info

Can You Underline And Justify Text In WordPress?

The Underline and Justify buttons were removed from the WordPress visual editor in version 4.7, as the WordPress development team felt that underlining text can confuse readers who may interpret it as a hyperlink, and most web browsers that render CSS and HTML lack sophisticated page layout functions to adjust the gaps left in words by justification, which can make text less readable.

WordPress pre-version 4.7, 4.7 and 5.0 visual content interfaces with the Underline and Justify buttons removed.
From version 4.7, WordPress removed the Underline and Justify buttons from the visual editor menu.

Although WordPress removed the buttons from its menu, you can still use plugins like TinyMCE Advanced or keyboard shortcuts (see below) to access these formatting features.

Installing certain plugins can add additional features and functions to the WordPress visual editor menu.
Installing certain plugins can add additional features and functions to the WordPress visual editor menu.

WordPress Content Editor – Tips & Additional Information

Tip #1 – Use The Visual & Text Editors To Create Content With HTML Tags

If you need to create content with HTML to paste into other applications but you are not familiar with using HTML, simply create and format your content in the Visual tab, then switch to the Text tab, select everything and copy the marked-up text with HTML tags to your clipboard.

Create and format content in the Visual Tab.
Create and format content in the Visual Tab, then copy it from the Text tab to save it with HTML tags.

Tip #2 – Power User Keyboard Shortcuts

In addition to using the menu buttons in the Visual Editor, you can use keyboard shortcuts to speed things up and work more efficiently.

To bring up the keyboard shortcuts list shown below, use Alt + Shift + h (Windows) or Option + Control + h (Mac):

Content editor - Keyboard shortcuts.
Content editor – Keyboard shortcuts.

The WordPress keyboard shortcuts below work with the WordPress Classic editor and the WordPress block editor.

WordPress Keyboard Shortcut for Windows users:

  • Ctrl + a = Select All
  • Ctrl + b = Bold
  • Ctrl + i = Italic
  • Ctrl + u = Underline selected text
  • Ctrl + k = Convert selected text into a link
  • Ctrl + c = Copy
  • Ctrl + v = Paste
  • Ctrl + x = Cut
  • Ctrl + z = Undo
  • Ctrl + s = Save your changes
  • Ctrl + p = Print
  • Alt + Shift + x = Display selected text in a monospaced font
  • Alt + Shift + h = Show keyboard shortcuts menu

WordPress Keyboard Shortcut for Mac users:

  • Command + a = Select All
  • Command + b = Bold
  • Command + i = Italic
  • Command + u = Underline selected text
  • Command + k = Convert selected text into a link
  • Command + c = Copy
  • Command + v = Paste
  • Command + x = Cut
  • Command + z = Undo
  • Command + s = Save your changes
  • Command + p = Print
  • Option + Control + x = Display selected text in a monospaced font
  • Option + Control + h = Show keyboard shortcuts menu

Additional Formatting Shortcuts

Prior to the release of version 4.5, WordPress introduced formatting shortcuts for lists and headings. From version 4.5 onward, you can now also use formatting shortcuts for horizontal lines and highlighting code syntax.

Horizontal line and code highlighting formatting.
Use WordPress formatting shortcuts to add horizontal lines and highlight code in your content.

Type three dashes and hit enter to create a horizontal line like this…


And enclose your text in backticks to turn your highlighted text into <code>.

Formatting shortcuts for horizontal lines and code highlighting.
Formatting shortcuts for horizontal lines and code highlighting.

Note: The backtick symbol (`) is normally found in a QWERTY keyboard in the top left corner, below the Esc key.

Backtick symbol.
Backtick symbol.

To learn how to enhance the WordPress visual editor with additional formatting features, go here: How To Enhance The WordPress Visual Editor

Tip #3 – Pasting Content Into WordPress From Other Applications

Applications like Microsoft Word, Google Docs, Open Office, and others normally contain formatting code that is not directly visible when copying text from a document into the clipboard.

In earlier versions of WordPress, pasting content copied directly from Microsoft Word into the editor would add a bunch of unwanted HTML code into your content, resulting in formatting errors.

Pasting content from applications like MS Word into earlier versions of WordPress added unwanted formatting.
Pasting content from applications like MS Word into earlier versions of WordPress added unwanted formatting.

WordPress now comes with built-in support for pasting content directly from Microsoft Word and other word processors into the editor without adding all the messy hidden code as shown above.

Currently, some applications like Google Docs can still add formatting to text when pasted into the WordPress Classic editor.

Google Docs formatting in WordPress content.
Some applications still add formatting codes to content pasted directly into the WordPress content editor.

As new versions of WordPress are released, expect better integration of copied content with other applications. If you find that the source content has heavy formatting and is not pasting cleanly, try pasting it into your editor using the Paste as text button and then reformat your content afterward.

Example of using the Paste as text function.
Use the Paste as text function to paste in formatted content from your clipboard as plain text only.

Note: When you turn on the Paste as text function, it will remain active until you toggle this option off.

Tip #4 – Remove Formatting With The Clear Formatting Function

You can also paste your content into the editor and then remove all formatting using the ‘Clear formatting’ button. This is useful if you are copying and pasting content into your site from another website that contains text with formatting styles unique to that website (e.g. CSS).

Before removing formatting …

Sample of formatted content.
Sample of formatted content.

After applying the Clear formatting button …

Content with formatting removed using the Clear formatting button.
Formatting removed using the Clear formatting button.

Sometimes, you can’t tell if the pasted-in content from an external site contains formatting or not.

Here is an example of content copied and pasted directly from another website…

Example of content pasted from another website.
The above content was copied and pasted directly from another website …

Clicking on the Text tab reveals a bunch of formatting code that was pasted along with the block of text copied to the clipboard…

Example of pasted in text containing CSS formatting from another website.
This formatting belongs to another website’s stylesheet – it could interfere with the formatting of your own content.

Content copied and pasted in from an external site can interfere with the formatting of your own content or just add a whole bunch of unwanted code to your site.

For this reason, it’s a good idea to remove all formatting from pasted content, especially content sourced from other sites.

To remove formatting from your content, paste your content into the Visual editor …

Paste in formatted content.
Paste in formatted content …

Next, select everything inside the content editor and click on the Clear formatting button …

Clear formatting
Select all content and click the Clear formatting button…

All formatting (e.g. bold, italics, colored text, strikethrough, etc.) will be removed.

Text formatting removed.
All text formatting is now removed.

Note that some elements like hyperlinks,  heading styles, blockquotes, etc. will not be removed from your text after applying the clear formatting function.

Tip

Here is a quick and useful way to test and remove any errors that you suspect may be caused by poor formatting tags in your content without losing the original content:

Before using the Clear formatting function, switch to the Text tab, then select and copy everything to your clipboard.

Select all content in the Text tab and copy it to your clipboard.
Select all content in the Text tab and copy it to your clipboard.

Next, paste the content from your clipboard into a new plain text file and save. Then, go back to your content editor and complete the formatting removal process. Now, if something goes wrong, at least you have a backup copy of your original content with all the formatting preserved.

Tip #5 – How To Add Single Line Returns To Your Content

Like most word processing applications, line returns in WordPress are created by clicking the ‘Enter’ key after typing text at the end of your paragraph.

Default line spacing in WordPress using the Enter key.
Default line spacing in WordPress using the Enter key.

When you hit the ‘Enter’ key to start a new line in your content, WordPress adds a regular paragraph ending tag (</p>) to the content’s HTML. To add a line break tag (<br />) and create single line returns, use both the “Shift” and “Enter” keys.

Example of single line spacing in WordPress using the Shift + Enter key.
Create single line spacing in your content using the Shift + Enter key.

Breaks allow the formatting of your block of text to be carried over. This is useful if you want to add a line break to a bulleted section (without creating a new bullet point) or keep the same style in subsequent text blocks for styling purposes.

Tip #6 – How To Resize The WordPress Text Editor Box

In WordPress, the Full Height Editor function is enabled by default, providing users with a responsive content editor that expands automatically as more content is added.

WordPress Classic editor is responsive.
The WordPress Classic editor box expands as more content is added.

The  simplest way to check if the Full Height Editor is active or not is to look at one or more of the following indicators:

  • If the Distraction-Free Writing Mode icon is visible, then the Full Height Editor is enabled.
  • If the content editor scrollbar is not visible when your typing exceeds the size of the editor box, then the Full Height Editor function is enabled.
Full Height Editor enabled.
Full Height Editor enabled.

When the Full Height editor function is enabled, the WordPress content editor will automatically resize as you type to fit more content.

The content editor automatically expands as you write with Full Height editor function enabled.
The content editor automatically expands as you write with Full Height editor function enabled.

If the Full Height Editor function is disabled, however, you will see the content editor scrollbar once your content exceeds the visible areas of the content editor box and the Distraction-free writing mode button will not be visible.

Full Height Editor disabled.
Full Height Editor disabled.

If the Full Height Editor function is switched off, you can adjust the size of your text box using the text box resizing feature at the bottom right-hand corner of the editor box.

Content editor box resizing feature.
Content editor box resizing feature.

Simply click and drag the bottom-right corner of the text box to resize and adjust the content editor area.

Resize the content editor box.
Select and drag the bottom corner to resize the content editor box.

The content editor box will be resized.

Resized content editor box.
Resized content editor box.

Here is the feature in action…

Content editor box resizing tool.
Content editor box resizing tool.

Tip #7 – Using The Distraction-Free Writing Mode Tool – Additional Info

Distraction-Free Writing mode requires the full-height editor to be enabled.

To enable/disable the Full Height Editor and/or Distraction-Free Writing Mode feature, click on the Screen Options tab in the top-right corner of your administration screen.

Screen Options tab.
Click on the Screen Options tab to reveal additional options and settings.

In the Additional settings section, tick the checkbox next to Enable the full-height editor and distraction-free functionality.

Screen Options - Enable full-height editor and distraction-free functionality.
Screen Options – Tick the’ Enable full-height editor and distraction-free functionality’ checkbox.

You can use Distraction-Free Writing with both the Visual and Text editor and switch between the two tabs while working.

Distraction-free mode - Text editor
Distraction-free mode – Text editor

tip

You can eliminate all distractions by combining WordPress’ Distraction-Free Writing mode with the Full-Screen function of your web browser (e.g. Google Chrome, Firefox, etc.).

Distraction-Free Writing Mode - WordPress Only vs WordPress & Full-Screen Web Browser
Eliminate all writing distractions using the WordPress Distraction-Free Writing Mode and the Full-Screen function of your web browser.

With Distraction-Free Writing mode switched on and the Full-Screen function of your browser enabled, your current page will completely fill the screen, leaving only the title and the content of the post or page you’re working on visible, so you can focus completely on your content without any distracting page elements.

To enable Full-Screen mode in your browser, go to your browser menu options menu and click on the buttons as shown in the screenshot below.

Full-Screen button on Google Chrome, Firefox, and Microsoft Edge browsers.
The Full-Screen button on Google Chrome, Firefox, and Microsoft Edge browsers.

Tip #8 – How To Convert Emoticons

One last tip worth mentioning is that WordPress automatically converts emoticons (e.g. :), :-P, :D) in your content.

WordPress automatically converts emoticons in your content.
WordPress automatically converts emoticons in your content.

To display the emoji character without converting it into an actual emoticon, enclose it in backticks as shown below:

Displaying emoticons in your content.
Displaying emoticons in your content.

Congratulations! Now you know how to use the WordPress Classic content editor … happy writing! 🙂

The WordPress Classic editor interface.
The WordPress Classic editor interface.

Images used in examples sourced from Pixabay.com

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as How To Use The WordPress Classic Editor.