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

Using The WP Visual Editor*** Important ***

WordPress introduced a new content editor in version 5.0 called Gutenberg.

For tutorials on how to use the new Gutenberg content editor, go here:

***

WordPress makes publishing and formatting content online easy by providing users with a rich editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded media quickly.

In this step-by-step tutorial, we show you how to use the WordPress Visual Content Editor – what the menu toolbar buttons do, how to format text, and more!

A Basic Guide To Content Formatting

WordPress provides a WYSIWYG (What-You-See-Is-What-You-Get) editor for creating and editing posts and pages …

WordPress editor

(WordPress content editor)

WordPress Visual Editor Menu Buttons Explained

If you have used content editing software like MS Word, then the WordPress content editor interface will probably seem familiar to you …

WordPress Visual Editor Menu Buttons

(WordPress Visual Editor Menu)

Below is a brief description of each of the items shown in the screenshot above:

1. Post Title Field – Here’s where you enter the title of your post/page.

2. Permalink – Click on the Edit button to change the permalink text of your post/page. This feature is useful if you want to improve your post/page SEO.

3. Add Media – Clicking this button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your own hard drive, an external storage location, or from your site’s media library.

4. Visual Tab – Clicking this tab lets you access the WYSIWYG (What You See Is What You Get) visual editor.

5. Text Tab – The Text mode lets you enter HTML along with your post text. When entering content in the text tab, line breaks get converted to paragraphs automatically …

WordPress Text [HTML] Editor Tab

(Text Editor Tab)

6. Bold – Highlight words in your text and click this button to add bold formatting.

7. Italics – Highlight the words your want to make italicized and click this button.

8. Strikethrough – Add strikethrough formatting to your selected words.

9. Unordered list – Select this option to turn your content into an unordered list, e.g.:

  • List item 1
  • List item 2
  • List item 3
  • etc …

10. Ordered list – This button turns your text block into an ordered list, e.g.:

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

11. Blockquote. Click this menu item to create a blockquote. Simply select the content you would like included as a block quote and click the menu button.

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

12. Divider Line. Click this icon to insert dividing lines into your content …

Insert a divider into your content

(Insert a dividing line into your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to align text …

13. Align Left

14. Align Center

15. Align Right

Press Enter and leave a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to add a hyperlink to your text (See “How To Add Links To WordPress Posts And Pages” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to delete hyperlinks.

18. ’Read More’ Tag. Click this button to insert a “read more” tag wherever you have placed the cursor. Content added to a post prior to the insertion of this tag will display when published, but anything added to the post after this tag will only be displayed to visitors once they click the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Info

The ‘Read More’ tag will not work on WordPress Pages. It only works on the page that shows your latest blog post entries (i.e. the Blog Page).

19. Enhanced Menu Mode. Clicking this button toggles the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Display/Hide Enhanced Menu

(Enhanced Menu Mode)

20. Distraction-Free Writing. Click this icon to toggle between distraction-free writing screen & normal writing screen. This is a handy feature for checking the placement of items on the page and for working on your content free of other page element distractions …

Distraction-Free Writing Mode Button

(Distraction-Free Writing Mode Toggle)

With distraction-free writing functionality toggled on, all page elements return as soon as you move the mouse cursor outside of the content editor box.

See the “Tips” section in this tutorial for useful tips about using this functionality.

21. Format Style. Use this feature to format selected text.

Notes:

  • The style drop-down menu may include various heading formats and other pre-defined styles built into your WordPress theme.
  • When you create a new post or page and begin entering text into the content editor, your text is formatted using the default “Paragraph” style.
  • Modifying heading formatting styles typically require having knowledge of CSS (Cascading Style Sheets).

To add a heading style to your content, highlight your text and choose a heading option from the drop-down menu (e.g. Heading 6) …

Style Options Drop-Down Menu

(Styles)

22. Underline. Select your text and click this menu button to underline your words.

23. Justify. Clicking this button will justify the paragraph where your mouse cursor has been placed or text highlighted. Justification adjusts the spacing in your text to square up every line of text so that the line ends are not “ragged” (as when text is left-aligned by default).

24. Select Text Color. Highlight an area of text and select a color from the palette in the pull-down menu to replace text color …

Text Color Palette

(Text Color Palette)

Idea

You can add new colors to the palette by clicking on the Custom section …

Custom Color Palette

(Custom Text Color Palette)

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

The example below shows HEX color values for some of the most commonly used “web safe” colors (i.e. colors that display correctly across most monitors) …

HEX Colors

(Commonly Used HEX Colors)

25. Paste as Text. Click the button marked with a “T” to paste the content of your clipboard into your content editor area as plain text …

Plain Text On/Off Mode

(Plain Text On/Off)

Refer to the “Tips” section in the next section of this tutorial for more details about using this item.

26. Remove formatting. If you notice strange formatting codes in your text (or if your content isn’t displaying as you intended after your post or page has been published), then select all text and click this button to clear all formatting on your page.

27. Custom character. Click this button to add characters like © ® ™ and custom characters and symbols to your content.

Special characters

(Add symbols and special characters to your content)

We have written a more detailed tutorial about using special characters in WordPress here:

28. Outdent – Clicking this button decreases text indentation and returns text to left alignment on the page.

29. Indent – Clicking this item adds indentation.

This is a line of indented text.

To keep indenting text, press the Indent button more than once.

30. Undo. Click this button to undo your previous commands. Click this if you have accidentally deleted text or formatted text incorrectly and you would like to restore what you previously had.

31. Redo. Click this button to restore a change or deletion that you have undone.

32. Keyboard Shortcuts. Click this button to display the Keyboard Shortcuts feature. This is covered in more detail in the Tips section further below.

Idea

Installing different plugins can sometimes add extra functions to your menu toolbar …

Plugins can add extra functions to the content editor

(Plugins can add extra features to your WordPress editor)

Important

Underline And Justify Buttons Removed From The Editor In WordPress 4.7

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

Underline And Justify Buttons Removed From The Editor In WordPress 4.7

(Underline And Justify Buttons Removed From The Editor In WordPress 4.7)

Although the buttons have been removed from the toolbar, you can still use the keyboard shortcuts for both buttons (see below).

Useful Tips & Information

Tip #1 - Power User Keyboard Shortcuts

In addition to using the buttons on the editor toolbar menu, you can use the key combinations below as you type. This can help to add and format content faster …

Content Editor - Keyboard Shortcuts

(WordPress Content Editor - Keyboard Shortcuts)

Additional Formatting Shortcuts

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

WP 4.5 - Formatting Shortcuts

(Formatting Shortcuts)

Add 3 horizontal dashes to create a horizontal line and enclose your text in backticks to turn it into <code> …

Formatting Shortcuts - Backticks

(Formatting Shortcuts – Backticks)

The formatting shortcuts for horizontal lines and code are shown below …

WP 4.5 - Formatting Shortcuts

(Formatting Shortcuts)

To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

Tip #2 – Pasting Content Into WordPress From Microsoft Word

Microsoft Word and some other word processors (e.g. Open Office) contain formatting code that is not directly visible when copying text from a document into the clipboard.

If you’re using an earlier version of WordPress than version 3.9, pasting content directly from Microsoft Word into the content editor will add a bunch of unwanted code …

Pasting content from word processing applications into pre-WP 3.9 versions adds unwanted formatting to your content.

(Pasting content from word processing applications into pre-WordPress 3.9 versions can add unwanted formatting to your content.)

As WordPress continually improves its software, more of the technical wizardry required to integrate different platforms seamlessly will happen invisibly behind the scenes, allowing greater numbers of non-tech-savvy users to benefit from WordPress.

WordPress now lets you paste content directly from Microsoft Word and other word processors. If you find that your content is not pasting cleanly, however, then try pasting it into your editor as plain text and format everything afterwards.

Select the Paste as text toolbar button …

WordPress Visual Editor - Paste as text button

(WordPress Editor – Paste as text toolbar button)

Clicking on the Paste as text feature, displays the following message …

Paste as Text popup window

(Paste as Text popup window)

Tip #3 – Clear Formatting Menu Button

You can easily paste formatted content and then remove the formatting using the WordPress editor.

Before removing formatting …

Before removing formatting

After …

After formatting removal

This function can be useful if, for example, you have pasted text directly from another website that includes CSS styling formatting.

Sometimes, you cannot tell whether or not content sourced and pasted from another site contains formatting specific to that site …

Content pasted from an external website ...

(Content pasted from an external website …)

… until you click on the Text tab and see its underlying HTML …

Content pasted directly from external websites can contain unwanted formatting

(… can contain hidden styles!)

If the content has been copied from your own site, things may look fine until you make a change to the styling (e.g. change the color scheme) and discover that some of your previous content elements (e.g. links) have a different CSS style.

For this reason, we recommend clearing the formatting from pasted content, especially from content sourced from other WordPress websites.

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

Paste formatted content into the visual editor

(You can paste formatted content into the visual editor)

Next, select everything and select the Clear formatting button …

Clear formatting button

(WordPress Editor – Clear formatting toolbar button)

All formatting (e.g. bold, italicized text, colors, etc.) is removed …

Remove formatted text from your text

(Removing text formatting)

Note that some content elements will not be removed from your text after applying this function. This includes hyperlinks, headings, etc.

Tip

Here is a quick way to test for content errors that you suspect may be caused by poor formatting without losing the original content.

Before using the Clear formatting feature, switch over to the Text tab, then select and copy everything to your clipboard …

Copying formatted text

(Copying formatted text in WordPress)

Paste the content from the clipboard into a new plain text file, then return to your editor and go through the formatting removal process. Now, if something goes wrong, you have a backup copy of your content with all the original formatting preserved.

Tip #4 – How To Add Line Break Spacing To Your Content

Paragraph spaces are created by clicking the “Enter” key at the end of your text …

Adding line spaces to content

(Default line spacing)

When you press the “Enter” key to add spacing between lines of text, WordPress adds a regular paragraph ending tag (</p>) behind the scenes. To add a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …

Line spacing - break returns

(Line spacing – break returns)

Breaks allow the formatting of your text to continue. This is useful if you want to add a line break to bulleted sections or keep blocks of text together in the same paragraph for styling purposes.

Tip #5 – Resizing The WordPress Visual Text Editor Box

By default, the Full Height Editor feature is enabled, providing users with a responsive and auto-adjustable content editor …

WordPress comes with a responsive content editor

(WordPress has a built-in responsive content editor)

You can quickly tell if the Full Height Editor function is turned on or not, by looking at one or more of the  following tell-tale signs:

  • If you can see the Distraction-Free Writing icon, then the Full Height Editor feature is turned on,
  • If you cannot see the content editor scrollbar, then the Full Height Editor feature is enabled …

Tell-tale signs that the Full Height Editor feature is enabled

(How to tell if the Full Height Editor feature is enabled)

With the full height editor feature enabled, the WordPress content area should automatically expand to accommodate your writing …

Your content editor box should automatically resize as you type

(Your content box automatically expands as you type)

If, however, the Full Height Editor function is disabled, you will see the content editor scrollbar appear once your typing exceeds the size of the text area …

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing Mode menu item the Distraction-Free Writing Mode button will not show up in the Visual Editor tab …

Full Height Editor feature disabled

(Full Height Editor function disabled – Distraction-Free Writing Mode button not visible)

If the Full Height Editor function has been disabled, you can adjust the size your text box using the resizing feature at the bottom right-hand corner of the editor tool …

Text Box Resizing Tool

(Text Box Resizing Tool)

Simply click and drag the text box to resize your content editor …

Resize the content editor using drag and drop

(Drag and drop to resize your content editor)

The editor will expand to the new size …

Resized content editor

(Resized editor)

Tip #6 – Distraction-Free Writing Tool – Additional Info

Distraction-Free Writing functionality requires that the full-height editor be enabled in the Screen Options area (see further below).

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 – WordPress Text Editor)

Tip

You can try eliminating distractions by combining Distraction-Free Writing mode with the Full Screen option of web browsers like Google Chrome & Firefox …

Distraction-Free Writing - WordPress Only vs WordPress & Full-Screen Browser

(Distraction-Free Writing Screens – WordPress Only vs WordPress & Full-Screen Browser)

With Distraction-Free Writing mode turned on and the Full-Screen function of your browser enabled, the current page will fill the screen entirely, leaving you completely free to focus on your writing.

To activate Full-Screen in your web browser, open your browser settings and refer to the diagram below …

Google Chrome & Firefox - Full Screen Feature

(Full Screen Option – Google Chrome & Firefox)

Important Info

To enable either the Full Height Editor or Distraction-Free Writing Mode feature, click on the Screen Options tab (located in the top right-hand area of your WP admin screen) …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, enable the full-height editor and distraction free functionality option …

Enable full-height editor and distraction-free features in your Screen Options

(Enable full-height editor and distraction-free functionality in your Screen Options tab)

Tip #7 – Converting Emoticons

One final tip worth mentioning is that you can convert emoticons (e.g. 😀 ) to graphics by enabling the formatting option inside your Writing Settings (Settings > Writing) screen …

Convert Emoticons - Writing Settings

(WordPress Writing Settings – Formatting)

🙂

Congratulations, now you know how to use your WordPress editor.

A Simple Guide To WordPress Text Formatting For Beginners - How To Use The WP Content Editor

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

Originally published as How To Use The WordPress Visual Content Editor.