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 Basic Guide To Content Formatting In WordPress For Beginners - Using The WordPress 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 editor that requires no knowledge or coding experience to create professional-looking web pages with formatted text and embedded images quickly.

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

A Simple Guide To WordPress Content Formatting For Beginners

WordPress comes with an easy-to-use WYSIWYG (What You See Is What You Get) editor that enables you to easily add, edit and format text, create and edit hyperlinks, add images and media to posts and pages, and more, simply by clicking a few buttons …

WordPress WYSIWYG editor

(WordPress editor)

WordPress Visual Editor Buttons Explained

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

WordPress Visual Editor Menu Buttons

(WordPress Visual Editor Menu Toolbar Buttons)

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

1. Post Title Field – Here’s where you type in your post or page title.

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

3. Add Media – Click the Add Media button to upload, manage and insert pictures, videos, audio, etc. into your post or page from your hard drive, 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) editor.

5. Text Tab – Click this tab to work with your content’s HTML code. When inserting content using the text tab, line breaks get automatically converted into paragraphs …

WP Text [HTML] Editor

(WP Text [HTML] Editor)

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

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

8. Strikethrough – Add strikethrough formatting to your text.

9. Unordered list – This button turns your content into an unordered list, e.g.:

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

10. Ordered list – Choose this option to turn your text into an ordered list like the example below:

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

11. Blockquote. Click this icon to create a blockquote. Simply select the content section you want highlighted in the blockquote and click this 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. Horizontal Line. Choose this functionality to add a divider to your content …

Horizontal line button

(Add dividing lines to your content)

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

13. Align Left

14. Align Center

15. Align Right

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

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

17. Unlink. Click this button to delete hyperlinks.

18. Read More Tag. Clicking this icon will insert a “read more” link wherever you have placed the cursor. Content added to a post prior to inserting this tag displays 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)

Info

The ‘Read More’ tag won’t work on WordPress Pages. It only works on the page that shows your most recent blog posts (i.e. the Blog Page).

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

Display/Hide Kitchen Sink

(Enhanced Menu Toolbar)

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

Distraction-Free Writing Mode

(Distraction-Free Writing Mode Toggle Button)

When distraction-free writing functionality is toggled on, the page elements return to the screen when you move the mouse cursor outside the content box.

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

21. Format Style. Use this feature to format 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 or page and start typing into the content box, the text will typically be formatted using the default “Paragraph” style.
  • Modifying heading formatting styles typically require knowing how to edit CSS (Cascading Style Sheets).

To create a heading, highlight your text and choose a heading style from the pulldown menu (e.g. Heading 3) …

Styles Drop-Down Menu

(Format Styles)

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

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

24. Text Color. Highlight a section of text and select a color from the options in the drop-down menu to edit the color of your text …

Text Color Palette

(Color Palette)

Important Info

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

Custom Text Color Palette

(Custom Text Color Palette)

You will then have access to wide choice 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 color slider to add a new 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 web browsers) …

HEX Color Codes [Web-Safe]

(HEX Colors)

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)

See the “Tips” section further below for useful tips on using this function.

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

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

Special characters

(Special characters)

For more information about using special characters in WordPress, refer to this tutorial:

28. Outdent – Click this item to remove indented text.

29. Indent – Click this button to add indentation.

Here’s a line of indented text.

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

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

31. Redo. Clicking this button reinstates a change or deletion that you have made.

32. Keyboard Shortcuts. Clicking this button shows you the Keyboard Shortcuts screen. This is covered in more detail in the Tips section below.

Tip

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

Plugins can add extra functions to the editor

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

Useful Tips & Additional Info

Tip #1 - Keyboard Shortcuts For Power Users

In addition to using the buttons on the toolbar, you can use the key combinations below as you type. This will help create and format your content faster …

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

Formatting Shortcuts

(Formatting Shortcuts)

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

WP 4.5 : Formatting Shortcuts - Backticks

(WordPress v. 4.5 : Formatting Shortcuts – Backticks)

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

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

MS Word and some other word processors (e.g. Google Docs) 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 processing applications into pre-WP 3.9 versions adds unwanted formatting to your content.

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

As WordPress continually improves its software, more of the technical wizardry of making content from different platforms work together will happen behind the scenes, requiring users to become less and less technical-minded.

WordPress now lets you paste 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 using the Paste as text button and format it afterwards.

Click on the Paste as text button …

WordPress Visual Editor - Paste as text toolbar button

(WordPress Visual Editor – Paste as text menu toolbar button)

Click on the Paste as text menu button and the following reminder pops up …

Paste as Text feature notification

(Paste as Text feature message)

Tip #3 – Clear Formatting Menu Button

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

Before removing formatting …

Before formatting removal

After …

After removing formatting

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

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

Content pasted from external websites ...

(Content pasted from an external website …)

… until you view the underlying HTML …

Content pasted directly from external websites can include hidden styles

(… may contain hidden styles!)

If the content has been sourced from your own website, everything may look fine until you make a change to the styling (e.g. change your color scheme) and discover that some of your old content elements (e.g. links) are formatted incorrectly.

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

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

Paste pre-formatted content into the WordPress visual editor

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

Next, select everything inside the content editor box and click on the Clear formatting button …

WordPress Visual Editor - Clear formatting toolbar button

(Clear formatting toolbar button)

All formatting (such as bold, italics, etc.) has been removed …

Removing formatting styles from content

(Removing text formatting)

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

Useful Tip

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

Before using the Clear formatting feature, click on the Text editor tab, then select and copy all of your text to the clipboard …

Copying formatted text in WordPress

(Copying formatted text)

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

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

As with most applications, line returns are created by clicking the “Enter” key at the end of your text …

Default line spacing

(Adding line spaces to content)

When you press the “Enter” key to start a new line, WordPress adds a normal paragraph ending tag (</p>) to the content’s HTML. To insert a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …

Line break returns

(Line break returns)

Breaks enable the formatting of the paragraph to continue. This is useful if you want to add line breaks to a bulleted section or keep blocks of text together in the same paragraph for styling purposes.

Tip #5 – Resizing The WordPress Visual Editor

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

WordPress comes with a responsive content editor

(WordPress comes with a built-in responsive editor)

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

  • The Full Height Editor function is active if you can see the Distraction-Free Writing button,
  • If you cannot see the scrollbar, then the Full Height Editor feature is turned on …

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 box automatically resizes as you type to fit more content …

Your WordPress content editor area should automatically expand as you type

(Your content area automatically resizes as you type)

If the Full Height Editor feature is inactive, the editor scrollbar will display once your text exceeds the visible space inside the editor …

Full Height Editor function disabled - scrollbar visible

(Full Height Editor function disabled)

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

Full Height Editor feature disabled

(Full Height Editor feature disabled – Distraction-Free Writing Mode feature hidden)

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

Text Box Resizing Tool

(Text Box Resizing Feature)

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

Drag and drop to resize the editor

(Drag and drop to resize your content editor)

Your editor will expand to the new size …

Resized content editor

(Resized content editor)

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

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

(Distraction-Free Mode – Text Editor)

Practical Tip

To eliminate all writing distractions try combining the Distraction-Free writing tool & the built-in Full Screen option of browsers like Google Chrome & Firefox …

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

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

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

To activate the Full-Screen option in your browser, go to your browser options menu and click on the buttons shown below …

Google Chrome & Firefox - Full Screen Feature

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

Important Info

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click on the Screen Options tab (found in the top right-hand corner of your WP 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 functionality in your Screen Options

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

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

Convert Emoticons - Writing Settings

(Formatting Options – Writing Settings)

🙂

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

The WordPress Content Editor

***

"These tutorials have so much information and are easy to understand. If you use WordPress or plan to in the future these will help you with everything you need to know." - Valisa (Mesa, Arizona)