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.

How To Use The WP Content EditorWordPress makes publishing and formatting content online easy by providing users with a fully-featured editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

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

A Basic Guide To Text Formatting In WordPress For Beginners

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

WordPress content editor

(WordPress editor)

WordPress Visual Editor Menu Toolbar Explained

If you have used a word processing application like Microsoft Word, then the WordPress content editor interface will feel familiar to you …

WordPress Visual Editor Menu Items

(WordPress Visual Editor Menu Toolbar Buttons)

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

1. Title Field – Enter your Post title here.

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

3. Media Manager – Clicking this button lets you upload, manage and insert media into your post from your own computer, an external storage location, or from your website’s media library.

4. Visual Tab – Click to access the WYSIWYG (What You See Is What You Get) visual content editor.

5. Text (HTML) Tab – Switching between the editor tabs allows you to add content in the WYSIWYG mode and then make changes to its underlying code. When adding content to the text tab, line breaks get automatically converted into paragraphs …

Text Editor Tab

(Text Editor)

6. Bold – Click this option to add bold formatting to your words.

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

8. Strikethrough – Formats highlighted text with strikethrough.

9. Unordered list – This button turns your selected 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. Blockquote. Click this button to insert a block quote into your content. Select the section of text you would like included in the block quote 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 end the command and return your text to normal.

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

Horizontal line icon

(Add horizontal lines to your content)

13, 14 & 15. Alignment buttons – Select these buttons to left, center and right align your content …

13. Align Left

14. Align Center

15. Align Right

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

16. Insert/Edit Link. Click this button to paste hyperlinks into your content (See “Adding Internal Hyperlinks In WordPress Posts & Pages” tutorial for useful tips on creating internal content links).

17. Unlink. Click this button to delete hyperlinks.

18. Insert Read More Tag. This feature adds a “read more” link wherever you have placed the cursor. All text added to a post prior to the insertion of this tag displays when published, but anything added to the post after this tag only appears to site visitors after they click the “read more” link …

'Read More' Tag

(Insert ‘Read More’ Tag)

Useful Info

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

Toolbar Toggle

(Enhanced Menu Toolbar)

20. Distraction-Free Writing Mode. 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 free of other page element distractions …

Distraction-Free Writing Mode

(Distraction-Free Writing Mode Button)

With distraction-free writing functionality turned on, your surrounding page elements return to the screen as soon as you move the cursor outside the boundaries of the content editor.

Refer to the “Tips” section in this tutorial for more tips about using this item.

21. Format Style. This feature lets you format your text.

Notes:

  • Depending on the theme you’ve installed, the style menu may include various heading styles and other pre-defined styles.
  • When you create a new post and begin typing into the content editor, the text will typically be formatted using the default “Paragraph” style.
  • Modifying heading styles generally 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 pull-down menu (e.g. Heading 2) …

Style Options Pull Menu

(Format Styles Pull-Down Menu)

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

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

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

Select Text Color

(Select Text Color)

Important Info

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

Custom Color Palette

(Custom Colors)

You will then have access to an almost limitless palette of colors. If you are familiar with the Hexadecimal (HEX) color system, 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 values for commonly used “web safe” colors (i.e. colors that display accurately across most browsers) …

Commonly Used HEX Colors

(Commonly Used HEX Colors)

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)

Refer to the “Tips” section in this tutorial for more details on using this item.

26. Clear formatting. If you detect unnecessary codes in your text (or if your content isn’t displaying as you expected after publishing), then select all text and click this button to clear all formatting on your page.

27. Custom character. Click this button to insert characters like © ® ™ and a bunch of other symbols into your content.

Insert symbols or custom characters into your content

(Add special characters to your content)

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

28. Decrease Indent – Click this menu button to decrease indented text and return text to left alignment on the page.

29. Indent – Clicking this menu button increases indented text.

Here’s a sample of indented text.

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

30. Undo. Clicking this button undoes your previous commands. Select this if you accidentally delete a section of text, or format text incorrectly and need to backtrack.

31. Redo. Click this button to recover a change or deletion that you have made.

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

After installing certain plugins you may see extra functions added to the WordPress editor menu …

Plugins can add new options to your editor

(Plugins can add extra options 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 - Use Power User Keyboard Shortcuts

As well as using the buttons on the toolbar, you can use the key combinations below as you type. This can help you work faster …

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

Formatting Shortcuts

(WordPress v. 4.5 – Formatting Shortcuts)

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

Formatting Shortcuts - Backticks

(Formatting Shortcuts – Backticks)

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

WordPress 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

MS Word and some other word processors 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 introduce unwanted code into your content resulting in formatting errors …

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

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

As WordPress continually improves its software, more of the technical work required to seamlessly integrate different platforms and make things work together will happen behind the scenes, allowing greater numbers of non-tech-savvy users to benefit from WordPress.

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 in using the plain text mode button and format it afterwards.

Select the Paste as text menu toolbar button …

WordPress Visual Editor - Paste as text toolbar button

(Paste as text button)

Toggling on the Paste as text menu button, displays the following window, informing you that the feature will remain active until you toggle this option off …

Paste as Text feature popup window

(Paste as Text dialog box)

Tip #3 – Removing Content Formatting

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

Before formatting is removed …

Before formatting is removed

After …

After formatting removal

This can be a useful function if, for example, you have pasted text 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 directly from an external website ...

(Content pasted directly from external websites …)

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

Content pasted from external websites can include incompatible CSS formatting

(… can include unwanted formatting!)

If the content was copied from your own website or blog, 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 elements are formatted incorrectly.

For this reason, we recommend clearing the formatting from pasted content, especially from content sourced from other websites.

To remove formatting from your content, paste your 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 all the content and click on the Clear formatting button …

Clear formatting menu toolbar button

(WordPress Visual Editor – Clear formatting button)

All your formatting (such as bold, italicized text, etc.) is now removed …

Remove formatted text from text

(Removing text formatting)

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

Practical Tip

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

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

Copying formatted text in WordPress

(Copying formatted text)

Open a new text file, paste the content from your clipboard into it and save, then go back to your content editor and complete 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 Line Break Spacing To Content

A line return is created by clicking the “Enter” key after typing text …

Line spacing - default

(Line spaces)

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

Adding single line spaces to content

(Single line spaces)

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

Tip #5 – Resizing The WordPress Visual Editor

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

WordPress includes a responsive editor

(WordPress includes a built-in responsive content editor)

You can easily determine whether the Full Height Editor feature is turned on or not, by looking at one or more of the  following:

  • The Full Height Editor feature is turned on if you can see the Distraction-Free Writing button,
  • If the content scrollbar cannot be seen when your content exceeds the text box, then the Full Height Editor feature is active …

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

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

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

The WordPress content area automatically resizes as you type

(Your content editor box should automatically resize as you type)

If for some reason the Full Height Editor function is disabled, you will see the content editor scrollbar appear once your text exceeds the visible space inside the editor …

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor function disabled – scrollbar visible)

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

Full Height Editor function disabled

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

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

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

Drag and drop to resize your editor

(Resize the editor using drag and drop)

The content editor will expand to the new size …

Resized WordPress editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Tool

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

(Distraction-Free Writing Mode – Text Editor)

Tip

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

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

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

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

To activate the Full-Screen feature in Firefox or Chrome, refer to the screenshots below …

Google Chrome & Firefox - Full Screen Feature

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

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab …

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

(Screen Options – Enable full-height editor and distraction-free features)

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

Convert Emoticons - Writing Settings

(Formatting – Writing Settings)

🙂

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

Using The WordPress 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)

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site and the products and services offered on this site are not associated, affiliated, sponsored, or endorsed by WordPress, nor have they been reviewed, certified, or tested by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items advertised, reviewed, or linked from this site.

***

Did you enjoy this post? If so, please take a moment to use the social buttons below and share this page with anyone who can benefit from learning about WordPress.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for non-techies and beginners. WPCompendium.org provides detailed step-by-step tutorials that will teach you how to use WordPress with no coding skills required and grow your business online at minimal cost!