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 Simple Guide To Content Formatting In WordPress For Beginners - The WP 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 built-in visual 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, you will learn how to use the WordPress Visual Content Editor.

A Simple Guide To Formatting Content In WordPress

WordPress comes with a built-in semi-WYSIWYG (What You See Is What You Get) content editor that enables you to format text, create hyperlinks, add images and media to your posts and pages, and much more, simply by clicking a few buttons …

WordPress WYSIWYG editor

(WordPress content editor)

WordPress Visual Editor Buttons Explained

If you have used an editor like MS Word, then the WordPress content editor interface will probably feel quite familiar to you …

WordPress Visual Editor Buttons

(WordPress Visual Editor Menu Items)

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

1. Post Title Field – Enter your Post/Page title here.

2. Permalink – Click on the “Edit” button to change your post permalink. This is useful if you would like to change the URL of your post or page.

3. Media Manager – Click the Add Media button to 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 website’s media library.

4. Visual Tab – Click to access the WYSIWYG (What You See Is What You Get) content editor.

5. Text Tab – The Text tab lets you enter HTML along with your post text. When entering content using the text tab, line breaks are automatically converted into paragraphs …

Text Editor Mode

(Text Editor Mode)

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

7. Italics – Select words in your text and click this button to add italicized formatting.

8. Strikethrough – Formats highlighted text with strikethrough.

9. Unordered list – This button turns your selected text into an unordered list, e.g.:

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

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

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

11. Blockquote. Choose this feature to create a blockquote. Simply select the content section you want to include as a blockquote and click this 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 return your text to normal formatting.

12. Horizontal Line. Click this menu item to insert dividing lines into your content …

Insert a divider into your content

(Insert lines into your content)

13, 14 & 15. Alignment buttons – Use these buttons to align your content elements …

13. Align Left

14. Align Center

15. Align Right

Press the “Enter” key and add a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to add a hyperlink to your text (See “Adding Hyperlinks To WordPress Posts” tutorial to learn more about using the hyperlink function).

17. Unlink. Highlight the text you want to unlink and click this button to remove the hyperlink.

18. ’Read More’ Tag. Clicking this icon will insert a “read more” tag wherever you have placed your cursor. Content added to a post prior to inserting this tag displays when published, but content added to the post after this tag only displays to site visitors after they click on the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Important

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

19. Display/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).

Display/Hide Kitchen Sink

(Show/Hide Kitchen Sink)

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

Distraction-Free Writing Functionality

(Distraction-Free Writing Functionality)

With distraction-free writing mode turned on, your page elements return to the screen when the cursor is moved outside the boundaries of the content editor.

Refer to the “Tips” section in this tutorial for useful tips on using this item.

21. Format Style. This feature lets you format your text.

Notes:

  • The style drop menu may include various headings and other pre-defined styles built into your theme.
  • When you create a new post and begin typing into the content editor, the text is formatted using the “Paragraph” style by default.
  • Modifying heading styles typically require knowing how to edit CSS (Cascading Style Sheets).

To add a heading style to your content, highlight your text and select a style from the pulldown menu (e.g. Heading 2) …

Style Options

(Heading Style Formats)

22. Underline. Highlight content and click this button to add underline formatting.

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

24. Select Text Color. Highlight text and choose a color from the options in the dropdown menu to change text color …

Text Color Palette

(Select Text Color)

Idea

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

Custom Text Color Palette

(Select Custom Text Colors)

This gives you access to an almost limitless palette 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 select a custom color.

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

HEX Color Codes

(HEX Color Codes [Web-Safe])

25. Paste as 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 Mode)

Refer to the “Tips” section further below for useful information about using this item.

26. Clear formatting. If you notice strange 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 insert symbols like © ® ™ and other custom symbols and characters into your content.

Insert symbols or custom characters into your content

(Add special characters and symbols to your content)

For more information on adding symbols to WordPress, refer to this tutorial:

28. Decrease Indent – Click this button to shift text to the left.

29. Increase Indent – Click this button to indent one or more lines of text to the right.

Here’s a sample of indented text.

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

30. Undo. Click this button to undo your previous actions. This is useful if you have accidentally deleted text or formatted text incorrectly and need to restore what you previously had.

31. Redo. Click this button to redo any changes or deletions that you have undone.

32. Keyboard Shortcuts. Clicking this button displays the Keyboard Shortcuts feature. This is covered in more detail in the Tips section further below.

Tip

Plugins can add new options to the WordPress content editor …

Plugins can add extra features to the editor

(Plugins can add extra functions to your 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 & Additional Information

Tip #1 - Keyboard Shortcuts For Power Users

As well as using the menu buttons on the editor toolbar, you can use the key combinations below as you type. This will help you get work done faster …

WordPress Content Editor - Keyboard Shortcuts

(WordPress Content Editor Power User Keyboard Shortcuts)

Additional Formatting Shortcuts

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

Formatting Shortcuts

(Formatting Shortcuts)

Add three horizontal dashes to insert 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 …

Formatting Shortcuts

(WP 4.5 – 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 MS Word

MS Word and some other word processors can contain formatting 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 introduce unwanted code into your content resulting in formatting errors …

Pasting content from word processors into pre-WP 3.9 versions adds 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 “magic” required to integrate different platforms seamlessly will take place behind the scenes, requiring users to become less and less technical-minded.

WordPress now comes with 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 into your editor using the plain text mode button and format everything afterwards.

Select the Paste as text button …

WordPress Editor - Paste as text button

(Paste as text menu toolbar button)

Turn on the Paste as text button and the following notification displays …

Paste as Text notification

(Paste as Text message)

Tip #3 – Removing Formatting From Text

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

Before …

Before removing formatting

After …

After formatting removal

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

Sometimes, you can’t tell that the content you’ve pasted from another site contains formatting specific to that website …

Content pasted directly from external websites ...

(Content pasted directly from an external website …)

… until you view the underlying code …

Content pasted from an external website may contain incompatible styles

(… can include incompatible CSS styling!)

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

For this reason, we recommend removing the formatting from pasted content, especially if your content has been copied from other WordPress sites.

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

You can paste pre-formatted content into the visual editor

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

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

WordPress Visual Editor - Clear formatting button

(Clear formatting menu button)

All formatting (such as bold, italicized text, colors, etc.) is now removed …

Removing content formatting

(Formatting removal)

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

Useful Tip

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

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

Copying formatted text in WordPress

(Copying formatted text)

Open a new plain text file, paste into it the content from your clipboard, then go back to your content editor and complete the “remove formatting” process. Now, if something were to go wrong, at least you have a backup copy of your content with all the original formatting preserved.

Tip #4 – Adding Line Break Spacing To Your Content

As with most applications, line returns are created by clicking the “Enter” key after typing text …

Line spacing - default

(Line spacing – default)

When you press the “Enter” key to start a new line, 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 …

Single line spacing

(Single line spacing)

Breaks enable the formatting of your block of text to be carried over. This is useful if you want to add line breaks to a bulleted section or keep the same style going in a different text block.

Tip #5 – Resizing The WordPress Content Editor

By default, the Full Height Editor feature is activated, 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)

The easiest way to check whether the Full Height Editor feature is active or not, is to look at one or more of the  following tell-tale signs:

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

Tell-tale signs that the Full Height Editor feature is turned on

(Tell-tale signs that the Full Height Editor function is enabled)

When the full height editor feature is enabled, the WordPress content editor resizes automatically as you type to fit more content …

Your content editor box automatically expands as you type

(Your content box should automatically resize as you type)

If the Full Height Editor feature is disabled, you will see the content editor scrollbar appear once your text exceeds the visible space inside your editor …

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled)

Additionally, you will not see the Distraction-Free Writing menu item the Distraction-Free Writing menu button will not be shown in the Visual Editor …

Full Height Editor feature disabled

(Full Height Editor feature disabled)

If the Full Height Editor feature is inactive, you can adjust the size your text box using the text box resizing feature …

Text Box Resizing Tool

(Text Box Resizing Tool)

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

Resize your text box using drag and drop

(Drag and drop to resize your text box)

Your text box will expand to the new size …

Resized content editor

(Resized WordPress editor)

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

Distraction-Free Writing 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 Mode - WordPress Text Editor

(Distraction-Free Mode – WordPress Text Editor)

Useful Tip

To eliminate all distractions try combining the Distraction-Free writing tool and the Full-Screen feature of browsers like Google Chrome & Firefox …

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

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

With Distraction-Free writing activated and the Full-Screen option of your browser enabled, the current page completely fills the screen, leaving you completely free to focus on your content without distracting elements.

To turn on Full-Screen in the Firefox or Google Chrome browser, go to your browser options menu and refer to the picture below …

Full-Screen Function - Google Chrome & Firefox

(Google Chrome & Firefox Browsers – Full Screen Function)

Useful Information

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click the Screen Options tab in the top-right area of your WP dashboard 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 functionality in your Screen Options

(Enable full-height editor and distraction-free features)

Tip #7 – How To Convert Emoticons

One more tip worth mentioning is that you can convert emoticons to graphics by enabling the formatting option inside your Writing Settings (Settings > Writing) section …

Writing Settings - Formatting Options

(Writing Settings – Formatting Options)

🙂

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

The WP Editor

***

"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

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