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 Basic Guide To WordPress Text Formatting For Beginners*** 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 it easy to publish and format content online by providing users with a rich built-in editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded media quickly.

In this tutorial, you will learn how to use the WordPress Visual Editor – what the menu toolbar items do, how to format content, and more!

A Basic Guide To Content Formatting For Beginners

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

WordPress editor

(WordPress editor)

WordPress Visual Editor Menu Explained

If you have used content editing software like Microsoft Word, then the WordPress visual content editor interface will probably feel quite familiar to you …

WordPress Visual Editor Menu

(WordPress Visual Editor Menu)

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

1. Post Title Field – Here’s where you type in your post/page title.

2. Permalink – Click on the Edit button to change your post permalink. This is useful if you would like to search optimize your post URL.

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

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

5. Text (HTML) Tab – Clicking this tab lets you access your content’s HTML code. When inserting content using the text tab, WordPress automatically converts line breaks into paragraphs …

Text [HTML] Editor Tab

(Text Editor)

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

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

8. Strikethrough – Add strikethrough formatting to your content.

9. Unordered list – Select this button to create an unordered list like the example below:

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

10. Ordered list – Use this function to turn your selected content into an ordered list like the example below:

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

11. Blockquote. Choose this feature to insert a block quote into your content. Just select the content section you want to display as a block quote and click this menu button.

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

12. Divider Line. Select this function to add a horizontal line to your content …

Insert a dividing line into your content

(Add dividers to your content)

13, 14 & 15. Alignment buttons – Select these buttons to align content …

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 paste a hyperlink into your text (See “How To Insert Internal Content Hyperlinks Into WordPress Posts & Pages” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to delete hyperlinks.

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

'Read More' Tag

(’Read More’ Tag)

Important

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

19. Toolbar Toggle. 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 Enhanced Menu

(Enhanced Menu Mode)

20. Distraction-Free Writing Mode. Clicking this item will toggle between distraction-free writing mode & normal mode. This is useful for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Mode Toggle Button

(Distraction-Free Writing Mode Toggle)

With distraction-free writing mode toggled on, your page elements return as soon as the cursor is moved outside the boundaries of the content editor.

See the “Tips” section in this tutorial for useful details on using this function.

21. Format Style. This feature lets you change the formatting of your text.

Notes:

  • Depending on your site’s theme, the style pulldown menu may include various heading formats and other pre-defined styles.
  • When you create a new post or page and begin typing into the content editor, your text will typically be formatted using the default “Paragraph” style.
  • Modifying heading formatting styles generally require knowing how to edit CSS (Cascading Style Sheets).

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

Heading Style Formats

(Heading Styles Drop Menu)

22. Underline. Select the content your want to underline and click this button.

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

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

Text Color Palette

(Color Palette)

Useful Info

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

Custom Text Color Palette

(Custom Color Palette)

This gives you access to wide palette of colors. If you are familiar with the Hexadecimal (HEX) color system, just type in the code 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 HEX color values for commonly used “web safe” colors (i.e. colors that display accurately across most browsers) …

HEX Color Codes

(HEX Color Codes)

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)

Refer to the “Tips” section below for useful details about using this feature.

26. Remove formatting. Use this feature to clear all page formatting if you detect unnecessary formatting codes in your content (or if your content isn’t displaying as you intended after your post or page has been published).

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

Add symbols and special characters to your content

(Add symbols and special characters to your content)

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

28. Decrease Indent – Click this menu button to outdent text.

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

Here’s a line 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 commands. Use this if you have accidentally deleted text or formatted content incorrectly and need to restore what you previously had.

31. Redo. Clicking this button reinstates a change or deletion that you have made.

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

Useful Info

Plugins can add new functions to the editor …

Plugins can add extra items to the toolbar

(Plugins can add new buttons to your 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).

Tips And Useful Information

Tip #1 - Power User Keyboard Shortcuts

In addition to using the buttons in the content editor toolbar, you can use the power key combinations below as you type. This will help power users to create and format content faster …

WordPress Content Editor Keyboard Shortcuts

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

Formatting Shortcuts

(Formatting Shortcuts)

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

WP version 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 Into WordPress From MS Word

MS Word and some other word processing applications (e.g. Google Docs) can contain 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 editor will introduce unwanted HTML code into your content creating formatting errors …

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

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

The above is a good example of how WordPress continues to improve with new releases and updates, so that more of the technical wizardry of making content from different platforms work together now takes place behind the scenes, freeing up 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 the source 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 menu toolbar button

(WordPress Editor – Paste as text menu button)

Click on the Paste as text menu button and the following reminder displays …

Paste as Text popup message

(Paste as Text message)

Tip #3 – Using The Clear Formatting Feature

You can also remove formatting from pasted content using the WordPress Visual editor.

Before formatting is removed …

Before removing formatting

After …

After removing formatting

This feature can be useful if, for example, you have pasted content directly from an external website that includes CSS formatting.

Sometimes, you cannot tell whether or not the content you’ve pasted from another website contains formatting specific to that site …

Content pasted from external websites ...

(Content pasted from an external website …)

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

Content pasted from an external website can include incompatible styles

(… can include unwanted styles!)

If you’ve copied the content 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 old posts contain old formatting styles.

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

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

You can paste content with formatting into the visual editor

(You can paste formatted content into the WordPress visual editor)

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

Clear formatting menu button

(Clear formatting menu toolbar button)

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

Formatting removal

(Removing formatting styles from your content)

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

Practical Tip

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

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

Copying formatted text in WordPress

(Copying formatted text in WordPress)

Paste the content from the clipboard into a new text file, 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 content with all the original formatting preserved.

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

Line returns are created by pressing the “Enter” key after typing text …

Adding line spaces to content

(Default line spacing)

When you hit the “Enter” key to start a new line, WordPress adds a normal 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 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 or keep the same style going on another text block.

Tip #5 – How To Resize The WordPress Content Editor

By default, all newer versions of WordPress have the Full Height Editor feature activated, providing users with a responsive and self-adjusting content editor …

WordPress includes a built-in responsive content editor

(WordPress includes a responsive editor)

The quickest way to check if the Full Height Editor feature is active or not, is to look at either of the  following:

  • If the Distraction-Free Writing Mode button is visible, then the Full Height Editor function is turned on,
  • If you cannot see the editor scrollbar, then the Full Height Editor function is on …

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

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

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

Your WordPress content editor area automatically expands as you type

(The WordPress content box should automatically resize as you type)

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

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled – scrollbar visible)

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

Full Height Editor feature disabled

(Full Height Editor feature disabled)

If the Full Height Editor feature has been disabled, you can resize 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 the content editor …

Resize your text box using drag and drop

(Drag and drop to resize the text box)

Your content editor will be resized …

Resized content editor

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Functionality

Distraction-Free Writing requires the full-height editor to is 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 Writing Mode - Text Editor

(Distraction-Free Writing Mode – WordPress Text Editor)

Useful Tip

You can eliminate all writing distractions by 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 Web Browser

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

With Distraction-Free writing switched on and the Full Screen feature of your web browser enabled, the current page will completely fill the screen, leaving you completely free to focus on your content.

To turn on Full-Screen in Firefox or Chrome, refer to the instructions below …

Full Screen Feature - Google Chrome & Firefox Web Browsers

(Google Chrome & Firefox Browsers – Full Screen Option)

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click the Screen Options tab in the top right-hand corner of your WordPress administration screen …

Screen Options Tab

(Screen Options Tab)

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

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

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

Tip #7 – Convert Emoticons

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

Writing Settings - Formatting

(Formatting Options: Convert Emoticons – WP Writing Settings)

🙂

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

A Basic Guide To Content Formatting - Using The WordPress Content 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

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress SEOWordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

How To Create Engaging PresentationsHow To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

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