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.

Using 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 it easy to publish and format content online by providing users with a fully-featured visual editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded images quickly.

In this comprehensive step-by-step tutorial, you will learn how to use the WordPress Content Editor – what the menu buttons do, how to format text, and more!

A Basic Guide To WordPress Content Formatting

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

WordPress content editor

(WordPress visual editor)

WordPress Visual Editor Buttons Explained

If you have used an editor like MS Word, then the WordPress content editor interface will probably seem quite familiar to you …

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu Toolbar Buttons)

Here is a brief description of each of the menu functions shown in the screenshot above:

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

2. Permalink – Click on the “Edit” button to change the permalink text of your post or page. This feature is useful if you want to search optimize your post URL.

3. Add Media – Click this button to upload, manage and insert media into your post/page from your computer, 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) visual content editor.

5. Text (HTML) Tab – Switch between the two editor tabs to add content in the WYSIWYG mode and make changes to its code. When adding content to the text tab, line breaks will be converted to paragraphs automatically …

WordPress Text Editor Tab

(Text Editor)

6. Bold – Select the words your want to make bold and click this button.

7. Italics – Highlight text and click this feature to add italicized formatting to your words.

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

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

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

10. Ordered list – Click this button to create an ordered list like the example below:

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

11. Blockquote. Select this menu item to insert a block quote into your content. Just select the section of text you want included as a block quote 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 normal.

12. Divider Line. Select this item to add dividing lines to your content …

Add lines to your content

(Add dividing lines to your content)

13, 14 & 15. Alignment buttons – Select these buttons to align your page 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 paste a hyperlink into your text (See “How To Easily Add HTML Hyperlinks In WordPress” tutorial to learn more about using the hyperlink function).

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

18. Read More Tag. Clicking this menu button will insert a “read more” link into the content wherever you have placed the cursor. All text 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 the “read more” link …

Insert '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 most recent entries (i.e. the Blog Page).

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

Toolbar Toggle

(Display/Hide Kitchen Sink)

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

Distraction-Free Writing Mode Toggle

(Distraction-Free Writing Functionality)

With distraction-free writing mode toggled on, your surrounding page elements return as soon as the cursor is moved outside the content area.

Refer to the “Tips” section further below for useful information about using this functionality.

21. Format Style. This feature lets you add styling to your text.

Notes:

  • The style pull-down menu may include default headings and other pre-defined styles built into your WordPress theme.
  • When you create a new post and start entering text into the content area, the text will typically be formatted using the “Paragraph” style by default.
  • Modifying heading formatting styles generally require having knowledge of 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 6) …

Styles

(Heading Style Formats)

22. Underline. Highlight the text your want to add underline formatting to and click this button.

23. Justify. Click this button to justify your content. Justification ”neatens” your paragraphs by ensuring that line ends are not “ragged” (as is the case when text is aligned left by default).

24. Text Color. Highlight a section of text and choose a color from the palette in the drop menu to edit text color …

Text Color Palette

(Text Color Palette)

Idea

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

Custom Text Color Palette

(Custom Text Color Palette)

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

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

HEX Color Codes

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

See the “Tips” section below for more information on using this functionality.

26. Clear formatting. Use this feature to clear all content formatting if you notice strange codes in your content (or if your content isn’t displaying as you intended after publishing).

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

Add special characters to your content

(Insert symbols and custom characters into your content)

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

28. Outdent – Clicking this menu button moves a paragraph to the left.

29. Indent – Clicking this menu item indents your paragraphs.

Here’s a line of indented text.

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

30. Undo. Clicking this button undoes your previous actions. This is useful if you accidentally delete a section of text, or format text incorrectly and need to restore things as they were previously.

31. Redo. Clicking this button recovers any changes or deletions 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

Installing certain WordPress plugins can sometimes add extra menu toolbar buttons to the WordPress editor …

Plugins can add extra functions to your WordPress toolbar

(Plugins can add extra options to your 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).

Tips & Useful Info

Tip #1 - Power User Shortcuts

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

WordPress Content Editor Power User Keyboard 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 …

WP 4.5 - Formatting Shortcuts

(WordPress v. 4.5 – Formatting Shortcuts)

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

WP version 4.5 : Formatting Shortcuts - Backticks

(WP version 4.5 : Formatting Shortcuts – Backticks)

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

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

MS Word and some other text editors can contain 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 editor will add a bunch of messy code …

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

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

As WordPress improves with new releases and updates, more of the “magic” required to make things work seamlessly together will happen invisibly behind the scenes, allowing more non-technical minded users to benefit from using WordPress.

WordPress now comes with 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 editor using the plain text mode button and format it afterwards.

Click on the Paste as text menu button …

WordPress Visual Editor - Paste as text toolbar button

(WordPress Editor – Paste as text button)

Click on the Paste as text feature and the following notice pops up …

Paste as Text message

(Paste as Text feature message)

Tip #3 – Removing Formatting From Text

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

Before …

Before formatting is removed

After …

After removing formatting

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

Sometimes, you can’t tell that content pasted from an external website or blog contains formatting specific to that website …

Content pasted from external websites ...

(Content pasted directly from external websites …)

… until you view its HTML …

Content pasted from external websites can include hidden formatting

(… can contain unwanted styles!)

If you’ve copied content from your own blog, everything may look normal until you make a change to the styling (e.g. change your color scheme) and some of your old blog posts have a different CSS style.

For this reason, it’s a good idea to remove the formatting from pasted content, especially if your content has been copied from other WordPress websites or blogs.

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

Paste pre-formatted content into the WordPress visual editor

(You can paste formatted content into the visual editor)

Next, select everything inside the content editor area and select the Clear formatting button …

Clear formatting button

(Clear formatting menu button)

All your formatting (such as bold, italicized text, etc.) will be removed …

Removing content formatting

(Text formatting removal)

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

Useful Tip

Here is a useful way to test and remove any errors that you suspect may be caused by poor formatting tags without losing the original content.

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

Copying formatted text in WordPress

(Copying formatted text to the clipboard)

Open a new text file, paste into it the content from your clipboard and save, then return to your editor and complete the “remove formatting” process. Now, if something goes wrong, you have a backup copy with all the original content 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 …

Adding line spaces to content

(Line spaces)

When you hit the “Enter” key to add spacing between lines of text, 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 …

Adding single line spaces to content

(Adding single line spaces to content)

Breaks allow the formatting of the paragraph 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 Content Editor

By default, WordPress has the Full Height Editor feature turned on, providing users with a responsive and self-adjusting editor …

WordPress includes a built-in responsive editor

(WordPress has a responsive editor)

You can quickly check whether the Full Height Editor feature is enabled or not, by looking at the  following tell-tale signs:

  • If you can see the Distraction-Free Writing button, then the Full Height Editor feature is enabled,
  • If you cannot see the content box scrollbar, then the Full Height Editor feature is enabled …

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

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

With the full height editor feature enabled, the WordPress content editor area should automatically resize as you type to fit more content …

Your content editor box automatically expands as you type

(The WordPress content area automatically expands as you type)

If the Full Height Editor feature is inactive, you will see the editor scrollbar once your text exceeds the text editor area …

Full Height Editor function disabled

(Full Height Editor feature disabled)

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

Full Height Editor function disabled - Distraction-Free Writing Mode icon hidden

(Full Height Editor function disabled)

If your Full Height Editor function is disabled, you can expand your text box using the resizing feature at the bottom right-hand corner of the editor tool …

Text Box Resizing Feature

(Text Box Resizing Tool)

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

Resize your text box using drag and drop

(Drag and drop to resize your text box)

The editor will be resized …

Resized WordPress editor

(Resized WordPress editor)

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

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

(Distraction-Free Writing Mode – WordPress Text Editor)

Useful Tip

To eliminate all distractions try 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 Screens – WordPress Only vs WordPress & Full Screen Web Browser)

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

To use Full-Screen in your browser, open your browser menu and click on the icons shown below …

Google Chrome & Firefox - Full-Screen Function

(Google Chrome & Firefox – Full-Screen Function)

Idea

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

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

Tip #7 – Converting Emoticons

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

WordPress Writing Settings - Formatting

(Formatting – Writing Settings)

🙂

Congratulations, now you know how to use the WordPress content editor.

A Beginner's Guide To Formatting Content In WordPress

***

"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.