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

In this step-by-step tutorial, we show you how to use the WordPress Content Editor – what the menu toolbar buttons do, how to format content, plus great tips and practical information on using some of the lesser known features of the WordPress editor!

A Simple Guide To Formatting Content In WordPress For Beginners

WordPress comes with an intuitive and easy-to-use semi-WYSIWYG (What You See Is What You Get) visual editor that lets you add, edit and format text, create and edit hyperlinks, add images and media to posts and pages, and more, with a few clicks …

WordPress content editor

(WordPress editor)

WordPress Visual Editor Menu Items Explained

If you have used a text editor like Microsoft Word, then the WordPress content editing interface will feel familiar to you …

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu Toolbar Buttons)

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

1. Title Area – Enter your Post title here.

2. Permalink – Clicking on the Edit button changes your post/page permalink. This function is useful if you want to improve your post/page SEO.

3. Media Manager – Clicking the Add Media button lets you upload, manage and insert media into your post/page from your 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) content editor.

5. Text (HTML) Tab – Click this tab to view the HTML code behind your content. When inserting content using the text tab, WordPress automatically converts line breaks into paragraphs …

Text [HTML] Editor

(WordPress Text Editor Mode)

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

7. Italics – Highlight text and click this function to make your words italicized.

8. Strikethrough – Add strikethrough formatting to your content.

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

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

10. Ordered list – Use this function to create an ordered list like the example below:

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

11. Block Quote. Select this button to insert a blockquote into your content. Select the section of text you want included as a blockquote and click the menu button.

To exit the quote press the “Enter” key to create a line of space and then click the blockquote button again and this will return your text to normal formatting.

12. Divider Line. Click this button to add horizontal lines to your content …

Insert a horizontal line into your content

(Add a horizontal line to your content)

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

13. Align Left

14. Align Center

15. Align Right

Press the “Enter” key and add a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to add a hyperlink to your content (See “Inserting Internal Content Links Into Your WordPress Posts” tutorial to learn more about using the hyperlink function).

17. Unlink. Highlight the text you would like to unlink and choose this button to delete the hyperlink.

18. Read More Tag. This function adds a “read more” tag into your content wherever you have placed your cursor. Content added to a post prior to inserting this tag displays when published, but anything added to the post after this tag will only show to visitors after they click on the “read more” link …

Insert 'Read More' Tag

(Insert ‘Read More’ Tag)

Info

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

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

Toolbar Toggle

(Enhanced Menu Mode)

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

(Distraction-Free Writing Mode Toggle)

With distraction-free writing mode toggled on, all page elements return as soon as the cursor is moved outside the boundaries of the content editor.

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

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

Notes:

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

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

Heading Formats

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

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

Select Text Color

(Select Text Color)

Useful Information

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

Custom Text Color Palette

(Select Custom Text Colors)

You will then have access to an almost limitless choice 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 color slider to add a new custom color.

The example below shows HEX color values for commonly used “web safe” colors (i.e. colors that display accurately across most monitor screens) …

HEX Color Codes [Web-Safe]

(Common HEX Colors)

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

(Plain Text On/Off Mode)

See the “Tips” section further below for more information about using this item.

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

27. Insert special character. Click this button to add special characters like © ® ™ and custom symbols to your content.

Insert symbols or special characters into your content

(Insert symbols and special characters into your content)

For more information about using custom characters in WordPress, visit this tutorial:

28. Decrease Indent – Click this button to remove indented text.

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

Here’s a sample of indented text.

This line has been indented further by pressing the Increase 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 text incorrectly and need to revert to a previous state.

31. Redo. Clicking this button restores a change or deletion 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.

Important Info

After installing certain WordPress plugins you may see extra options added to the WordPress content editor menu …

Plugins can add extra items to the editor

(Plugins can add extra features 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).

Tips & Useful Information

Tip #1 - Using Keyboard Shortcuts

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

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

Formatting Shortcuts

(Formatting Shortcuts)

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

WordPress version 4.5 : Formatting Shortcuts - Backticks

(Formatting Shortcuts – Backticks)

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

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

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

Pasting content from word processors into pre-WordPress 3.9 versions can add unwanted formatting to your content.

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

As WordPress improves with new releases, more of the technical work that goes into integrating different platforms and making things work together will happen behind the scenes, requiring users to become less and less technical-minded.

WordPress now offers 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 into your editor using the Paste as text button and format it later.

Click on the Paste as text toolbar button …

Paste as text menu toolbar button

(Paste as text toolbar button)

When you click on the Paste as text button, the following notification pops up …

Paste as Text message

(Paste as Text feature notification)

Tip #3 – Using The Clear Formatting Feature

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

Before …

Before formatting is removed

After …

After formatting removal

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

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

Content pasted directly from external websites ...

(Content pasted directly from an external website …)

… until you view its HTML code …

Content pasted directly from external websites may contain unwanted CSS formatting

(… may contain unwanted CSS styling!)

If the content was copied from your own website or blog, things may look fine until you make a change to the styling (e.g. change the color scheme) and some of your previous content elements have a different CSS style.

For this reason, it’s a good idea to clear the formatting from pasted content, especially from content sourced from other websites.

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

Paste content with formatting into the WordPress visual editor

(Paste pre-formatted content into the visual editor)

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

WordPress Visual Editor - Clear formatting menu toolbar button

(WordPress Editor – Clear formatting menu button)

All formatting (e.g. bold, italics, etc.) will be removed …

Removing text formatting

(Removing formatting styles from text)

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

Practical Tip

Here is a quick and 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 Clear formatting function, switch to the Text editor tab, then select and copy everything to the clipboard …

Copying formatted text to the clipboard

(Copying formatted text)

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

Tip #4 – Adding Line Break Returns To Text

A line return is created by clicking the “Enter” key at the end of your paragraph …

Line spaces

(Adding line spaces to content)

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

Line break returns

(Single line spacing)

Breaks allow the formatting of your block of text to continue. This is useful if you want to add a line break to a bulleted section (without creating a new bullet point) or keep the same style going on a different text block.

Tip #5 – How To Resize The WordPress Content Editor

By default, the Full Height Editor feature is turned on, providing users with a responsive and auto-adjustable content editor …

WordPress comes with a responsive content editor

(WordPress includes a built-in responsive editor)

An easy way to confirm if the Full Height Editor feature is enabled or not, is to look at one or more of the  following tell-tale signs:

  • The Full Height Editor function is active if you can see the Distraction-Free Writing button,
  • The Full Height Editor function has been activated if you cannot see the editor scrollbar

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

(How to tell if the Full Height Editor function is enabled)

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

Your WordPress content box should automatically expand as you type

(Your content box should automatically expand as you type)

If the Full Height Editor feature is disabled, the content editor scrollbar will display once your text exceeds the text editor area …

Full Height Editor feature disabled

(Full Height Editor feature disabled)

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

Full Height Editor feature disabled - Distraction-Free Writing Mode button hidden

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

If your Full Height Editor feature has been switched off, you can expand 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 post box to resize it …

Resize your text box using drag and drop

(Drag and drop to resize the editor)

Your text box will expand to the new size …

Resized WordPress editor

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Tool

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

Useful Tip

You can try eliminating writing distractions by combining Distraction-Free Writing mode with the Full-Screen function of browsers like Google Chrome & Firefox …

Distraction-Free Writing - 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 feature of your browser enabled, your current page completely fills the screen, leaving you free to focus only on your content without any distracting page elements.

To enable Full-Screen in your browser, open your browser options menu and click on the buttons shown below …

Full Screen Feature - Google Chrome & Firefox Browsers

(Full Screen Feature – Google Chrome & Firefox Browsers)

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, 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 area, 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 features in your Screen Options section)

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) area …

Formatting Options: Convert Emoticons - Writing Settings

(WP Writing Settings – Formatting)

🙂

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

How To Use The WordPress Editor - A Simple Guide To Content 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

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

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!

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.