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.

A Basic Guide To WordPress Text Formatting - The WP Visual EditorWordPress makes publishing and formatting content online easy by providing users with a rich 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 comprehensive tutorial, we show you how to use the WordPress Visual Editor.

A Simple Guide To WordPress Text Formatting

WordPress comes with a feature-rich WYSIWYG (What You See Is What You Get) content editor that enables you to add, edit and format text, create hyperlinks, add images and media to posts and pages, and so much more, with a few clicks …

WordPress editor

(WordPress editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

If you have used a word processing application like MS Word, then the WordPress content editing interface should seem familiar to you …

WordPress Visual Editor Menu

(WordPress Visual Editor Buttons)

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

1. Title Area – Enter your Post title here.

2. Permalink – Clicking on the Edit button changes your permalink. This feature is useful if you would like to improve your SEO.

3. Media Manager – Clicking this button lets you upload, manage and insert pictures, videos, audio, etc. into your post/page from your computer, an external URL, or from your site’s media library.

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

5. Text (HTML) Tab – Switch between the Visual and Text tabs to add content in the WYSIWYG mode and make changes to the code. When entering content using the text tab, line breaks will be automatically converted to paragraphs …

WordPress Text Editor

(Text Editor Tab)

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

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

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

9. Unordered list – Choose this button to turn your selected text block into an unordered list like the example below:

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

10. Ordered list – Choose this menu button 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. Block Quote. Choose this function to create a block quote. Just select the content section you would like to include in the block quote and click the button.

To exit the quote 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 normal formatting.

12. Divider Line. Select this button to add a divider to your content …

Add horizontal lines to your content

(Horizontal line function)

13, 14 & 15. Alignment buttons – Use 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 content (See “How To Insert HTML Hyperlinks Into WordPress” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to remove hyperlinks.

18. ’Read More’ Tag. Click this button to insert a “read more” tag into your content wherever you have placed your cursor. 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 visitors after they click the “read more” link …

Insert 'Read More' Tag

(Insert ‘Read More’ Tag)

Info

The ‘Read More’ tag does not work on WordPress Pages. It is only used on the page displaying your most recent blog posts (i.e. your Blog Page).

19. Show/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 Mode

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing Mode. Clicking this menu button will toggle between distraction-free writing mode & normal writing screen. This is handy 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 Mode Toggle Button

(Distraction-Free Writing Mode Toggle Button)

With distraction-free writing mode enabled, the page elements return to the screen as soon as the cursor is moved outside of the content editor area.

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

21. Format Style. This feature lets you format your text.

Notes:

  • The style pulldown menu may include various headings and other pre-defined styles built into your WordPress theme.
  • When you create a new post and begin typing into the content box, the text will typically be 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 select a heading style option from the pull-down menu (e.g. Heading 5) …

Styles Pull-Down Menu

(Heading Options)

22. Underline. Select text and click this function to underline your words.

23. Justify. Clicking this button will justify the paragraph where your mouse cursor has been placed or text selected. Justification can only be applied to text.

24. Select Text Color. Highlight an area of text and select a color from the options in the drop-down menu to replace text color …

Text Color Palette

(Select Text Color)

Useful Information

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

Custom Text Color Palette

(Custom Color Palette)

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

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

Common HEX Color Codes [Web-Safe]

(HEX Colors)

25. Paste as Text. Click this button 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 tips about using this feature.

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

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

Insert symbols or special characters into your content

(Insert symbols or custom characters into your content)

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

28. Decrease Indent – Clicking this item decreases indented text.

29. Indent – Clicking this menu item increases indentation.

This is a sample of indented text.

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

30. Undo. Clicking this button undoes your previous commands. Select this if you accidentally delete text, or format text incorrectly and need to revert to a previous state.

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

32. Keyboard Shortcuts. Clicking this button brings up the Keyboard Shortcuts screen. This is covered in more detail in the Tips section further below.

Important

Plugins can add extra options to your editor …

Plugins can add new items to your content editor

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

Tips & Additional Info

Tip #1 - Keyboard Shortcuts For Power Users

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

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

Formatting Shortcuts

(WP version 4.5 – Formatting Shortcuts)

Add three horizontal dashes to create a horizontal line and enclose your text in backticks to turn your highlighted text into <code> …

Formatting Shortcuts - Backticks

(WordPress version 4.5 : Formatting Shortcuts – Backticks)

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

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

Microsoft Word and some other word processors 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 content editor will add a bunch of messy code …

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

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

As WordPress improves with new updates, more of the “magic” will take place behind the scenes, requiring users to become less and less technical-minded.

Versions newer than WordPress 3.9 now offer 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 into your editor using the plain text mode button and format it afterwards.

Click on the Paste as text button …

Paste as text button

(WordPress Editor – Paste as text menu button)

Toggling on the Paste as text feature, brings up the following reminder …

Paste as Text message

(Paste as Text dialog box)

Tip #3 – Removing Formatting From Text

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

Before formatting removal …

Before removing formatting

After …

After removing formatting

This can be a useful function if, for example, you have pasted text directly from an external website containing CSS formatting.

Sometimes, you can’t tell whether or not the content you’ve 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 its underlying code …

Content pasted from an external website may contain unwanted CSS formatting

(… can include unwanted styles!)

If you’ve copied content from your own blog, things may look fine until you make a change to the styling (e.g. change your color scheme) and discover that some of your earlier posts 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 websites.

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

You can paste pre-formatted content into the WordPress visual editor

(Paste content with formatting into the visual editor)

Next, select everything and select the Clear formatting button …

Clear formatting toolbar button

(WordPress Visual Editor – Clear formatting button)

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

Formatting removed

(Removing formatting styles from content)

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

Tip

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

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

Copying formatted text

(Copying formatted text in WordPress)

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

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

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

Default line spacing

(Adding line spaces to content)

When you press the “Enter” key to add spacing between lines of text, 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 allow the formatting of the paragraph to be carried over. This is useful if you want to add a line break to bulleted sections or keep the same style going in a different text block.

Tip #5 – How To Resize The WordPress Visual Editor

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

WordPress has a built-in responsive editor

(WordPress comes with a responsive content editor)

An easy way to determine if the Full Height Editor feature is turned on or not, is to look at either of the  following:

  • If the Distraction-Free Writing button can be seen, then the Full Height Editor function is active,
  • If the content scrollbar is not visible when your content exceeds the text box, then the Full Height Editor function is turned on …

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

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

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

Your content editor box automatically resizes as you type

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

If the Full Height Editor function is disabled, the content editor scrollbar will appear once your typing exceeds the visible space inside the editor …

Full Height Editor function disabled

(Full Height Editor feature disabled – scrollbar visible)

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

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

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

If your Full Height Editor feature is inactive, you can expand your text box using the text box resizing feature …

Text Box Resizing Feature

(Text Box Resizing Feature)

Simply click and drag the box to resize the editor …

Drag and drop to resize your text box

(Drag and drop to resize your text box)

The text box will expand to the new size …

Resized editor

(Resized content editor)

Tip #6 – Distraction-Free Writing Tool – Additional Info

Distraction-Free Writing mode requires that the full-height editor is 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 Writing Mode - Text Editor

(Distraction-Free Mode – Text Editor)

Practical Tip

You can try eliminating writing distractions by combining the Distraction-Free writing tool with the Full Screen feature of web 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 Web Browser)

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

To turn on the Full-Screen feature in Firefox or Google Chrome, open your browser menu and click on the buttons shown below …

Google Chrome & Firefox - Full Screen Function

(Google Chrome & Firefox Browsers – Full-Screen Feature)

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab …

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

(Screen Options – Enable full-height editor and distraction-free functionality)

Tip #7 – Convert Emoticons

One more tip worth mentioning is that you can convert emoticons to graphics by enabling the formatting option inside your Writing Settings (Settings > Writing) section …

WP Writing Settings - Convert Emoticons

(Formatting Options: Convert Emoticons – Writing Settings)

🙂

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

The WP 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 of the products written about on this website. We may derive an affiliate commission of financial benefit from the sale of third-party services and products mentioned on our website. All images and information sourced from product websites are the copyright of their respective owners and comply with all license terms and agreements of use.

***

Did you enjoy this article? Please feel free to share this article 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.