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 Beginner's Guide To Content Formatting In WordPress - How To Use The WordPress 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 rich built-in 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 step-by-step tutorial, you will learn how to use the WordPress Visual Content Editor – what the menu toolbar buttons do, how to format your text, and more!

A Basic Guide To Formatting Content In WordPress

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

WordPress content editor

(WordPress visual content editor)

WordPress Visual Editor Menu Buttons Explained

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

WordPress Visual Editor Menu Items

(WordPress Visual Editor Menu)

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

1. Post Title Area – Here’s where you enter the title of your post or page.

2. Permalink – Clicking on the “Edit” button changes your post permalink. This feature is useful if you would like to search optimize your post/page URL.

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

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

5. Text Tab – The Text mode allows you to enter HTML along with your post text. When adding content using the text tab, line breaks will be automatically converted to paragraphs …

WP Text Editor

(Text [HTML] Editor Tab)

6. Bold – Click this feature to add bold formatting to your words.

7. Italics – Select this menu item to add italicized formatting to your words.

8. Strikethrough – Formats highlighted text with strikethrough.

9. Unordered list – Click this item to turn your text into an unordered list, e.g.:

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

10. Ordered list – Turns your selected content 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 button to create a block quote. Select the text you would like 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 block quote button again and this will return your text to standard formatting.

12. Horizontal Line. Select this function to insert a horizontal line into your content …

Horizontal line menu item

(Insert dividers into your content)

13, 14 & 15. Left, Center and Right align 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 your alignment formatting.

16. Insert/Edit Link. Use this button to add hyperlinks to your text (See “How To Easily Create HTML Hyperlinks In Your WordPress Content” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to remove hyperlinks.

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

'Read More' Tag

(’Read More’ Tag)

Info

The ‘Read More’ tag does not work on WordPress Pages. It only works on the page showing your latest posts (i.e. your Blog Page).

19. Enhanced Menu Mode. Click this button to toggle the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Display/Hide Kitchen Sink

(Toolbar Toggle)

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

(Distraction-Free Writing Mode Button)

When distraction-free writing functionality is turned on, all page elements return to the screen when the cursor is moved outside the boundaries of the content editor.

See the “Tips” section in this tutorial for useful information on using this function.

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

Notes:

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

To create headings, highlight your text and select a style option from the drop menu (e.g. Heading 3) …

Heading Style Formats

(Heading Style Formats)

22. Underline. Highlight words and click this button to add underline formatting.

23. Justify. Clicking this button justifies a paragraph where your mouse cursor has been placed or text selected. Justification ”neatens” your paragraphs by ensuring that line ends are not “ragged” (as is the case when text is aligned left by default).

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

Color Palette

(Color Palette)

Info

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

Select Custom Text Colors

(Custom Text Color Palette)

You will then have access to wide 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 codes for commonly used “web safe” colors (i.e. colors that display accurately across most web browsers) …

HEX Color Codes [Web-Safe]

(Common HEX Color Codes [Web-Safe])

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

(Plain Text On/Off)

Refer to the “Tips” section below for more details on using this functionality.

26. Clear formatting. Use this feature to clear all content formatting if you notice unnecessary codes in your text (or if your content isn’t displaying as you expected after your post or page has been published).

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

Insert special characters into your content

(Add special characters and symbols to your content)

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

28. Outdent – Clicking this button decreases indented text.

29. Indent – Click this item to indent (move right) 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. This is useful if you have accidentally deleted a section of text or formatted content incorrectly and you would like to revert to a previous state.

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

32. Keyboard Shortcuts. Clicking this button displays the Keyboard Shortcuts feature. This is covered in more detail in the Tips section further below.

Useful Info

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

Plugins can add new buttons to your WordPress content editor

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

WordPress Content Editor – Tips And Useful Information

Tip #1 - Use Keyboard Shortcuts

In addition to using the buttons on the toolbar menu, you can use the power key combinations below as you type. This will help you work faster …

WordPress Content Editor Power User Shortcuts

(WordPress Content Editor - Power User Keyboard Shortcuts)

Additional Formatting Shortcuts

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

Formatting Shortcuts

(WP 4.5 – Formatting Shortcuts)

Add 3 horizontal dashes to insert 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 …

WordPress v. 4.5 - 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 text editors (e.g. Google Docs) contain formatting 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 unwanted code into your content that can result in formatting errors …

Pasting content from word processing applications 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.)

The above is a great example of how WordPress continually improves its software, so that more of the ”magic” required to integrate content from different platforms now happens behind the scenes, allowing greater numbers of non-technical minded users to benefit from 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 into your content editor using the plain text mode button and format it later.

Select the Paste as text menu button …

Paste as text button

(Paste as text menu toolbar button)

When you toggle on the Paste as text menu button, the following notification comes up …

Paste as Text feature notification

(Paste as Text message)

Tip #3 – Using The Clear Formatting Feature

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

Before …

Before formatting removal

After …

After formatting removal

This is a useful feature if, for example, you have pasted a block of content directly from another website that includes CSS formatting.

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

Content pasted directly from an external website ...

(Content pasted directly from external websites …)

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

Content pasted directly from external websites may include hidden CSS formatting

(… can contain unwanted CSS formatting!)

If the content has been sourced from your own website, things may look fine until you make a change to the styling (e.g. change the color scheme) and some of your old content elements contain incorrect formatting.

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

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

You can paste formatted content into the visual editor

(You can paste content with formatting into the WordPress visual editor)

Next, select everything and select the Clear formatting button …

WordPress Visual Editor - Clear formatting menu button

(Clear formatting button)

All your formatting (such as bold, italicized text, colors, etc.) has been removed …

Removing content formatting

(Text formatting removed)

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

Tip

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

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

Copying formatted text

(Copying formatted text in WordPress)

Open a new plain text file, paste the content from your clipboard into it, then go back to your editor and go through the “remove formatting” process. Now, if something were to go wrong, you have a backup copy of your content with all the original formatting preserved.

Tip #4 – How To Add Single Line Spacing To Text

Line returns are created by clicking the “Enter” key at the end of your text …

Default line spacing

(Line spaces)

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

Adding single line returns to content

(Adding single line spaces to content)

Breaks allow the formatting of your text to continue. This is useful if you want to add line breaks to a bulleted section or keep the same style going on other text blocks.

Tip #5 – How To Resize The WordPress Editor Box

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

WordPress comes with a responsive editor

(WordPress has a built-in responsive content editor)

You can easily confirm whether the Full Height Editor function is enabled or not, by looking at one or more of the  following:

  • The Full Height Editor function is enabled if the Distraction-Free Writing Mode 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 …

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

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

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

Your WordPress content area automatically resizes as you type

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

If, however, the Full Height Editor feature has been switched off, the editor scrollbar will appear once your text exceeds the text editor box …

Full Height Editor function disabled

(Full Height Editor feature disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing menu button displayed …

Full Height Editor feature disabled

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

If the Full Height Editor function is disabled, you can adjust the size your text box using the text box resizing feature …

Text Box Resizing Feature

(Text Box Resizing Tool)

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

Resize the text box using drag and drop

(Resize the text box using drag and drop)

Your editor will enlarge to the new size …

Resized editor

(Resized editor)

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

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

(Distraction-Free Writing Mode – WordPress Text Editor)

Practical Tip

You can eliminate all distractions by combining the Distraction-Free writing tool & the Full-Screen feature of browsers like Google Chrome & Firefox …

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

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

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

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

Full Screen Option - Google Chrome & Firefox

(Google Chrome & Firefox Browsers – Full Screen Option)

Useful Information

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

Screen Options Tab

(Screen Options Tab)

In the Additional settings section, enable the full-height editor and distraction free functionality option …

Screen Options - Enable full-height editor and distraction-free functionality

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

Tip #7 – Convert Emoticons

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

Writing Settings - Formatting Options

(Formatting Options: Convert Emoticons – WordPress Writing Settings)

🙂

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

A Beginner's Guide To WordPress Text Formatting

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

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

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

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

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

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.