How To Use The WordPress Visual 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 WordPress Visual EditorWordPress makes publishing and formatting content online easy by providing users with a rich built-in visual editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded media quickly.

In this tutorial, we show you how to use the WordPress Visual Content Editor – what the menu toolbar buttons do, how to format your content, and more!

A Simple Guide To Content Formatting For Beginners

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

WordPress content editor

(WordPress visual content editor)

WordPress Visual Editor Menu Explained

If you have used a text editor like MS Word, then the WordPress visual editor interface will probably feel familiar to you …

WordPress Visual Editor Menu

(WordPress Visual Editor Menu Buttons)

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

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

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

3. Add Media – Click this button to upload, manage and insert media into your post or page from your own hard drive, an external storage location, or from your site’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 – Clicking this tab lets you access the HTML code behind your content. When adding content to the text tab, line breaks will be converted to paragraphs automatically …

Text [HTML] Editor Tab

(Text [HTML] Editor Mode)

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

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

8. Strikethrough – Formats highlighted text with strikethrough.

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

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

10. Ordered list – This button turns your selected 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 menu item to create a block quote. Simply select the content you would like to show up 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 return your text to standard format.

12. Horizontal Line. Select this functionality to insert a dividing line into your content …

Insert horizontal lines into your content

(Add dividing lines to your content)

13, 14 & 15. Alignment buttons – Select these buttons to align your content …

13. Align Left

14. Align Center

15. Align Right

Press Enter and leave a line of space to end the alignment command.

16. Insert/Edit Link. Click this button to add a hyperlink to your content (See “How To Create Links In WordPress” 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. ’Read More’ Tag. This feature inserts a “read more” link into your content wherever you have placed the cursor. Text added to a post prior to the insertion of this tag displays when published, but anything added to the post after this tag only appears to visitors once they click the “read more” link …

'Read More' Tag

(’Read More’ Tag)

Important

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

19. Display/Hide Enhanced Menu. 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 Mode

(Enhanced Menu Toolbar)

20. Distraction-Free Writing. Click this item to toggle between distraction-free writing screen & normal mode. This is useful for checking the placement of items on the page and for working on your content without the distraction of other page elements …

Distraction-Free Writing Functionality Button

(Distraction-Free Writing Mode Toggle Button)

With distraction-free writing mode toggled on, the surrounding page elements return as soon as 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 functionality.

21. Format Style. Use this feature to add styling to your text.

Notes:

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

To create headings, highlight your text and choose a format style from the drop menu (e.g. Heading 2) …

Heading Style Options

(Heading Styles Drop-Down 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 text.

24. Text Color. Highlight your text and select a color from the pull-down palette to edit your text color …

Color Palette

(Text Color Palette)

Useful Info

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

Select Custom Text 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, 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 slider to add a custom color.

The example below shows HEX color codes for 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 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 Mode)

See the “Tips” section below for useful tips on using this item.

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

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

Special characters

(Special character options)

For more information on adding symbols to WordPress, visit this tutorial: Adding Symbols And Special Characters To WordPress Posts And Pages

28. Decrease Indent – Click this menu item to outdent text.

29. Indent – Click this menu item to indent a section of text.

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

31. Redo. Click this button to restore any changes or deletions that you have made.

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

Idea

Installing different WordPress plugins can sometimes add new menu toolbar options to the WordPress editor …

Plugins can add new items to the editor

(Plugins can add new items to your WordPress 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 & Additional Info

Tip #1 - Keyboard Shortcuts For Power Users

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

WordPress Content Editor - Power User Shortcuts

(Content Editor Keyboard Shortcuts)

Additional Formatting Shortcuts

Prior to the release of version 4.5, WordPress introduced formatting shortcuts for lists and headings. In WP 4.5 you can now also use formatting shortcuts for horizontal lines and code …

Formatting Shortcuts

(Formatting Shortcuts)

Add 3 horizontal dashes to create 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)

help To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

redarrow How To Enhance The WordPress Visual Editor

Tip #2 – Pasting Content Into WordPress From MS Word

Microsoft Word and some other word processors store 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 unnecessary HTML code into your content that can result in formatting errors …

Pasting content from word processing applications into pre-WP 3.9 versions can add unwanted formatting to your content.

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

The above is a great example of how WordPress continues to improve its software, so that more of the “magic” required to integrate content from different platforms will take place 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 in using the Paste as text button and format everything later.

Click on the Paste as text button …

WordPress Editor - Paste as text button

(WordPress Visual Editor – Paste as text toolbar button)

Turning on the Paste as text function, brings up the following message …

Paste as Text notification

(Paste as Text popup message)

Tip #3 – Clear Formatting Menu Toolbar Button

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

Before formatting removal …

Before removing formatting

After …

After formatting removal

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

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

Content pasted directly from external websites ...

(Content pasted directly from an external website …)

… until you view the HTML …

Content pasted directly from external websites may include hidden formatting

(… may include unwanted formatting!)

If you’ve copied the content from your own 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 elements are formatted differently.

For this reason, we recommend clearing the formatting from pasted content, especially if your content has been copied from other sites.

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

Paste pre-formatted content into the WordPress 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 button

(Clear formatting toolbar button)

All formatting (such as bold, italicized text, colors, etc.) is now removed …

Remove formatted text from your text

(Formatting removal)

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

Useful Tip

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

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

Copying formatted text

(Copying formatted text to the clipboard)

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

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

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

Line spacing - default

(Line spaces)

When you hit the “Enter” key to start a new line, WordPress adds a regular paragraph ending tag (</p>) to the content’s HTML. 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 block of 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 – Resizing The WordPress Content Editor

By default, all newer versions of WordPress have the Full Height Editor function turned on, providing users with a responsive and auto-adjustable content editor …

WordPress includes a built-in responsive content editor

(WordPress comes with a responsive editor)

An easy way to determine whether the Full Height Editor feature is enabled or not, is to look at either of the  following tell-tale signs:

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

How to tell if the Full Height Editor function is enabled

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

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

The WordPress content editor area should automatically expand as you type

(Your content box should automatically resize as you type)

If for any reason the Full Height Editor function has been deactivated, you will see the content editor scrollbar once your typing exceeds the text editor area …

Full Height Editor function disabled - scrollbar visible

(Full Height Editor feature disabled – scrollbar visible)

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

Full Height Editor function disabled

(Full Height Editor feature disabled – Distraction-Free Writing Mode menu item hidden)

If the Full Height Editor feature has been deactivated, you can expand 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)

Just click and drag the box to resize your editor …

Resize your content editor using drag and drop

(Resize the content editor using drag and drop)

The text box will be resized …

Resized WordPress editor

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Functionality

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

(Distraction-Free Writing Mode – WordPress Text Editor)

Practical Tip

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

With Distraction-Free Writing mode switched on and the Full-Screen option of your web browser enabled, the current page completely fills the screen, leaving you free to focus only on your writing.

To enable the Full-Screen feature in your web browser, go to your browser settings menu and click on the buttons shown below …

Google Chrome & Firefox Browsers - Full Screen Feature

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

Idea

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

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

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

Formatting Options: Convert Emoticons - Writing Settings

(WordPress Writing Settings – Formatting)

🙂

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

How To Use The WP Content Editor - A Simple Guide To WordPress Content Formatting

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

Disclaimer: This site has no association with WordPress or any products mentioned on this website. We may receive affiliate commissions or financial benefits from sales of products mentioned on our site. All images and information sourced from product websites remain the copyright of their respective owners and are used only for training and illustrative purposes.

***

Did you find this post useful? If so, please use the social buttons below to share this information with other new blog owners.

Author: Martin Aranovitch

WPCompendium.org provides hundreds of FREE WordPress tutorials for beginners. Our detailed step-by-step tutorials will save you money and teach you how to start, manage, and grow a website or blog using WordPress that puts you in complete control and delivers results with no coding skills required!