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 WordPress Editor - A Basic Guide To WordPress Text Formatting*** 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 it easy to publish and format content online 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 images quickly.

In this tutorial, we show you how to use the WordPress Content Editor.

A Simple Guide To Formatting Content In WordPress

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

WordPress content editor

(WordPress editor)

WordPress Visual Editor Buttons Explained

If you have used an editor like Microsoft Word, then the WordPress visual editor interface will probably seem familiar to you …

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu)

Below is a brief description of each of the visual editor menu functions shown in the screenshot above:

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

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

3. Add Media – Click this button to upload, manage and insert media into your post/page from your own hard drive, an external storage location, or from your website’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 – Switching between the two editor tabs lets you add content in the WYSIWYG mode and then make changes to its code. When adding content using the text tab, WordPress converts line breaks into paragraphs automatically …

WP Text [HTML] Editor Tab

(WordPress Text [HTML] Editor)

6. Bold – Select text and click this menu button to make your words bold.

7. Italics – Select the words your want to add italicized formatting to and click this button.

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

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

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

10. Ordered list – Turns your selected text block 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. Click this item to create a block quote. Simply select the text you would like highlighted in the blockquote and click the menu button.

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

12. Dividing Line. Choose this function to insert a divider into your content …

Add a dividing line to your content

(Add lines to your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to align your text and page elements …

13. Align Left

14. Align Center

15. Align Right

Press the “Enter” key and leave a line of space to end the alignment command.

16. Insert/Edit Link. Use this button to paste a hyperlink into your text (See “How To Link Content Internally In WordPress” tutorial for useful tips on using the hyperlink function).

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

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

Insert 'Read More' Tag

(Insert ‘Read More’ Tag)

Useful Info

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

19. Toolbar Toggle. Clicking this button toggles the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Display/Hide Enhanced Menu

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing. Click this menu button to toggle between distraction-free writing screen & normal writing mode. This is handy for checking the placement of items on the page and for working on your content without the distraction of surrounding page elements …

Distraction-Free Writing Mode Toggle

(Distraction-Free Writing Mode Button)

With distraction-free writing functionality enabled, the surrounding page elements return when you move your mouse cursor outside of the content editor box.

Refer to the “Tips” section further below for useful details about using this function.

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

Notes:

  • Depending on your site’s theme, the style menu may include various headings and other pre-defined styles.
  • When you create a new post or page and begin entering text into the content editor, the text is formatted using the default “Paragraph” style.
  • Modifying heading formatting styles typically require having knowledge of CSS (Cascading Style Sheets).

To create a heading, highlight your text and choose a style option from the pull-down menu (e.g. Heading 2) …

Styles Drop-Down Menu

(Style Options Pull-Down Menu)

22. Underline. Select the words your want to underline and click this button.

23. Justify. Click this button to justify your content. Justification can only be applied to text.

24. Select Text Color. Highlight an area of text and select a color from the drop palette to edit text color …

Color Palette

(Color Palette)

Idea

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

Select Custom Text Colors

(Custom Colors)

This gives you access to an almost limitless choice of colors. If you are familiar with the Hexadecimal (HEX) color system, just type in the values for the specific color you want into the # field. Otherwise, click in the color box, enter RGB values or use the color slider to select a new custom color.

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

Commonly Used HEX Colors

(Common HEX Color Codes)

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 Mode

(Plain Text On/Off Mode)

Refer to the “Tips” section in this tutorial for more tips on using this function.

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

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

Add symbols and special characters to your content

(Special character options)

We have written a more detailed tutorial about using special characters in WordPress here:

28. Outdent – Clicking this item removes text indentation.

29. Indent – Click this item to indent paragraphs.

Here’s a line of indented text.

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

30. Undo. Click this button to undo your previous actions. This is useful if you have accidentally deleted text or formatted content incorrectly and you would like to revert to a previous state.

31. Redo. Click this button to restore a change or deletion that you have undone.

32. Keyboard Shortcuts. Click this button to display the Keyboard Shortcuts screen. This is covered in more detail in the Tips section further below.

Important Info

Depending on the WordPress plugins you have installed, you may see new features added to the WordPress content editor menu …

Plugins can add new options to your WordPress editor

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

Content Editor – Tips & Useful Information

Tip #1 - Keyboard Shortcuts For Power Users

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

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

Formatting Shortcuts

(WP v. 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> …

WordPress v. 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 version 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 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 content editor will add a bunch of messy code …

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

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

As WordPress improves its software with each new version release, more of the “magic” will take place invisibly behind the scenes, allowing greater numbers of non-technical minded users to enjoy the benefits of using WordPress.

WordPress now offers built-in support for pasting content directly from Microsoft Word and other word processors. If you find that your content is not pasting cleanly, however, then try pasting it into your editor as plain text and format everything later.

Click on the Paste as text menu button …

WordPress Visual Editor - Paste as text menu button

(Paste as text menu button)

Toggling on the Paste as text menu button, brings up the following window, and lets users know that the feature will remain turned on until toggled off …

Paste as Text notification

(Paste as Text notification)

Tip #3 – Using The Clear Formatting Function

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

Before …

Before removing formatting

After …

After removing formatting

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

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

Content pasted from external websites ...

(Content pasted from an external website …)

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

Content pasted from an external website may contain incompatible CSS formatting

(… may include hidden 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 the color scheme) and discover that some of your old blog 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 or blogs.

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

You can paste content with formatting 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

(Clear formatting toolbar button)

All formatting (e.g. bold, italics, colors, etc.) has been removed …

Removing formatting styles from your content

(Removing text formatting)

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

Practical Tip

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

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

Copying formatted text

(Copying formatted text to the clipboard)

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

Tip #4 – Adding Single Line Spacing To Content

As with most applications, line returns are created by clicking the “Enter” key after typing text …

Default line spacing

(Line spaces)

When you hit the “Enter” key to start a new line, WordPress adds a normal 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

(Adding single line returns to content)

Breaks allow the formatting of your text to be carried over. This is useful if you want to add line breaks to bulleted sections or keep the same style going in a different text block.

Tip #5 – Resizing The WordPress Text Editor Box

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

WordPress includes a responsive content editor

(WordPress includes a built-in responsive editor)

The simplest way to check if the Full Height Editor function is turned on or not, is to look at the  following tell-tale signs:

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

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

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

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

The WordPress content editor box should automatically resize as you type

(Your content editor box automatically expands as you type)

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

Full Height Editor feature disabled

(Full Height Editor feature disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing Mode function the Distraction-Free Writing function will not show up in the Visual Editor tab …

Full Height Editor feature disabled

(Full Height Editor function disabled)

If the Full Height Editor function is disabled, you can increase the size 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 box to resize your content editor …

Resize your editor using drag and drop

(Drag and drop to resize your editor)

The editor will expand to the new size …

Resized content editor

(Resized content editor)

Tip #6 – Using The Distraction-Free Writing Tool

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

(Distraction-Free Mode – WordPress Text Editor)

Practical Tip

You can try eliminating all distractions by combining the Distraction-Free writing tool and the Full-Screen option of web browsers like Google Chrome & Firefox …

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

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

With Distraction-Free writing turned on and the Full-Screen option of your web browser enabled, your current page will completely fill the screen, leaving you completely free to focus on your content.

To activate the Full Screen function in the Firefox or Google Chrome browser, go to your browser settings and click on the buttons shown below …

Full-Screen Option - Google Chrome & Firefox Browsers

(Google Chrome & Firefox Web Browsers – Full-Screen Function)

Important

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click the Screen Options tab in the top right-hand corner of your WordPress dashboard 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 features in your Screen Options tab

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

Tip #7 – How To 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) area …

Writing Settings - Formatting Options

(Formatting Options: Convert Emoticons – Writing Settings)

🙂

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

A Basic Guide To WordPress Content Formatting For Beginners

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Originally published as How To Use The WordPress Visual Content Editor.