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 - A Beginner's Guide To Content FormattingWordPress makes publishing and formatting content online easy by providing users with a fully-featured editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

In this tutorial, we show you how to use the WordPress Visual Content Editor.

A Basic Guide To WordPress Content Formatting For Beginners

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

WordPress WYSIWYG content editor

(WordPress content editor)

WordPress Visual Editor Menu Buttons Explained

If you have used a word processing application like Microsoft Word, then the WordPress visual content editor interface will probably feel familiar to you …

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu Buttons)

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

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

2. Permalink – Clicking on the Edit button changes the permalink text of your post or page. This function is useful if you would like to optimize your post URL.

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

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

5. Text Editor Tab – Switch between the editor tabs to add content in the WYSIWYG mode and make changes to the code. When adding content using the text tab, line breaks will be converted into paragraphs automatically …

Text Editor

(Text [HTML] Editor Mode)

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

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

8. Strikethrough – Formats highlighted text with strikethrough.

9. Unordered list – Turns your content into an unordered list, e.g.:

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

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

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

11. Blockquote. Select this menu item to insert a block quote into your content. Select the content section you want displayed in the block quote and click this 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.

12. Divider Line. Choose this function to insert horizontal lines into your content …

Insert horizontal lines into your content

(Add a divider to your content)

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

13. Align Left

14. Align Center

15. Align Right

Press Enter and add a line of space to end the alignment command.

16. Insert/Edit Link. Click this button to add hyperlinks to your text (See “How To Add HTML Hyperlinks In WordPress” tutorial for useful tips on using the hyperlink function).

17. Unlink. Highlight content you want unlinked and click this button to delete the hyperlink.

18. Insert Read More Tag. Click this menu button to insert a “read more” link wherever you have placed the cursor. Content added to a post prior to the insertion of this tag displays when published, but content added to the post after this tag only displays to site 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 is only used on the page that shows your most recent posts (i.e. the Blog Page).

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

Show/Hide Kitchen Sink

(Display/Hide Enhanced Menu)

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

Distraction-Free Writing Mode

(Distraction-Free Writing Mode Button)

When distraction-free writing mode is enabled, the surrounding page elements return when the cursor is moved outside of the content area.

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

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

Notes:

  • The style pull-down menu may include default heading formats and other pre-defined styles built into your WordPress theme.
  • When you create a new post or page and begin typing into the content area, your text is formatted using the “Paragraph” style by default.
  • Modifying content styles generally require knowing how to edit CSS (Cascading Style Sheets).

To create headings, highlight your text and choose a heading style format from the pull menu (e.g. Heading 6) …

Style Options Drop-Down Menu

(Format Styles Pull-Down Menu)

22. Underline. Select this menu item to underline the words.

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

24. Select Text Color. Highlight an area of text and choose a color from the drop-down menu options to edit text color …

Text Color Palette

(Color Palette)

Idea

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

Custom Text Color Palette

(Custom Color Palette)

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 add a new custom color.

The table below shows the HEX color values for commonly used “web safe” colors (i.e. colors that display accurately across most browsers) …

Common HEX Color Codes [Web-Safe]

(Commonly Used HEX Colors)

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

(Plain Text On/Off)

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

26. Clear formatting. Use this feature to clear all formatting if you detect unnecessary formatting codes in your content (or if your content isn’t displaying as you intended after publishing).

27. Special characters. Click this button to add characters like © ® ™ and many other symbols to your content.

Add special characters to your content

(Special character table)

For more information on using special characters in WordPress, refer to this tutorial: How To Insert Special Characters Into Your WordPress Pages And Posts

28. Outdent – Click this item to remove text indentation.

29. Indent – Click this menu item to increase indentation.

Here’s a sample of indented text.

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

30. Undo. Clicking this button undoes your previous actions. Click this if you have accidentally deleted content or formatted text incorrectly and need to backtrack.

31. Redo. Clicking this button reinstates any changes or deletions that you have made.

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

Useful Information

After installing certain plugins you may see new items added to the WordPress content editor menu …

Plugins can add new options to your WordPress editor

(Plugins can add extra features to the WordPress toolbar)

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

WordPress Content Editor Tips

Tip #1 - Keyboard Shortcuts For Power Users

As well as using the buttons in the editor toolbar, you can use the power key combinations below as you type. This can help you work faster …

WordPress 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 WP version 4.5 you can now also use formatting shortcuts for horizontal lines and code …

Formatting Shortcuts

(Formatting Shortcuts)

Add 3 horizontal dashes to create a horizontal line and enclose your text in backticks to turn your highlighted text 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)

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

redarrow How To Enhance The WordPress Visual Editor

Tip #2 – Pasting Content From Microsoft Word

Microsoft Word and some other word processing applications can 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 introduce messy HTML code into your content resulting in formatting errors …

Pasting content from word processors into pre-WP 3.9 versions can add unwanted formatting to your content.

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

The above is a great example of how WordPress continues to improve its software, so that more of the work required to seamlessly integrate different platforms happens “magically” behind the scenes, allowing users to become less and less technical-minded.

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

Click on the Paste as text button …

WordPress Editor - Paste as text toolbar button

(Paste as text menu toolbar button)

Toggling on the Paste as text menu button, displays the following window, letting you know that the feature will remain turned on until you toggle this option off, and reminds you to turn it off if pasting rich content from Microsoft Word …

Paste as Text feature message

(Paste as Text message)

Tip #3 – Using The Clear Formatting Button

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

Before …

Before formatting is removed

After …

After removing formatting

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

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

Content pasted directly from external websites ...

(Content pasted from an external website …)

… until you click on the Text tab and see the HTML code …

Content pasted directly from an external website can contain hidden CSS styling

(… can contain hidden CSS styling!)

If you’ve copied the content from your own website, everything may look fine until you make a change to the styling (e.g. change your color scheme) and some of your old blog posts are formatted differently.

For this reason, it’s a good idea to remove the formatting from pasted content, especially from content sourced from other WordPress websites or blogs.

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

Paste content with formatting into the WordPress visual editor

(Paste content with formatting into the WordPress visual editor)

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

WordPress Editor - Clear formatting menu button

(WordPress Visual Editor – Clear formatting button)

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

Text formatting removal

(Removing formatting styles from your content)

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

Tip

Here is a quick way to test for errors suspected of being caused by poor formatting without losing the original content.

Before using the Clear formatting function, switch to the Text tab, then select and copy all of your text to the clipboard …

Copying formatted text to the clipboard

(Copying formatted text in WordPress)

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

Tip #4 – How To Add Line Break Returns To Content

As with most applications, line returns are created by pressing the “Enter” key at the end of your text …

Line spacing - default

(Adding line spaces to content)

When you hit 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 returns, use both the “shift” and “enter” keys …

Line break returns

(Single line spacing)

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 the same style going in another text block.

Tip #5 – Resizing The WordPress Content Editor

By default, the Full Height Editor function is activated, providing users with a responsive and self-adjusting editor …

WordPress includes a built-in responsive editor

(WordPress includes a responsive content editor)

You can confirm if the Full Height Editor feature is active or not, by looking at one or more of the  following tell-tale signs:

  • If the Distraction-Free Writing icon can be seen, then the Full Height Editor feature is active,
  • If the content scrollbar is not visible when your typing exceeds the text area, 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 feature is turned on)

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

Your WordPress content editor area automatically expands as you type

(Your WordPress content area should automatically resize as you type)

If, however, the Full Height Editor function is inactive, the content editor scrollbar will appear once your typing exceeds 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 icon the Distraction-Free Writing Mode menu icon will not be visible in the Visual Editor …

Full Height Editor feature disabled - Distraction-Free Writing Mode feature not visible

(Full Height Editor function disabled)

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

Text Box Resizing Tool

(Text Box Resizing Feature)

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

Drag and drop to resize your editor

(Drag and drop to resize your text box)

Your content editor will enlarge to the new size …

Resized WordPress editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Tool

Distraction-Free Writing requires that the full-height editor be 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 - Text Editor

(Distraction-Free Writing Mode – WordPress Text Editor)

Useful Tip

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

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

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

With Distraction-Free Writing mode switched on and the Full-Screen function of your browser enabled, your current page will fill the screen entirely, leaving only the post title and content you’re working on visible.

To use Full-Screen either Firefox or Google Chrome, open your browser settings and click on the buttons shown below …

Full Screen Option - Google Chrome & Firefox

(Full Screen Function – Google Chrome & Firefox Web Browsers)

Important

To enable either the Full Height Editor or Distraction-Free Writing Mode feature, click on the Screen Options tab …

Screen Options Tab

(Screen Options Tab)

In the Additional settings section, 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)

Tip #7 – How To Convert Emoticons

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

Convert Emoticons - Writing Settings

(WP Writing Settings – Formatting Options)

🙂

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

The WP Visual Editor - A Basic Guide To WordPress Content Formatting

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site and the services and products offered on this site are not affiliated, associated, sponsored, or endorsed by WordPress, nor have they been tested, certified, or reviewed by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items linked to, advertised, or reviewed on this site.

***

Was this article useful? If so, please consider sharing this page with others using the social buttons below.

Author: Martin Aranovitch

WPCompendium.org provides hundreds of FREE WordPress tutorials for beginners. Our detailed step-by-step tutorials will save you money and teach you how to start, manage, and grow a website or blog using WordPress that puts you in complete control and delivers results with no coding skills required!

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