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.

How To Use The WP Editor - A Basic Guide To Text Formatting In WordPress*** 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 experience of coding to create professional-looking web pages with formatted text and embedded images quickly.

In this step-by-step tutorial, you will learn how to use the WordPress Content Editor – what the menu toolbar buttons do, how to format text, plus great tips and practical information to help you get the most out of the WordPress content editor!

A Basic Guide To Content Formatting In WordPress For Beginners

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

WordPress WYSIWYG content editor

(WordPress editor)

WordPress Visual Editor Menu Explained

If you have used a content editing application like MS Word, then the WordPress visual content editing interface should feel quite familiar to you …

WordPress Visual Editor Menu Buttons

(WordPress Visual Editor Menu Buttons)

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

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

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

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

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

5. Text (HTML) Tab – Switch between the editor tabs to add content in the WYSIWYG mode and make changes to its code. When adding content to the text tab, line breaks get converted to paragraphs automatically …

Text Editor Mode

(Text Editor Tab)

6. Bold – Select content and click this button to add bold formatting.

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

8. Strikethrough – Add strikethrough formatting to your text.

9. Unordered list – Turns your text block into an unordered list like the example below:

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

10. Ordered list – Turns your content 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. Choose this function to insert a block quote into your content. Select the content you want included 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 format.

12. Divider Line. Select this menu item to insert horizontal lines into your content …

Horizontal line menu button

(Insert lines into your content)

13, 14 & 15. Alignment buttons – Use these buttons to left, center and right align text and 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 insert a hyperlink into your text (See “Adding HTML Links In Your WordPress Content” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to delete hyperlinks.

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

Insert 'Read More' Tag

(Insert ‘Read More’ Tag)

Important

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

19. Display/Hide Kitchen Sink. Clicking this button toggles 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 menu button to toggle between distraction-free writing mode & normal screen. This is useful for checking the placement of items on the page and for working on your content free of other page element distractions …

Distraction-Free Writing Mode Toggle

(Distraction-Free Writing Mode Toggle Button)

With distraction-free writing functionality enabled, all page elements return when the cursor is moved outside the boundaries of the content editor.

See the “Tips” section further below for more details about using this functionality.

21. Format Style. This feature lets you add styling to your text.

Notes:

  • Depending on the theme installed on your site, the style dropdown 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 box, your text is formatted using the “Paragraph” style by default.
  • Modifying content formatting styles generally require knowing how to edit CSS (Cascading Style Sheets).

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

Heading Options

(Heading Options Dropdown Menu)

22. Underline. Select your text and click this menu item to underline the words.

23. Justify. Click this button to justify your content. Justification can only be applied to text.

24. Select Text Color. Highlight text and select a color from the dropdown palette to replace text color …

Text Color Palette

(Text Color Palette)

Tip

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

Custom Text Color Palette

(Custom Color Palette)

You will then have access to wide choice of colors. If you are familiar with the Hexadecimal (HEX) color system, you can 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 color slider to select a custom color.

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

Commonly Used HEX Colors [Web-Safe]

(HEX Colors [Web-Safe])

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

(Plain Text On/Off Mode)

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

26. Clear formatting. Use this feature to clear all content formatting if you find unwanted codes in your text (or if your content isn’t displaying as you expected after your post or page has been published).

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

Insert symbols and custom characters into your content

(Insert special characters into your content)

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

28. Decrease Indent – Click this button to remove indented text and return text to left alignment on the page.

29. Indent – Clicking this button indents your paragraphs.

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 commands. Select this if you have accidentally deleted text or formatted text incorrectly and you would like to revert to a previous state.

31. Redo. Click this button to redo a change or deletion 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 further below.

Important Info

Plugins can add new features to your WordPress toolbar …

Plugins can add extra buttons to the WordPress content editor

(Plugins can add extra functions to the 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

Tip #1 - Using Power User Shortcuts

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

Content Editor - Keyboard Shortcuts

(WordPress Content Editor Power User 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 insert a horizontal line and enclose your text in backticks to turn your highlighted text into <code> …

WP 4.5 : Formatting Shortcuts - Backticks

(WordPress 4.5 : Formatting Shortcuts – Backticks)

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

WordPress v. 4.5 - 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

Microsoft Word and some other word processors 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 content editor will add a bunch of unwanted HTML 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 can add unwanted formatting to your content.)

The above is a good example of how WordPress continually improves its software, so that more of the work that goes into making content from different platforms work together can take place behind the scenes, requiring users to become less and less technical-minded.

WordPress now has built-in support for pasting content directly from Microsoft Word and other word processors. If the source content has heavy formatting and is not pasting cleanly, however, then try pasting it into your content editor using the Paste as text button and format it afterwards.

Select the Paste as text menu toolbar button …

Paste as text menu button

(Paste as text menu toolbar button)

Toggling on the Paste as text function, displays the following message …

Paste as Text notification

(Paste as Text popup message)

Tip #3 – Clear Formatting Menu Toolbar Button

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

Before …

Before removing formatting

After …

After removing formatting

This is a useful feature if, for example, you have pasted content directly from another website containing CSS styling formatting.

Sometimes, you can’t tell if content sourced and pasted from another site contains formatting specific to that site …

Content pasted directly from an external website ...

(Content pasted from an external website …)

… until you see the underlying HTML code …

Content pasted from external websites can contain hidden CSS formatting

(… may include hidden formatting!)

If you’ve copied the content from your own site, things may look fine until you make a change to the styling (e.g. change the color scheme) and some of your earlier content have a different CSS style.

For this reason, we recommend clearing the formatting from pasted content, especially if your content has been sourced from other WordPress websites.

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

You can paste content with formatting into the visual editor

(You can paste formatted content into the visual editor)

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

WordPress Editor - Clear formatting button

(Clear formatting menu toolbar button)

All your formatting (e.g. bold, italics, etc.) will be removed …

Removing content formatting

(Remove formatted text from text)

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

Useful Tip

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

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

Copying formatted text in WordPress

(Copying formatted text to the clipboard)

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

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

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

Line spacing - default

(Adding line spaces to content)

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

Adding single line spacing to content

(Adding single line spaces to content)

Breaks allow 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 (without creating a new bullet point) or keep the same style going on another text block.

Tip #5 – How To Resize The WordPress Content Editor

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

WordPress includes a built-in responsive editor

(WordPress includes a responsive content editor)

The simplest way to confirm if the Full Height Editor function is turned on or not, is to look at the  following tell-tale signs:

  • The Full Height Editor feature is turned on if the Distraction-Free Writing Mode icon can be seen,
  • If the scrollbar is not visible when your text exceeds the text editor area, then the Full Height Editor feature is turned on …

How to tell if the Full Height Editor feature is enabled

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

When the full height editor feature is enabled, the content editor area should automatically resize as you type to fit more content …

Your content editor box should automatically resize as you type

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

If for some reason the Full Height Editor function has been switched off, you will see the content editor scrollbar appear once your text exceeds the visible space inside your editor …

Full Height Editor function disabled

(Full Height Editor function disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing icon displayed …

Full Height Editor function disabled - Distraction-Free Writing Mode feature hidden

(Full Height Editor function disabled – Distraction-Free Writing Mode menu button not visible)

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

Text Box Resizing Tool

(Text Box Resizing Feature)

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

Drag and drop to resize your editor

(Drag and drop to resize the text box)

The content editor will enlarge to the new size …

Resized content editor

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Tool

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 Mode - Text Editor

(Distraction-Free Mode – WordPress Text Editor)

Tip

You can try eliminating all writing distractions by combining Distraction-Free Writing mode with 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 Screens – WordPress Only vs WordPress & Full-Screen Browser)

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

To switch on the Full Screen feature either Firefox or Chrome, go to your browser settings and click on the icons shown below …

Full-Screen Feature - Google Chrome & Firefox Browsers

(Google Chrome & Firefox Browsers – Full Screen Feature)

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click the Screen Options tab in the top-right corner of your WP admin screen …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, click Enable the full-height editor and distraction free functionality

Enable full-height editor and distraction-free features

(Enable full-height editor and distraction-free features in your Screen Options tab)

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

Formatting Options: Convert Emoticons - Writing Settings

(Formatting – Writing Settings)

🙂

Congratulations, now you know how to use the WordPress visual editor.

How To Use The WordPress Visual Editor

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

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

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

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

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

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.