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 Text Formatting In WordPress*** 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 does not require knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

In this tutorial, you will learn how to use the WordPress Visual Content Editor.

A Simple Guide To Formatting Text In WordPress For Beginners

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

WordPress visual editor

(WordPress editor)

WordPress Visual Editor Buttons Explained

If you have used a content editing application like MS Word, then the WordPress visual editing interface will seem quite familiar to you …

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu Toolbar)

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

1. Title Area – Type in your Post/Page title here.

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

3. Media Manager – Clicking the Add Media button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your hard drive, an external storage location, 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) content editor.

5. Text (HTML) Tab – Click this tab to view the HTML code behind your content. When adding content to the text tab, line breaks get converted into paragraphs automatically …

Text Editor Mode

(Text [HTML] Editor Tab)

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

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

8. Strikethrough – Formats your highlighted text with strikethrough.

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

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

10. Ordered list – Click this menu button to turn 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. Select this button to create a block quote. Select the text you want to display as a block quote and click this button.

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

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

Insert lines into your content

(Add a divider to your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to align your content 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. Click this button to add hyperlinks to your text (See “How To Add Internal Hyperlinks In WordPress” tutorial for useful tips on creating internal links).

17. Unlink. Click this button to delete hyperlinks.

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

Insert 'Read More' Tag

(’Read More’ Tag)

Info

The ‘Read More’ tag does not work on WordPress Pages. It is only used on the page showing your most recent posts (i.e. the 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).

Show/Hide Kitchen Sink

(Enhanced Menu Toolbar)

20. Distraction-Free Writing Mode Toggle. Click this item to toggle between distraction-free writing functionality & normal screen. This is useful for checking the placement of items on the page and for working on your content free of other page element distractions …

Distraction-Free Writing Mode Button

(Distraction-Free Writing Mode)

With distraction-free writing mode enabled, all page elements return as soon as the cursor is moved outside the boundaries of the content editor.

Refer to the “Tips” section in this tutorial for more information on using this feature.

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

Notes:

  • Depending on the WordPress theme you’ve installed, the style menu may include default heading formats and other pre-defined styles.
  • When you create a new post or page and start typing into the content box, the text is formatted using the “Paragraph” style by default.
  • Modifying heading styles typically require having knowledge of editing CSS (Cascading Style Sheets).

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

Heading Style Formats Pull-Down Menu

(Format Styles)

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

23. Justify. Clicking this button will justify a paragraph where your mouse cursor has been placed or text highlighted. 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 a section of text and choose a color from the drop-down palette to edit your text color …

Color Palette

(Text Color)

Important

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

Custom Text Colors

(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 color slider to add a custom color.

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

Common HEX Color Codes

(HEX Colors)

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

See the “Tips” section below for useful details about using this function.

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

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

Insert symbols or custom characters into your content

(Insert symbols and special characters into your content)

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

28. Outdent – Click this menu button to decrease text indentation and return text to left alignment on the page.

29. Indent – Clicking this button indents text.

This is a sample of indented text.

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

30. Undo. Click this button to undo your previous commands. Use this if you accidentally delete text, or format text incorrectly and need to restore what you previously had.

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

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

Info

Installing new plugins can sometimes add new options to the menu …

Plugins can add extra functions to your menu 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 And Useful Information

Tip #1 - Power User Shortcuts

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

WordPress Content Editor - Power User Shortcuts

(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 insert a horizontal line and enclose your text in backticks to turn it into <code> …

WordPress v. 4.5 : Formatting Shortcuts - Backticks

(WordPress 4.5 : Formatting Shortcuts – Backticks)

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

Formatting Shortcuts

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

Microsoft Word and some other word processors (e.g. Open Office) 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 editor will add a bunch of unwanted HTML code …

Pasting content from word processing applications into pre-WP 3.9 versions can add 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 improves its software with each new release, more of the technical work of making different platforms work together will happen behind the scenes, requiring users to become less and less technical-minded.

Versions newer than WP v. 3.9 now provide 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 in using the plain text mode button and format everything afterwards.

Click on the Paste as text menu toolbar button …

WordPress Visual Editor - Paste as text button

(Paste as text menu button)

When you turn on the Paste as text feature, the following message displays …

Paste as Text notification

(Paste as Text feature message window)

Tip #3 – Removing Formatting From Text

You can also paste formatted content and then remove the formatting inside the WordPress Visual editor.

Before formatting removal …

Before formatting removal

After …

After removing formatting

This can be a useful feature if, for example, you have pasted text directly from another website that contains CSS formatting.

Sometimes, you cannot tell if the content you’ve pasted from another site contains formatting specific to that website …

Content pasted directly from an external website ...

(Content pasted from an external website …)

… until you see its underlying HTML …

Content pasted directly from external websites may contain incompatible styles

(… may include incompatible formatting!)

If the content was sourced 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 earlier content elements (e.g. links) have a different CSS style.

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

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

You can paste content with formatting into the WordPress visual editor

(Paste content with formatting into the WordPress visual editor)

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

Clear formatting button

(Clear formatting menu toolbar button)

All formatting (e.g. bold, italicized text, colors, etc.) will be removed …

Removing text formatting

(Removing formatting styles from your content)

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

Practical Tip

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

Before using the Remove formatting function, switch to the Text tab, then select and copy everything 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 “remove formatting” process. Now, if something goes wrong, you have a backup copy with all the original content formatting preserved.

Tip #4 – Adding Single Line Spacing To Text

Paragraph spaces are created by clicking the “Enter” key at the end of your text …

Adding line spaces to content

(Default line spacing)

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

Line spacing - break returns

(Adding single line spaces to content)

Breaks enable the formatting of your block of text to be carried over. This is useful if you want to add line breaks to bulleted sections or keep groups of text together in the same paragraph for styling purposes.

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

By default, WordPress has the Full Height Editor function enabled, providing users with a responsive and self-adjusting content editor …

WordPress includes a built-in responsive content editor

(WordPress has a built-in responsive editor)

You can check whether the Full Height Editor feature is turned on or not, by looking at the  following:

  • If you can see the Distraction-Free Writing icon, then the Full Height Editor feature is active,
  • The Full Height Editor feature has been activated if the content editor scrollbar does not appear in the visual editor tab when your text exceeds the size of the text editor box …

How to tell if the Full Height Editor feature is enabled

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

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

Your WordPress content editor area automatically resizes as you type

(The WordPress content area automatically resizes as you type)

If, however, the Full Height Editor function is disabled, the editor scrollbar will display once your typing exceeds the size of the text area …

Full Height Editor feature disabled

(Full Height Editor function disabled)

Additionally, you will not see the Distraction-Free Writing menu item the Distraction-Free Writing Mode function will not appear in the Visual Editor tab …

Full Height Editor feature disabled

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

If your Full Height Editor feature is inactive, you can expand 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)

Simply click and drag the text box to resize the editor …

Drag and drop to resize your text box

(Resize your content editor using drag and drop)

Your content editor will expand to the new size …

Resized content editor

(Resized content editor)

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

Distraction-Free Writing requires that the full-height editor be enabled in Screen Options (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 – WordPress Text Editor)

Useful Tip

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

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

(Distraction-Free Writing Screens – 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 fill the screen entirely, leaving you completely free to focus on your content without any distracting elements.

To switch on the Full Screen feature in your browser, refer to the diagram below …

Google Chrome & Firefox Browsers - Full-Screen Option

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

Info

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

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

Tip #7 – Converting Emoticons

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

Convert Emoticons - WordPress Writing Settings

(Formatting Options – WordPress Writing Settings)

🙂

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

How To Use The WordPress Editor

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

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