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 Formatting Content In WordPress 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 visual 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 are going to learn how to use the WordPress Visual Content Editor.

A Basic Guide To Content Formatting In WordPress For Beginners

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

WordPress WYSIWYG content editor

(WordPress editor)

WordPress Visual Editor Buttons Explained

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

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu Toolbar Buttons)

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

1. Title Field – Type in your Post title here.

2. Permalink – Clicking on the “Edit” button changes your permalink. This is useful if you want to improve your post/page SEO.

3. Add Media – Clicking the Add Media button lets you upload, manage and insert media into your post or page from your 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) visual editor.

5. Text Editor Tab – The Text mode lets you enter HTML along with your post text. When inserting content into the text tab, WordPress converts line breaks into paragraphs automatically …

Text [HTML] Editor Mode

(WP 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 selected text with strikethrough.

9. Unordered list – Click this button to turn your selected text into an unordered list like the example below:

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

10. Ordered list – Click this item to turn your selected text into an ordered list like the example below:

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

11. Block Quote. Click this menu button to create a blockquote. Simply select the section of text you want to display in the block quote and click the button.

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

12. Horizontal Line. Select this icon to insert a horizontal line into your content …

Add horizontal lines to your content

(Insert horizontal lines into your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to align your content 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. Use this button to add a hyperlink to your text (See “Inserting Internal Content Links Into WordPress Posts” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to remove hyperlinks.

18. Read More Tag. This function inserts a “read more” tag into your content wherever you have placed the cursor. All text 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 on the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Info

The ‘Read More’ tag doesn’t work on WordPress Pages. It only works on the page showing your most recent blog posts (i.e. the Blog Page).

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

Enhanced Menu Mode

(Enhanced Menu Toolbar)

20. Distraction-Free Writing Tool. Clicking this button will toggle between distraction-free writing screen & normal writing 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

(Distraction-Free Writing Mode Toggle)

When distraction-free writing functionality is enabled, the surrounding page elements return to the screen when you move the mouse cursor outside the content editor area.

See the “Tips” section further below for more information about using this feature.

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

Notes:

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

To create headings, highlight your text and select a heading option from the drop-down menu (e.g. Heading 5) …

Heading Style Formats Pull-Down Menu

(Heading Options)

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

23. Justify. Clicking this button justifies a paragraph where your mouse cursor has been placed or text highlighted. Justification can only be applied to a block of text.

24. Select Text Color. Highlight an area of text and select a color from the options in the pull menu to change the color of your content …

Color Palette

(Text Color Palette)

Useful Information

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

Custom Text Colors

(Custom Text Color Palette)

You will then have access to wide 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 color slider to add a new custom color.

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

HEX Colors

(HEX Color Codes [Web-Safe])

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 below for more information on using this functionality.

26. Remove formatting. If you find unnecessary formatting 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 page formatting.

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

Add special characters to your content

(Insert symbols and special characters into your content)

For more information about using custom characters in WordPress, refer to this tutorial:

28. Decrease Indent – Clicking this menu item moves paragraphs to the left.

29. Indent – Clicking this menu item increases indentation.

Here’s a line of indented text.

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

30. Undo. Clicking this button undoes your previous actions. Select this if you have accidentally deleted a section of text or formatted content incorrectly and need to revert to a previous state.

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

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

Important

Installing new WordPress plugins can sometimes add new functions to your editor menu toolbar …

Plugins can add new items to your content editor

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

Tips And Useful Info

Tip #1 - Keyboard Shortcuts For Power Users

In addition to using the buttons on the toolbar, you can use the key combinations below as you type. This can help you work faster …

WordPress Content Editor Keyboard Shortcuts

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

Formatting Shortcuts

(WordPress 4.5 – 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 …

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

MS Word and some other word processors (e.g. Google Docs) store 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 processing applications into pre-WP 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.)

As WordPress continually improves its software, more of the work that goes into integrating different platforms and making things work seamlessly together will happen 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 content editor using the plain text mode button and format everything afterwards.

Click on the Paste as text toolbar button …

WordPress Visual Editor - Paste as text button

(Paste as text menu button)

Toggle on the Paste as text menu button and the following message appears, informing you 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 notice

(Paste as Text feature message)

Tip #3 – Removing Formatting From Text

You can remove formatting from pasted content inside the WordPress editor.

Before formatting removal …

Before removing formatting

After …

After removing formatting

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

Sometimes, you can’t tell if content sourced and pasted from an external 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 HTML code …

Content pasted from an external website can contain incompatible CSS formatting

(… can include hidden styles!)

If the content was sourced from your own website, everything may look normal 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, it’s a good idea to remove the formatting from pasted content, especially if your content has been sourced from other websites or blogs.

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

You can paste pre-formatted content into the visual editor

(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 button)

All formatting (e.g. bold, italics, etc.) has been removed …

Removing formatting styles from your content

(Content formatting removal)

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

Practical Tip

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

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

Copying formatted text

(Copying formatted text in WordPress)

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

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

A line return is created by clicking the “Enter” key after typing text …

Line spacing - default

(Line spaces)

When you press the “Enter” key to add spacing between lines of text, WordPress adds a normal 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 …

Line spacing - break returns

(Line break returns)

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

Tip #5 – Resizing The WordPress Content Editor Box

By default, WordPress has the Full Height Editor feature enabled, providing users with a responsive and self-adjusting editor …

WordPress comes with a built-in responsive editor

(WordPress includes a built-in responsive content editor)

The quick way to check if the Full Height Editor feature is turned on or not, is to look at the  following tell-tale signs:

  • The Full Height Editor function is turned on if the Distraction-Free Writing Mode button is visible,
  • The Full Height Editor function is enabled if the editor scrollbar does not appear in the visual editor tab when your content exceeds the size of the text box …

How to tell if the Full Height Editor feature is enabled

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

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

Your content editor area automatically expands as you type

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

If, however, the Full Height Editor function is inactive, you will see the content editor scrollbar once your text exceeds the visible space inside your editor …

Full Height Editor function disabled

(Full Height Editor feature disabled)

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

Full Height Editor function disabled

(Full Height Editor feature disabled)

If the Full Height Editor function has been turned off, you can expand your text box using the text box resizing feature …

Text Box Resizing Tool

(Text Box Resizing Feature)

Inside your Post or Page screens, click and drag the bottom right-hand corner of your editor to resize it …

Drag and drop to resize the editor

(Resize the content editor using drag and drop)

Your editor will be resized …

Resized content editor

(Resized content editor)

Tip #6 – Distraction-Free Writing Functionality – 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 - Text Editor

(Distraction-Free Writing Mode – WordPress Text Editor)

Practical Tip

You can try eliminating distractions by combining the Distraction-Free writing tool and the built-in Full Screen function of browsers like Google Chrome & Firefox …

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

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

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

To switch on Full Screen in your Firefox or Chrome browser, refer to the image below …

Google Chrome & Firefox - Full Screen Option

(Full Screen Function – Google Chrome & Firefox)

Important Info

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click on the Screen Options tab (found in the top right-hand section 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 …

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

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

Tip #7 – Converting 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) screen …

Formatting Options - Writing Settings

(Formatting Options – Writing Settings)

🙂

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

The WordPress Editor - A Basic Guide To Text Formatting In WordPress For Beginners

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

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

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

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

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

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

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. 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.