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 WordPress Visual Editor - A Basic Guide To Formatting Text In WordPressWordPress makes it easy to publish and format content online by providing users with a rich editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

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

A Basic Guide To WordPress Content Formatting For Beginners

WordPress comes with a feature-rich semi-WYSIWYG (What You See Is What You Get) editor that allows you to add and format text, create and edit hyperlinks, add images and media to posts and pages, and much more, just by clicking a few buttons …

WordPress editor

(WordPress content editor)

WordPress Visual Editor Buttons Explained

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

WordPress Visual Editor Buttons

(WordPress Visual Editor Buttons)

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

1. Post Title Field – Enter your Post title here.

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

3. Add Media – Click the Add Media button to upload, manage and insert pictures, videos, audio, etc. into your post from your hard drive, an external URL, or from your site’s media library.

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

5. Text (HTML) Tab – The Text tab allows you to enter HTML along with your post text. When entering content in the text tab, line breaks will be converted to paragraphs automatically …

Text Editor

(Text [HTML] Editor Mode)

6. Bold – Highlight the words your want to make bold and click this button.

7. Italics – Select this feature to make your words italicized.

8. Strikethrough – Formats your highlighted text with strikethrough.

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

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

10. Ordered list – Use this button 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. Blockquote. Select this menu item to create a block quote. Select the text you would like displayed 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 end the command and return your text to normal formatting.

12. Horizontal Line. Click this item to add horizontal lines to your content …

Horizontal line icon

(Insert a line into your content)

13, 14 & 15. Left, Center and Right align buttons – Use these buttons to left, center and right align your text and page 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 insert a hyperlink into your content (See “How To Add HTML Links In Your WordPress Content” tutorial for useful tips on creating internal content links).

17. Unlink. Select the text you want to unlink and click this button to delete the hyperlink.

18. Insert Read More Tag. This feature inserts a “read more” link 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 only displays to site visitors once they click on the “read more” link …

'Read More' Tag

(Insert ‘Read More’ Tag)

Useful Information

The ‘Read More’ tag won’t work on WordPress Pages. It is only used on the page displaying your latest blog post entries (i.e. your Blog Page).

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

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

(Distraction-Free Writing Mode Toggle Button)

With distraction-free writing functionality toggled on, the surrounding page elements return to the screen when you move your mouse cursor outside the boundaries of the content editor.

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

21. Format Style. Use this feature to format your text.

Notes:

  • The style pulldown menu may include various heading formats and other pre-defined styles built into your WordPress theme.
  • When you create a new post and start typing into the content box, your text is formatted using the default “Paragraph” style.
  • Modifying content formatting styles typically require having knowledge of how to edit CSS (Cascading Style Sheets).

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

Heading Formats

(Heading Options Dropdown Menu)

22. Underline. Select words and click this button to add underline formatting.

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

24. Text Color. Highlight a section of text and select a color from the pulldown menu options to edit text color …

Text Color Palette

(Color Palette)

Idea

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

Custom Text Color Palette

(Custom Color Palette)

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

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

HEX Colors [Web-Safe]

(HEX Colors [Web-Safe])

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

See the “Tips” section in this tutorial for more information on using this functionality.

26. Clear formatting. If you notice unwanted 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 formatting on your page.

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

Add symbols or special characters to your content

(Insert symbols or special characters into your content)

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

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

29. Increase Indent – Click this item to indent paragraphs.

Here’s 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 actions. Use this if you accidentally delete a section of text, or format content incorrectly and need to restore what you previously had.

31. Redo. Clicking this button reinstates 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 below.

Useful Information

Plugins can add new features to your menu toolbar …

Plugins can add new items to your WordPress content editor

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

Useful Tips & Information

Tip #1 - Keyboard Shortcuts For Power Users

In addition to using the buttons in the menu, you can use the power key combinations below as you type. This will help you get work done faster …

Content Editor - Keyboard Shortcuts

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

WordPress v. 4.5 - Formatting Shortcuts

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

(Formatting Shortcuts – Backticks)

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

WP v. 4.5 - Formatting Shortcuts

(WP v. 4.5 – 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 processing applications 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 introduce messy 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 processing applications into pre-WP 3.9 versions adds unwanted formatting to your content.)

As WordPress continues to improve, more of the work required to integrate different platforms and make things work together will happen behind the scenes, freeing up more non-technical minded users to enjoy the benefits of using 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 in using the plain text mode button and format everything later.

Click on the Paste as text menu button …

Paste as text menu toolbar button

(WordPress Editor – Paste as text toolbar button)

Toggle on the Paste as text menu button and the following notification displays …

Paste as Text feature message

(Paste as Text feature message window)

Tip #3 – Clear Formatting Button

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

Before …

Before formatting removal

After …

After formatting removal

This function can be useful if, for example, you have pasted content from another website that contains CSS styling formatting.

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

Content pasted from an external website ...

(Content pasted from an external website …)

… until you click on the Text tab and view the HTML …

Content pasted from external websites may include hidden CSS styling

(… can include incompatible styles!)

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 your color scheme) and 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 from content sourced from other websites or blogs.

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

Paste formatted content into the WordPress visual editor

(Paste pre-formatted content into the visual editor)

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

WordPress Visual Editor - Clear formatting menu button

(WordPress Visual Editor – Clear formatting menu toolbar button)

All formatting (such as bold, italicized text, colors, etc.) has been removed …

Remove formatted text from your content

(Removing formatting styles from content)

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

Useful Tip

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

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

Copying formatted text in WordPress

(Copying formatted text in WordPress)

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

Tip #4 – Adding Single Line Spacing To Text

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

Line spacing - default

(Default line spacing)

When you press the “Enter” key to add spacing between lines of text, WordPress adds a normal paragraph ending tag (</p>) behind the scenes. To insert a line break tag (<br />) and create single line returns, use both the “shift” and “enter” keys …

Line break returns

(Line spacing – break returns)

Breaks allow the formatting of your text to be carried over. This is useful if you want to add a line break to bulleted sections or keep blocks of text together in the same paragraph for styling purposes.

Tip #5 – Resizing The WordPress Editor Box

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

WordPress comes with a responsive content editor

(WordPress comes with a responsive editor)

You can tell whether the Full Height Editor function is enabled or not, by looking at one or more of the  following:

  • The Full Height Editor function is turned on if you can see the Distraction-Free Writing Mode icon,
  • The Full Height Editor function is turned on if you cannot see the content editor scrollbar

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

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

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

Your WordPress content editor area automatically expands as you type

(The WordPress content editor area should automatically resize as you type)

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

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled)

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

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

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

If your Full Height Editor function is disabled, you can adjust the size your text box using the text box resizing feature …

Text Box Resizing Feature

(Text Box Resizing Feature)

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

Drag and drop to resize your text box

(Drag and drop to resize your editor)

Your content editor will be resized …

Resized editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Mode

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

(Distraction-Free Mode – Text Editor)

Practical Tip

To completely eliminate all writing distractions try combining Distraction-Free Writing mode with the built-in 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 – WordPress Only vs WordPress & Full Screen Web Browser)

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

To activate Full Screen in Firefox or Google Chrome, refer to the picture below …

Full Screen Function - Google Chrome & Firefox Web Browsers

(Google Chrome & Firefox – Full Screen Function)

Important

To enable either the Full Height Editor or Distraction-Free Writing Mode feature, click the Screen Options tab in the top right-hand section of your WordPress administration screen …

Screen Options Tab

(Screen Options Tab)

In the Additional settings section, tick Enable the full-height editor and distraction free functionality

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

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

Tip #7 – How To Convert Emoticons

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

Formatting - WordPress Writing Settings

(Writing Settings – Formatting)

🙂

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

A Basic Guide To Formatting Text In WordPress For Beginners

***

"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

***

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

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

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

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