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.

Get Thrive Leads for WordPress

A Basic Guide To WordPress Content Formatting For Beginners - The WP Content 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 images quickly.

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

A Simple Guide To WordPress Content Formatting

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

WordPress content editor

(WordPress editor)

WordPress Visual Editor Menu Buttons Explained

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

WordPress Visual Editor Buttons

(WordPress Visual Editor Menu Toolbar)

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

1. Post Title Field – Type in your Post title here.

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

3. Add Media – Click the Add Media button to upload, manage and insert media into your post or page from your hard drive, an external URL, or from your website’s media library.

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

5. Text Tab – Switch between the Visual and Text tabs to add content in the WYSIWYG mode and make changes to the underlying code. When entering content in the text tab, WordPress converts line breaks into paragraphs automatically …

WordPress Text [HTML] Editor

(Text [HTML] Editor)

6. Bold – Select this menu button to make the words bold.

7. Italics – Highlight words and click this button to add italicized formatting.

8. Strikethrough – Formats selected text with strikethrough.

9. Unordered list – Choose this item to create an unordered list like the example below:

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

10. Ordered list – Use this menu item 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 button to create a blockquote. Select the section of text you want displayed in the block quote and click the 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 end the command and return your text to normal formatting.

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

Add a divider to your content

(Add a divider to your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to left, center and right 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 paste hyperlinks into your text (See “How To Easily Add HTML Hyperlinks In WordPress” tutorial for useful tips on using the hyperlink function).

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

18. ’Read More’ Tag. Click this menu item to insert a “read more” tag wherever you have placed your cursor. All text added to a post prior to inserting this tag displays when published, but anything added to the post after this tag will only display to visitors once they click on the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Important

The ‘Read More’ tag does not work on WordPress Pages. It only works on the page showing your latest posts (i.e. your Blog Page).

19. Show/Hide Kitchen Sink. 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

(Enhanced Menu Mode)

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

Distraction-Free Writing Mode

(Distraction-Free Writing Functionality)

With distraction-free writing functionality toggled on, all page elements return to the screen as soon as the cursor is moved outside the boundaries of the content editor.

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

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

Notes:

  • The style menu may include various heading formats and other pre-defined styles built into your theme.
  • When you create a new post and begin entering text into the content box, your text is formatted using the “Paragraph” style by default.
  • Modifying content formatting styles typically require knowing how to edit CSS (Cascading Style Sheets).

To create a heading, highlight your text and select a format style from the drop-down menu (e.g. Heading 1) …

Heading Options Pulldown Menu

(Heading Style Formats Drop-Down Menu)

22. Underline. Highlight words in your text and click this button to add underline formatting.

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 left-aligned by default).

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

Text Color Palette

(Text Color)

Info

You can add new colors to the palette by clicking on the Custom link …

Custom Text Colors

(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 select a new custom color.

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

HEX Colors [Web-Safe]

(HEX Colors [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)

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

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

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

Insert special characters and symbols into your content

(Add symbols or custom characters to your content)

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

28. Decrease Indent – Clicking this item moves your paragraphs to the left.

29. Indent – Click this menu button to indent 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 actions. Use this if you accidentally delete content, or format content incorrectly and you would like to restore things as they were previously.

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

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

Info

Depending on the plugins you install on your site, you may see extra options added to the WordPress content editor menu …

Plugins can add extra functions to the menu toolbar

(Plugins can add new buttons to the WordPress 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).

Content Editor – Tips

Tip #1 - Keyboard Shortcuts For Power Users

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

Content Editor - Keyboard Shortcuts

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

WordPress 4.5 - Formatting Shortcuts

(Formatting Shortcuts)

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

Formatting Shortcuts - Backticks

(WP version 4.5 : Formatting Shortcuts – Backticks)

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

WP version 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 Into WordPress From Microsoft Word

Microsoft Word and some other text editors (e.g. Google Docs) store formatting 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 editor will introduce unwanted HTML 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 processing applications into pre-WordPress 3.9 versions adds unwanted formatting to your content.)

As WordPress continues to improve its software, more of the technical wizardry required to integrate content from different platforms will take place behind the scenes, freeing up more non-tech-savvy users to benefit from using their WordPress sites.

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 using the Paste as text button and format everything afterwards.

Select the Paste as text button …

WordPress Editor - Paste as text button

(Paste as text button)

Toggle on the Paste as text feature and the following message comes up …

Paste as Text notification

(Paste as Text feature message)

Tip #3 – Clear Formatting Button

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

Before formatting removal …

Before formatting removal

After …

After removing formatting

This is a useful function if, for example, you have pasted content from another website that contains CSS styling formatting.

Sometimes, you cannot tell whether or not content pasted from an external website or blog contains formatting specific to that website …

Content pasted directly from external websites ...

(Content pasted directly from external websites …)

… until you view the code …

Content pasted from external websites may include incompatible CSS formatting

(… can contain incompatible CSS styling!)

If the content was sourced from your own website, everything may look normal until you make a change to the styling (e.g. change your color scheme) and discover that some of your previous content have a different CSS style.

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

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

You can paste pre-formatted content into the WordPress visual editor

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

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

Clear formatting toolbar button

(WordPress Editor – Clear formatting menu toolbar button)

All your formatting (e.g. bold, italicized text, colors, etc.) has been removed …

Remove formatted text from your text

(Formatting removed)

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

Tip

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

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

Copying formatted text

(Copying formatted text)

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

Tip #4 – How To Add Line Break Spacing To Your Content

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

Line spacing - default

(Line spacing – default)

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 returns, use both the “shift” and “enter” keys …

Adding single line spacing to content

(Adding single line spaces to content)

Breaks allow the formatting of your block of text to be carried over. This is useful if you want to add a line break to a bulleted section or keep the same style going on another text block.

Tip #5 – Resizing The WordPress Content Editor

By default, all newer versions of WordPress have the Full Height Editor feature activated, providing users with a responsive and self-adjusting editor …

WordPress comes with a built-in responsive content editor

(WordPress has a built-in responsive content editor)

You can quickly determine if the Full Height Editor feature is active or not, by looking at either of the  following:

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

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

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

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

The WordPress content area should automatically resize as you type

(The WordPress content editor box automatically expands as you type)

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

Full Height Editor feature disabled

(Full Height Editor feature disabled – scrollbar visible)

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

Full Height Editor function disabled

(Full Height Editor function disabled)

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

Text Box Resizing Tool

(Text Box Resizing Feature)

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

Resize your editor using drag and drop

(Resize your content editor using drag and drop)

Your editor will enlarge to the new size …

Resized content editor

(Resized content editor)

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

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 - Text Editor

(Distraction-Free Mode – WordPress Text Editor)

Practical Tip

To completely eliminate all distractions try combining Distraction-Free writing with the Full-Screen function of browsers like Google Chrome & Firefox …

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

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

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

To activate Full-Screen in your web browser, go to your browser settings menu and refer to the screenshots below …

Google Chrome & Firefox - Full Screen Function

(Google Chrome & Firefox – Full-Screen Option)

Info

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click the Screen Options tab in the top-right area of your WP administration screen …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, tick Enable the full-height editor and distraction free functionality

Enable full-height editor and distraction-free features

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

Tip #7 – Convert Emoticons

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

Convert Emoticons - WordPress Writing Settings

(Writing Settings – Formatting)

🙂

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

A Basic Guide To WordPress Text Formatting

***

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