How To Use The 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 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.

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.

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

Or the 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.

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).

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.

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.

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.

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.

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.

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.

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

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).

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.

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

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

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 used “web-safe” colors (colors that will display correctly across most web browsers):

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.

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.

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.

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.

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.

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

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.

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.

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, do this instead:

1. Create and format your content in the Visual tab, then
2. Switch to the Text tab,
3. Select everything, and
4. Copy the marked-up text with HTML tags to your clipboard.

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):

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.

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

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

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.

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.

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.

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…

After applying 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…

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

Content copied and pasted in from an external site can interfere with the formatting of your own content or just add a 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…

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

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

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

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.

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.

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.

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.

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.

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

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.

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.

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

The content editor box will be resized.

Here is the feature in action…

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.

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

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

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.).

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.

Tip #8 – How To Convert Emoticons

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

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

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

***

Updated: July 5th, 2024