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.

The WP Content 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 it easy to publish and format content online by providing users with a rich built-in content 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, we show you how to use the WordPress Visual Content Editor – what the menu buttons do, how to format content, and more!

A Basic Guide To Content Formatting For Beginners

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

WordPress editor

(WordPress visual content editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

If you have used a text editor like Microsoft Word, then the WordPress visual editing interface should feel familiar to you …

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu Items)

Here is a brief description of each of the visual editor items shown in the screenshot above:

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

2. Permalink – Click on the Edit button to change your permalink. This is useful if you want to shorten the URL of your post or page.

3. Media Manager – Clicking this button lets you upload, manage and insert media 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 this tab to access the WYSIWYG (What You See Is What You Get) editor.

5. Text (HTML) Editor Tab – Switching between the two editor tabs lets you add content in the WYSIWYG mode and then make changes to the code. When adding content to the text tab, WordPress converts line breaks into paragraphs automatically …

Text Editor Tab

(WP Text Editor)

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

7. Italics – Highlight the words your want to add italicized formatting to and click this button.

8. Strikethrough – Add strikethrough formatting to your selected content.

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

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

10. Ordered list – Click this feature to turn your text into an ordered list, e.g.:

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

11. Block Quote. Click this item to create a block quote. Simply select the section of text you would like displayed as a block quote and click the menu button.

To exit the blockquote 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. Divider Line. Select this functionality to insert horizontal lines into your content …

Horizontal line icon

(Add dividers to your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to left, center and right align text …

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. Click this button to paste a hyperlink into your text (See “How To Create HTML Links In WordPress Posts & Pages” tutorial for useful tips on creating internal links).

17. Unlink. Select content you would like unlinked and click this button to remove the hyperlink.

18. Read More Tag. Clicking this icon will insert 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 anything added to the post after this tag only appears to site visitors once they click the “read more” link …

'Read More' Tag

(’Read More’ Tag)

Important Info

The ‘Read More’ tag won’t work on WordPress Pages. It only works on the page that shows your most recent blog post entries (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).

Enhanced Menu Mode

(Show/Hide Kitchen Sink)

20. Distraction-Free Writing Functionality. Click this item to toggle between distraction-free writing mode & normal writing mode. This is handy 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 Toggle Button)

When distraction-free writing functionality is turned on, your surrounding page elements return to the screen when the cursor is moved outside the content editor area.

See the “Tips” section in this tutorial for more tips about using this functionality.

21. Format Style. Use this feature to change the formatting of selected text.

Notes:

  • Depending on the WordPress theme installed on your site, the style pulldown menu may include default heading formats and other pre-defined styles.
  • When you create a new post or page and start entering text into the content editor, the text will typically be formatted using the “Paragraph” style by default.
  • Modifying content 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 format style from the pulldown menu (e.g. Heading 1) …

Heading Formats

(Styles Pull Menu)

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

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

24. Select Text Color. Highlight an area of text and choose a color from the pull menu options to replace your text color …

Color Palette

(Select Text Color)

Idea

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

Custom Colors

(Custom Color Palette)

This gives you access to an almost limitless palette of colors. If you are familiar with the Hexadecimal (HEX) color system, just 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 custom color.

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

HEX Color Codes [Web-Safe]

(Commonly Used 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)

Refer to the “Tips” section in this tutorial for useful tips about using this function.

26. Clear formatting. Use this feature to clear all page formatting if you spot unwanted formatting codes in your content (or if your content isn’t displaying as you expected after publishing).

27. Insert custom character. Click this button to insert special characters like © ® ™ and many other custom symbols and characters into your content.

Insert special characters into your content

(Special characters)

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

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

29. Increase Indent – Click this button to indent your paragraphs.

This is a line of indented text.

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

30. Undo. Click this button to undo your previous commands. Click 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 recover any changes or deletions that you have made.

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

Idea

Plugins can add extra functions to the WordPress toolbar …

Plugins can add new functions to the content editor

(Plugins can add new buttons to the menu 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 Additional Information

Tip #1 - Keyboard Shortcuts For Power Users

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

WordPress Content Editor Power User 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 WordPress v. 4.5 you can now also use formatting shortcuts for horizontal lines and code …

Formatting Shortcuts

(WordPress 4.5 – Formatting Shortcuts)

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

(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 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 editor will introduce unwanted HTML code into your content resulting in formatting errors …

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

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

As WordPress continues to improve with new releases, more of the technical wizardry required to integrate different platforms and make things work together will take place “magically” behind the scenes, requiring users to become less and less technical-minded.

WordPress now lets you paste 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 button …

WordPress Editor - Paste as text button

(Paste as text toolbar button)

Toggle on the Paste as text menu button and the following reminder pops up …

Paste as Text feature dialog box

(Paste as Text notification)

Tip #3 – Removing Formatting From Text

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

Before …

Before formatting is removed

After …

After formatting removal

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

Sometimes, you cannot tell that content pasted from an external website contains formatting specific to that site …

Content pasted from external websites ...

(Content pasted directly from external websites …)

… until you view its code …

Content pasted directly from external websites can include incompatible formatting

(… may contain hidden CSS styling!)

If you’ve copied content from your own website or blog, things may look normal until you make a change to the styling (e.g. change the color scheme) and some of your old content contain different formatting.

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

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

Paste formatted content into the visual editor

(You can paste content with formatting into the WordPress visual editor)

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

Clear formatting menu toolbar button

(WordPress Editor – Clear formatting menu button)

All your formatting (such as bold, italics, etc.) is now removed …

Remove formatted text from content

(Remove formatted text from content)

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

Practical Tip

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

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

Copying formatted text in WordPress

(Copying formatted text in WordPress)

Paste the content from the clipboard into a new text file, then return to your content 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 – Adding Single Line Returns To Content

As with most applications, a line return is created by clicking the “Enter” key at the end of your paragraph …

Line spaces

(Line spacing – default)

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

Single line spacing

(Line break returns)

Breaks allow the formatting of the paragraph 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 in another text block.

Tip #5 – Resizing The WordPress Content Editor

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

WordPress has a responsive content editor

(WordPress comes with a built-in responsive content editor)

You can quickly confirm whether the Full Height Editor feature is active or not, by looking at either of the  following:

  • If the Distraction-Free Writing button can be seen, then the Full Height Editor function is enabled,
  • The Full Height Editor function is enabled if you cannot see the scrollbar

How to tell if the Full Height Editor function is enabled

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

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

Your content box should automatically expand as you type

(Your WordPress content box automatically expands as you type)

If for any reason the Full Height Editor function is disabled, the editor scrollbar will display once your typing 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 icon the Distraction-Free Writing button will not show up in the Visual Editor tab …

Full Height Editor function disabled - Distraction-Free Writing Mode menu icon hidden

(Full Height Editor feature disabled)

If your Full Height Editor function has been switched off, you can resize your text box using the resizing feature at the bottom right-hand corner of the editor tool …

Text Box Resizing Tool

(Text Box Resizing Tool)

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

Resize your content editor using drag and drop

(Drag and drop to resize the editor)

Your content editor will be resized …

Resized WordPress editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Tool

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

(Distraction-Free Mode – WordPress Text Editor)

Useful Tip

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

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

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

With Distraction-Free writing activated and the Full-Screen option of your browser enabled, the current page completely fills the screen, leaving only the page or post title and content you’re working on visible.

To activate Full-Screen either Firefox or Chrome, go to your browser menu and click on the buttons shown below …

Full Screen Function - Google Chrome & Firefox

(Full-Screen Option – Google Chrome & Firefox Web Browsers)

Important

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab (found in the top right-hand area of your WordPress admin screen) …

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 tab

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

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) area …

Formatting - Writing Settings

(Formatting Options: Convert Emoticons – Writing Settings)

🙂

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

A Beginner's Guide To Text Formatting In WordPress - The WP Editor

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

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

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

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

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

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.