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.

The WP 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 content editor that requires no 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 items do, how to format content, and more!

A Beginner’s Guide To Text Formatting In WordPress

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

WordPress WYSIWYG content editor

(WordPress WYSIWYG content editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

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

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu)

Here is a brief description of each of the visual editor items shown in the screenshot above:

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

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

3. Add Media – Clicking this button lets you upload, manage and insert media into your post or page from your computer, an external URL, or from your website’s media library.

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

5. Text (HTML) Editor Tab – The Text tab lets you enter HTML along with your post text. When inserting content into the text tab, WordPress automatically converts line breaks into paragraphs …

Text [HTML] Editor Mode

(Text Editor Tab)

6. Bold – Highlight content and click this button to add bold formatting.

7. Italics – Highlight the words your want to make italicized and click this button.

8. Strikethrough – Formats selected text with strikethrough.

9. Unordered list – Turns your text block into an unordered list like the example below:

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

10. Ordered list – This button changes your selected text block into an ordered list, e.g.:

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

11. Blockquote. Select this menu item to insert a blockquote into your content. Select the section of text you want to show up in the blockquote and click this 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.

12. Divider Line. Click this item to insert a divider into your content …

Insert horizontal lines into your content

(Insert lines into your content)

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

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 insert hyperlinks into your content (See “Adding HTML Hyperlinks Into WordPress Posts” tutorial for useful tips on using the hyperlink function).

17. Unlink. Highlight content you would like to be unlinked and click this button to delete the hyperlink.

18. Read More Tag. This function inserts a “read more” link wherever you have placed your cursor. Text added to a post prior to the insertion of this tag displays when published, but content added to the post after this tag only appears to visitors once they click the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Important Info

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

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

Show/Hide Kitchen Sink

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing. Clicking this menu button will toggle between distraction-free writing functionality & normal writing mode. This is a handy feature for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Functionality Button

(Distraction-Free Writing Mode Toggle Button)

With distraction-free writing functionality toggled on, your surrounding page elements return as soon as you move your cursor outside the boundaries of the content editor.

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

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

Notes:

  • Depending on your WordPress theme, the style menu may include various headings and other pre-defined styles.
  • When you create a new post or page and start entering text into the content editor, your text is formatted using the default “Paragraph” style.
  • Modifying content formatting styles typically require knowing how to edit CSS (Cascading Style Sheets).

To add a heading style to your content, highlight your text and select a heading format from the drop menu (e.g. Heading 1) …

Heading Style Options Pull-Down Menu

(Style Options)

22. Underline. Select content 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 adjusts the spacing in your text to ensure that line ends are not “ragged” (as when text is aligned left by default).

24. Select Text Color. Highlight text and choose a color from the palette in the dropdown menu to edit your text color …

Color Palette

(Text Color Palette)

Important

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

Custom Colors

(Custom Text Color Palette)

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

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

HEX Colors [Web-Safe]

(Common HEX Color Codes)

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 Mode

(Plain Text On/Off Mode)

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

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

27. Insert custom symbols. Click this button to insert symbols like © ® ™ and many other symbols into your content.

Insert symbols or special characters into your content

(Special characters)

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

28. Decrease Indent – Click this button to decrease text indentation.

29. Indent – Clicking this item adds indented text.

This is a sample of indented text.

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

30. Undo. Clicking this button undoes your previous commands. Click this if you have accidentally deleted content or formatted content incorrectly and you would like to revert to a previous state.

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

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

Info

Plugins can add new functions to your content editor …

Plugins can add new features to your toolbar

(Plugins can add extra features to the 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 & Information

Tip #1 - Keyboard Shortcuts

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

Content Editor Power User Shortcuts

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

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

(WP v. 4.5 : Formatting Shortcuts – Backticks)

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

Formatting Shortcuts

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

MS Word and some other word processors store 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 unnecessary code into your content creating 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 processors into pre-WP 3.9 versions adds unwanted formatting to your content.)

This is a great example of how WordPress continues to improve, so that more of the “magic” will happen behind the scenes, freeing greater numbers of non-tech-savvy users to benefit from WordPress.

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 into your content editor as plain text and format it afterwards.

Click on the Paste as text menu button …

Paste as text button

(Paste as text menu toolbar button)

Toggling on the Paste as text function, brings up the following notice …

Paste as Text notice

(Paste as Text feature popup window)

Tip #3 – Clear Formatting Toolbar Button

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

Before …

Before formatting removal

After …

After removing formatting

This feature is useful if, for example, you have pasted content directly from an external website containing CSS styling formatting.

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

Content pasted from external websites ...

(Content pasted directly from an external website …)

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

Content pasted from an external website can include unwanted styles

(… can contain unwanted CSS formatting!)

If you’ve copied content from your own website, things may look normal until you make a change to the styling (e.g. change your color scheme) and some of your old content elements (e.g. links) contain different formatting styles.

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

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

You can paste content with formatting into the visual editor

(You can paste formatted content into the WordPress visual editor)

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

Clear formatting toolbar button

(WordPress Visual Editor – Clear formatting menu button)

All your formatting (such as bold, italics, colors, etc.) will be removed …

Removing text formatting

(Remove formatted text from text)

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

Useful Tip

Here is a useful way to test for content errors suspected of being caused by poor formatting without losing the 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 to the clipboard

(Copying formatted text in WordPress)

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

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 …

Default line spacing

(Line spacing – default)

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

Line spacing - break returns

(Line spacing – break returns)

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

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

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

WordPress includes a built-in responsive editor

(WordPress has a built-in responsive editor)

An easy way to tell if the Full Height Editor function is active or not, is to look at either of the  following tell-tale signs:

  • The Full Height Editor function is turned on if you can see the Distraction-Free Writing icon,
  • If the scrollbar cannot be seen when your typing exceeds the text editor box, then the Full Height Editor function is turned on …

Tell-tale signs that the Full Height Editor feature is turned on

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

With the full height editor feature enabled, the content editor area should automatically expand to accommodate your writing …

Your content area should automatically resize as you type

(Your content editor area automatically resizes as you type)

If the Full Height Editor feature has been deactivated, you will see the content editor scrollbar once your typing exceeds the text box …

Full Height Editor function disabled

(Full Height Editor function disabled)

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

Full Height Editor function disabled - Distraction-Free Writing Mode icon not visible

(Full Height Editor function disabled)

If your Full Height Editor function is inactive, 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)

Just click and drag the text box to resize the content editor …

Drag and drop to resize the content editor

(Drag and drop to resize your text box)

Your content editor will expand to the new size …

Resized WordPress editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Functionality

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

(Distraction-Free Writing Mode – WordPress Text Editor)

Useful Tip

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

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

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

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

To switch on Full-Screen in Firefox or Chrome, refer to the instructions below …

Google Chrome & Firefox - Full Screen Feature

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

Tip

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab (found in the top right-hand area of your WordPress administration 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 features in your Screen Options section

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

Tip #7 – Convert Emoticons

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

Formatting Options: Convert Emoticons - Writing Settings

(Formatting – WordPress Writing Settings)

🙂

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

A Simple Guide To WordPress Text Formatting For Beginners

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com