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 EditorWordPress makes publishing and formatting content online easy by providing users with a rich editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded images quickly.

In this comprehensive tutorial, you will learn how to use the WordPress Visual Content Editor.

A Simple Guide To WordPress Text Formatting For Beginners

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

WordPress WYSIWYG editor

(WordPress editor)

WordPress Visual Editor Buttons Explained

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

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu Buttons)

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

1. Title Field – Here’s where you enter your post/page title.

2. Permalink – Click on the “Edit” button to change your permalink. This feature is useful if you want to search optimize the post URL.

3. Add Media – Clicking the Add Media button lets you upload, manage and insert media into your post/page from your computer, an external URL, or from your website’s media library.

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

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

Text [HTML] Editor

(Text Editor)

6. Bold – Select text and click this function to make the words bold.

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

8. Strikethrough – Formats your selected text with strikethrough.

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

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

10. Ordered list – Click this option to turn your 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. Use this function to create a block quote. Simply select the content section you want to display as a blockquote 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 standard formatting.

12. Divider Line. Select this feature to insert dividing lines into your content …

Horizontal line feature

(Horizontal line function)

13, 14 & 15. Alignment buttons – Click these buttons to align page elements …

13. Align Left

14. Align Center

15. Align Right

Press Enter and leave a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to paste hyperlinks into your text (See “Linking Content In WordPress Posts” tutorial to learn more about creating internal links).

17. Unlink. Select the text you would like to unlink and choose this button to remove the hyperlink.

18. Insert Read More Tag. Click this menu item to insert a “read more” link wherever you have placed the cursor. All text added to a post prior to inserting this tag will display when published, but anything added to the post after this tag will only show to site visitors once they click the “read more” link …

'Read More' Tag

(Insert ‘Read More’ Tag)

Info

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

19. Display/Hide Kitchen Sink. Click this button to toggle the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Enhanced Menu Toolbar

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing Mode Toggle. Click this icon to toggle between distraction-free writing functionality & normal mode. This is a handy feature for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Functionality

(Distraction-Free Writing Mode)

When distraction-free writing mode is toggled on, all page elements return as soon as you move your cursor outside the boundaries of the content editor.

Refer to the “Tips” section in this tutorial for more details about using this function.

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

Notes:

  • The style pull menu may include various heading formats and other pre-defined styles built into your WordPress theme.
  • When you create a new post or page and start entering text into the content editor, your text is formatted using the “Paragraph” style by default.
  • Modifying heading styles generally require having knowledge of CSS (Cascading Style Sheets).

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

Heading Styles Drop Menu

(Heading Styles Pull Menu)

22. Underline. Highlight content 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. Select Text Color. Highlight text and select a color from the dropdown menu options to change text color …

Color Palette

(Select Text Color)

Tip

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

Custom Text Colors

(Custom Colors)

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

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

Common HEX Color Codes [Web-Safe]

(HEX Color Codes [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)

Refer to the “Tips” section in this tutorial for useful details on using this item.

26. Remove formatting. If you spot strange codes in your text (or if your content isn’t displaying as you intended after your post or page has been published), then select all text and click this button to clear all page formatting.

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

Add special characters to your content

(Add symbols or special characters to your content)

For more information on adding symbols to WordPress, visit this tutorial:

28. Decrease Indent – Clicking this menu button removes text indentation.

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

This is a line of indented text.

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

30. Undo. Click this button to undo your previous actions. Use this if you have accidentally deleted content or formatted text incorrectly and you would like to revert to a previous state.

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

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

Tip

Installing new plugins can add new items to the WordPress menu …

Plugins can add extra items to your WordPress editor

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

WordPress Content Editor Tips

Tip #1 - Power User Keyboard Shortcuts

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

WordPress Content Editor Power User Shortcuts

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

WordPress v. 4.5 - Formatting Shortcuts

(WP 4.5 – Formatting Shortcuts)

Add three 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 From MS Word

MS Word and some other content editors 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 introduce unnecessary HTML code into your content resulting in formatting errors …

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

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

This is a great example of how WordPress continually improves its software, so that more of the technical wizardry will take place behind the scenes, freeing more non-tech-savvy users to enjoy the benefits of using their WordPress sites.

Versions newer than WordPress 3.9 now provide 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 in as plain text and format it afterwards.

Click on the Paste as text menu toolbar button …

Paste as text menu toolbar button

(Paste as text button)

Clicking on the Paste as text menu button, brings up the following notification, and lets users know that the feature will remain active until toggled off …

Paste as Text feature notice

(Paste as Text feature message)

Tip #3 – Removing Formatting From Text

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

Before removing formatting …

Before formatting removal

After …

After formatting removal

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

Sometimes, you can’t tell whether or not content sourced and pasted from another website or blog contains formatting specific to that website …

Content pasted directly from an external website ...

(Content pasted from an external website …)

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

Content pasted directly from an external website may contain hidden formatting

(… can include unwanted formatting!)

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

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

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

You can paste content with formatting into the WordPress visual editor

(Paste formatted content into the visual editor)

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

Clear formatting button

(WordPress Editor – Clear formatting toolbar button)

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

Remove formatted text from your text

(Formatting removed)

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

Practical Tip

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

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

Copying formatted text to the clipboard

(Copying formatted text in WordPress)

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

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

Paragraph spaces are created by clicking the “Enter” key after typing text …

Line spaces

(Line spaces)

When you press the “Enter” key to add spacing between lines of text, WordPress adds a regular paragraph ending tag (</p>) to your content’s code. To add a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …

Line break returns

(Line spacing – break returns)

Breaks enable the formatting of your text to continue. This is useful if you want to add a line break to a bulleted section or keep different groups of text together in the same paragraph for styling purposes.

Tip #5 – How To Resize The WordPress Content Editor

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

WordPress has a responsive content editor

(WordPress has a built-in responsive editor)

The fastest way to tell whether the Full Height Editor feature is active or not, is to look at either of the  following:

  • The Full Height Editor feature is enabled if the Distraction-Free Writing Mode icon appears in the visual editor section,
  • The Full Height Editor feature has been activated if you cannot see the editor scrollbar

Tell-tale signs that the Full Height Editor function is turned on

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

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

Your WordPress content box should automatically expand as you type

(Your WordPress content editor area automatically resizes as you type)

If for any reason the Full Height Editor feature is inactive, the editor scrollbar will appear once your text exceeds the size of the text editor area …

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled)

Additionally, you will not see the Distraction-Free Writing menu icon the Distraction-Free Writing Mode button will not display in the Visual Editor …

Full Height Editor feature disabled

(Full Height Editor function 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 your content editor …

Drag and drop to resize the editor

(Drag and drop to resize your content editor)

The editor will enlarge to the new size …

Resized WordPress editor

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Tool

Distraction-Free Writing functionality 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 Mode – WordPress Text Editor)

Practical Tip

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

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

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

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

To use the Full Screen option in Firefox or Chrome, go to your browser menu and click on the buttons shown below …

Google Chrome & Firefox - Full-Screen Option

(Google Chrome & Firefox – Full Screen Function)

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab (located in the top right-hand section of your WP dashboard 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 functionality in your Screen Options tab

(Enable full-height editor and distraction-free features)

Tip #7 – How To Convert Emoticons

One last 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 Options

(Convert Emoticons – Writing Settings)

🙂

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

How To Use The WordPress Editor

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

Disclaimer: This site is not directly associated with WordPress, Automattic, or any products promoted on this site. We may receive affiliate commissions or financial benefits from the sale of services and/or products advertised on our site. All images remain the copyright of their respective owners and comply with all license terms and agreements of use.

***

Did you find this post useful? If so, please consider sharing this page with anyone thinking of starting or growing their business online using the share buttons below.

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 detailed step-by-step tutorials that will teach you how to use WordPress to grow your business online at minimal cost with no coding skills required!

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