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.

A Beginner's Guide To Content Formatting*** 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 built-in editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

In this step-by-step tutorial, you will learn how to use the WordPress Visual Editor.

A Basic Guide To WordPress Content Formatting

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

WordPress WYSIWYG editor

(WordPress content editor)

WordPress Visual Editor Menu Toolbar Explained

If you have used an editor like MS Word, then the WordPress visual editing interface should seem familiar to you …

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu Toolbar)

Below is a brief description of each of the visual editor menu toolbar buttons shown in the screenshot above:

1. Title Area – Here’s where you enter your post or page title.

2. Permalink – Click on the Edit button to change your permalink. This function is useful if you want to optimize your post/page URL.

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

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

5. Text Tab – Switch between the two tabs to add content in the WYSIWYG mode and make changes to its code. When inserting content into the text tab, line breaks get automatically converted into paragraphs …

Text [HTML] Editor Mode

(Text [HTML] Editor)

6. Bold – Select this item to add bold formatting to your words.

7. Italics – Click this feature to add italicized formatting to your words.

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

9. Unordered list – Click this menu item to turn your content into an unordered list, e.g.:

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

10. Ordered list – Turns your text into an ordered list like the example below:

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

11. Blockquote. Use this functionality to insert a block quote into your content. Just select the content section you want to display in the blockquote and click the menu button.

To exit the blockquote 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 standard formatting.

12. Dividing Line. Select this button to add dividing lines to your content …

Horizontal line function

(Add dividing lines to your content)

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

13. Align Left

14. Align Center

15. Align Right

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

16. Insert/Edit Link. Click this button to paste hyperlinks into your content (See “Linking Content Internally In WordPress Posts & Pages” tutorial for useful tips on creating internal links).

17. Unlink. Click this button to remove hyperlinks.

18. Read More Tag. This function inserts a “read more” tag into the content wherever you have placed your cursor. All text added to a post prior to inserting this tag displays when published, but anything added to the post after this tag only appears to site visitors once they click on the “read more” link …

Insert 'Read More' Tag

(Insert ‘Read More’ Tag)

Important Info

The ‘Read More’ tag does not work on WordPress Pages. It is only used on the page showing your latest entries (i.e. the Blog Page).

19. Show/Hide Kitchen Sink. Click this button to toggle the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Toolbar Toggle

(Enhanced Menu Toolbar)

20. Distraction-Free Writing. Click this icon to toggle between distraction-free writing functionality & normal mode. This is handy for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Functionality

(Distraction-Free Writing Mode Button)

With distraction-free writing functionality turned on, the surrounding page elements return as soon as you move the mouse cursor outside the content area.

See the “Tips” section further below for more tips on using this feature.

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

Notes:

  • The style menu may include various heading styles 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 box, your text is formatted using the “Paragraph” style by default.
  • Modifying heading styles typically require knowing how to edit CSS (Cascading Style Sheets).

To create headings, highlight your text and choose a style from the drop-down menu (e.g. Heading 6) …

Heading Styles Drop Menu

(Heading Styles Drop Menu)

22. Underline. Highlight words in your text and click this button to add underline formatting.

23. Justify. Clicking this button will justify a paragraph where your mouse cursor has been placed or text highlighted. Justification ”neatens” your paragraphs by ensuring that line ends are not “ragged” (as when text is aligned left by default).

24. Text Color. Highlight your text and choose a color from the pulldown palette to change your text color …

Color Palette

(Text Color Palette)

Useful Information

You can expand the selection of colors available in the color palette by clicking on the Custom section …

Select Custom Text Colors

(Custom Text Colors)

You will then have access to an almost limitless choice of colors. If you are familiar with the Hexadecimal (HEX) color system, 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 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 accurately across most browsers) …

HEX Colors [Web-Safe]

(HEX Color Codes)

25. Paste as Plain Text. Click this button to paste the content of your clipboard into your content editor area as plain text …

Plain Text On/Off Mode

(Plain Text On/Off)

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

26. Clear formatting. If you spot unnecessary codes in your content (or if your content isn’t displaying as you expected after publishing), then select all text and click this button to clear all formatting on your page.

27. Insert special character. Click this button to add symbols like © ® ™ and a bunch of custom symbols to your content.

Add symbols and special characters to your content

(Special character table)

We have written a more detailed tutorial about adding symbols to WordPress here:

28. Outdent – Clicking this menu item shifts a section of text to the left.

29. Increase Indent – Clicking this item increases indented text.

This is a sample of indented text.

This text has been indented further by pressing the Increase Indent button one more time.

30. Undo. Clicking this button undoes your previous actions. This is useful if you have accidentally deleted a section of text or formatted text incorrectly and need to restore things as they were previously.

31. Redo. Clicking this button restores a change or deletion that you have undone.

32. Keyboard Shortcuts. Click this button to see the Keyboard Shortcuts screen. This is covered in more detail in the Tips section below.

Idea

Plugins can add extra buttons to your WordPress editor …

Plugins can add extra buttons to the menu toolbar

(Plugins can add new features to the content 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).

Content Editor Tips

Tip #1 - Using Power User Keyboard Shortcuts

In addition to using the buttons in your Visual Editor toolbar, you can use the key combinations below as you type. This will help you work faster …

WordPress Content Editor - Power User 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 WP v. 4.5 you can now also use formatting shortcuts for horizontal lines and code …

WordPress v. 4.5 - Formatting Shortcuts

(Formatting Shortcuts)

Add three horizontal dashes to insert a horizontal line and enclose your text in backticks to turn your highlighted text into <code> …

WP 4.5 : Formatting Shortcuts - Backticks

(Formatting Shortcuts – Backticks)

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

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 From MS Word

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

If 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 processors into pre-WP 3.9 versions can add unwanted formatting to your content.

(Pasting content from word processors into pre-WP 3.9 versions adds unwanted formatting to your content.)

As WordPress improves its software with every new version released, more of the technical wizardry will take place behind the scenes, allowing more non-technical minded users to benefit from using WordPress.

Versions newer than WP v. 3.9 now offer built-in support for pasting content directly from Microsoft Word and other word processors. If the source content is not pasting cleanly, however, then try pasting it in as plain text and format it later.

Click on the Paste as text menu button …

Paste as text menu button

(WordPress Editor – Paste as text toolbar button)

When you toggle on the Paste as text menu button, the following notification pops up …

Paste as Text notification

(Paste as Text notice)

Tip #3 – Using The Clear Formatting Function

You can paste formatted content and then remove the formatting inside the WordPress Visual editor.

Before formatting removal …

Before removing formatting

After …

After formatting removal

This is great if, for example, you have pasted a block of content from another website that contains CSS formatting.

Sometimes, you cannot tell that content pasted from an external 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 view its underlying HTML …

Content pasted directly from an external website can contain hidden styles

(… may include unwanted formatting!)

If the content was copied from your own website, things may look normal until you make a change to the styling (e.g. change your color scheme) and discover that some of your old content elements contain incorrect formatting.

For this reason, it’s a good idea to clear the formatting from pasted content, especially if your content has been copied from other sites.

To do this, paste your content into the Visual editor …

You can paste formatted content into the WordPress visual editor

(You can paste pre-formatted content into the visual editor)

Next, select all the content and select the Clear formatting button …

Clear formatting toolbar button

(WordPress Visual Editor – Clear formatting menu toolbar button)

All your formatting (e.g. bold, italicized text, etc.) has been removed …

Removing formatting styles from your text

(Removing formatting styles from your content)

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

Useful Tip

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

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

Copying formatted text

(Copying formatted text to the clipboard)

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

Tip #4 – How To Add Line Break Spacing To Text

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

Line spacing - default

(Line spaces)

When you hit the “Enter” key to start a new line, WordPress adds a regular paragraph ending tag (</p>) to the content’s HTML. To insert a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …

Adding single line spaces to content

(Single line spacing)

Breaks enable the formatting of the paragraph 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 Content Editor

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

WordPress has a built-in responsive content editor

(WordPress includes a responsive editor)

You can determine whether the Full Height Editor function is active or not, by looking at one or more of the  following:

  • If you can see the Distraction-Free Writing Mode button, then the Full Height Editor feature is enabled,
  • If the scrollbar cannot be seen when your text exceeds the text editor box, then the Full Height Editor function is active …

How to tell if the Full Height Editor function is turned on

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

When the full height editor feature is enabled, the editor box should automatically expand to accommodate your writing …

Your WordPress content editor box should automatically expand as you type

(The WordPress content editor area automatically resizes as you type)

If the Full Height Editor function is inactive, you will see the content editor scrollbar once your content exceeds the size of the text box …

Full Height Editor function disabled - scrollbar visible

(Full Height Editor function disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing Mode function displayed in the Visual Editor …

Full Height Editor function disabled - Distraction-Free Writing Mode icon not visible

(Full Height Editor function disabled)

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

Text Box Resizing Feature

(Text Box Resizing Tool)

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

Resize your content editor using drag and drop

(Resize your content editor using drag and drop)

Your editor will expand to the new size …

Resized content editor

(Resized content editor)

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

Distraction-Free Writing functionality requires that the full-height editor is enabled in Screen Options (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 Writing Mode - WordPress Text Editor

(Distraction-Free Writing Mode – WordPress Text Editor)

Practical Tip

You can eliminate writing distractions by combining Distraction-Free writing and the Full-Screen function of browsers like Google Chrome & Firefox …

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

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

With Distraction-Free writing activated and the Full Screen function of your web browser enabled, the current page will completely fill the screen, leaving only the post or page title and content you’re working on visible.

To switch on Full-Screen in your browser, open your browser options menu and click on the icons shown below …

Full-Screen Option - Google Chrome & Firefox

(Google Chrome & Firefox Browsers – Full Screen Option)

Tip

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click the Screen Options tab in the top-right corner of your WP dashboard screen …

Screen Options Tab

(Screen Options Tab)

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

Screen Options - Enable full-height editor and distraction-free functionality

(Screen Options – Enable full-height editor and distraction-free features)

Tip #7 – Converting Emoticons

One last 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 …

Formatting - Writing Settings

(WP Writing Settings – Formatting)

🙂

Congratulations! Now you know how to use the content editor in WordPress.

A Simple Guide To Content Formatting In WordPress For Beginners - Using The WordPress 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.