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 Simple Guide To Formatting Content In WordPress For Beginners - Using 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 publishing and formatting content online easy by providing users with a fully-featured visual editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded images quickly.

In this step-by-step tutorial, you will learn how to use the WordPress Content Editor.

A Basic Guide To WordPress Content Formatting For Beginners

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

WordPress content editor

(WordPress visual content editor)

WordPress Visual Editor Menu Toolbar Explained

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

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu Buttons)

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

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

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

3. Media Manager – Click the Add Media button to 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 to access the WYSIWYG (What You See Is What You Get) content editor.

5. Text Editor Tab – Switching between the editor tabs lets you add content in the WYSIWYG mode and then make changes to the underlying code. When entering content in the text tab, line breaks get converted into paragraphs automatically …

Text [HTML] Editor Mode

(WP Text Editor)

6. Bold – Highlight words in your text and click this button to add bold formatting.

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

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

9. Unordered list – Choose this toolbar item to turn your selected content into an unordered list like the example below:

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

10. Ordered list – Click this toolbar item to create an ordered list, e.g.:

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

11. Block Quote. Use this functionality to create a blockquote. Just select the content section you would like highlighted as a blockquote and click the 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 standard formatting.

12. Dividing Line. Click this menu button to add a horizontal line to your content …

Add horizontal lines to your content

(Add a line to your content)

13, 14 & 15. Left, Center and Right align buttons – Select 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 the alignment command.

16. Insert/Edit Link. Click this button to paste a hyperlink into your content (See “Adding Hyperlinks To Your WordPress Content” tutorial to learn more about creating internal content links).

17. Unlink. Highlight the text you want unlinked and click this button to remove the hyperlink.

18. ’Read More’ Tag. Click this item to insert a “read more” link into the content wherever you have placed your cursor. Content added to a post prior to inserting this tag will display when published, but anything added to the post after this tag only displays to visitors once they click the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Info

The ‘Read More’ tag will not work on WordPress Pages. It only works on the page displaying your latest blog post entries (i.e. your 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).

Show/Hide Kitchen Sink

(Display/Hide Kitchen Sink)

20. Distraction-Free Writing. Click this menu button to toggle between distraction-free writing functionality & 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 Functionality

(Distraction-Free Writing Mode Toggle Button)

With distraction-free writing mode turned on, your surrounding page elements return to the screen as soon as the cursor is moved outside the boundaries of the content editor.

Refer to the “Tips” section further below for more details about using this item.

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

Notes:

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

To create a heading, highlight your text and select a style from the pull menu (e.g. Heading 6) …

Heading Styles

(Styles)

22. Underline. Select this toolbar item to underline the words.

23. Justify. Click this button to justify your content. Justification adjusts the spacing in your text to square up every line of text so that the line ends are not “ragged” (as when text is aligned left by default).

24. Text Color. Highlight your text and choose a color from the palette in the pull menu to change text color …

Color Palette

(Text Color)

Useful Information

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

Custom Color Palette

(Custom Text Color Palette)

This gives you access to an almost limitless choice 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 color slider to add 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 web browsers) …

Common HEX Color Codes

(Common HEX Color Codes)

25. Paste as 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 Mode

(Plain Text On/Off Mode)

See the “Tips” section in this tutorial for more information about using this function.

26. Remove formatting. Use this feature to clear all formatting if you find unwanted formatting codes in your text (or if your content isn’t displaying as you intended after publishing).

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

Add symbols and special characters to your content

(Add symbols and custom characters to your content)

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

28. Outdent – Click this item to outdent text.

29. Increase Indent – Click this button to indent one or more lines of text to the right.

Here’s a sample of indented text.

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

30. Undo. Click this button to undo your previous actions. Select this if you have accidentally deleted a section of text or formatted text incorrectly and you would like to restore things as they were previously.

31. Redo. Clicking this button recovers any changes or deletions that you have made.

32. Keyboard Shortcuts. Clicking this button shows you the Keyboard Shortcuts screen. This is covered in more detail in the Tips section below.

Idea

Depending on the plugins you have installed on your website or blog, you may see new menu items showing in the WordPress toolbar …

Plugins can add new items to your WordPress menu toolbar

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

Useful Tips And Additional Info

Tip #1 - Using Keyboard Shortcuts

As well as using the buttons in your menu, you can use the key combinations below as you type. This will help to add and format your content faster …

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

WP v. 4.5 - Formatting Shortcuts

(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

(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 From MS Word

MS Word and some other word processing applications (e.g. Open Office) store 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 resulting in formatting errors …

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

(Pasting content from word processing applications into pre-WP 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” will take place behind the scenes, freeing more non-tech-savvy users to enjoy the benefits of their WordPress sites.

Versions newer than WP 3.9 now offer built-in support for pasting 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 it later.

Click on the Paste as text menu toolbar button …

Paste as text toolbar button

(WordPress Visual Editor – Paste as text menu button)

When you toggle on the Paste as text feature, the following message comes up …

Paste as Text feature dialog box

(Paste as Text notice)

Tip #3 – Removing Formatting From Text

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

Before …

Before formatting removal

After …

After removing formatting

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

Sometimes, you cannot tell that content sourced and pasted from an external website or blog contains formatting specific to that website …

Content pasted from an external website ...

(Content pasted directly from an external website …)

… until you click on the Text tab and view its underlying code …

Content pasted directly from an external website may include incompatible CSS styling

(… may contain unwanted styles!)

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 your color scheme) and discover that some of your earlier content elements have been formatted differently.

For this reason, we recommend removing the formatting from pasted content, especially from content sourced from other WordPress sites.

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 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 (such as bold, italics, etc.) is now removed …

Remove formatted text from text

(Removing text formatting)

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

Tip

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

Before using the Remove formatting feature, switch to the Text editor tab, then select and copy all of your text to your clipboard …

Copying formatted text in WordPress

(Copying formatted text)

Paste the content from your clipboard into a new plain text file, then go back 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 Line Break Spacing To Content

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

Adding line spaces to content

(Line spaces)

When you press 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

(Adding single line spaces to content)

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

Tip #5 – How To Resize The WordPress Visual Text Editor Box

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

WordPress has a responsive content editor

(WordPress includes a responsive editor)

The fastest way to determine if the Full Height Editor function is turned on or not, is to look at one or more of the  following:

  • If the Distraction-Free Writing icon can be seen, then the Full Height Editor feature is enabled,
  • The Full Height Editor function has been activated if you cannot see the editor scrollbar

How to tell if the Full Height Editor function is turned on

(How to tell if the Full Height Editor feature is turned on)

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

Your WordPress content box should automatically resize as you type

(Your WordPress content area should automatically resize as you type)

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

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor function disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing button displayed in the Visual Editor tab …

Full Height Editor feature disabled

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

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

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

Drag and drop to resize the content editor

(Drag and drop to resize the text box)

The editor will enlarge to the new size …

Resized WordPress editor

(Resized WordPress editor)

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

Distraction-Free Writing mode 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 Writing Mode - Text Editor

(Distraction-Free Writing Mode – Text Editor)

Useful Tip

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

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

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

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

To enable the Full Screen option in your web browser, refer to the screenshots below …

Full Screen Function - Google Chrome & Firefox Web Browsers

(Full Screen Feature – Google Chrome & Firefox)

Important

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click on the Screen Options tab (found in the top right-hand corner of your WP administration screen) …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, click Enable the full-height editor and distraction free functionality

Enable full-height editor and distraction-free functionality in your Screen Options tab

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

Tip #7 – How To Convert Emoticons

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

Writing Settings - Formatting

(WordPress Writing Settings – Formatting)

🙂

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

The WordPress Visual Editor - A Basic Guide To Text Formatting In WordPress For Beginners

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

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

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

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 SEOWordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO

Recommended Video Courses For WordPress Users

How To Create Engaging PresentationsHow To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

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

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. 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.