How To Use The WordPress Visual 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.

Landing Pages for WordPress

Using The WP Visual EditorWordPress makes it easy to publish and format content online by providing users with a rich built-in editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded images quickly.

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

A Basic Guide To WordPress Content Formatting For Beginners

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

WordPress visual content editor

(WordPress content editor)

WordPress Visual Editor Menu Toolbar Explained

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

WordPress Visual Editor Menu Toolbar Buttons

(WordPress Visual Editor Menu Buttons)

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

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

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 – Click this button to upload, manage and insert pictures, videos, audio, etc. into your post or page from your own computer, 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) visual content editor.

5. Text (HTML) Editor Tab – The Text tab allows you to enter HTML along with your post text. When entering content in the text tab, line breaks get converted to paragraphs automatically …

Text Editor

(Text Editor Mode)

6. Bold – Highlight text and click this function to make the words bold.

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

8. Strikethrough – Formats highlighted text with strikethrough.

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

  • 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. Block Quote. Select this menu item to insert a blockquote into your content. Select the text you want to include in the block quote and click the menu 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 format.

12. Divider Line. Select this button to add a dividing line to your content …

Add horizontal lines to your content

(Add a horizontal line to your content)

13, 14 & 15. Left, Center and Right align buttons – Use these buttons to left, center and right align text and 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 add hyperlinks to your content (See “How To Add Links Into WordPress” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to delete hyperlinks.

18. Insert Read More Tag. This feature inserts a “read more” link wherever you have placed your cursor. All text added to a post prior to inserting this tag will display when published, but content added to the post after this tag only displays to visitors once they click on the “read more” link …

Insert 'Read More' Tag

(Insert ‘Read More’ Tag)

Useful Information

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

Enhanced Menu Toolbar

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing. Clicking this item will toggle between distraction-free writing screen & normal writing mode. This is a handy feature 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 Toggle Button)

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

Refer to the “Tips” section further below for useful details on using this function.

21. Format Style. This feature lets you change the formatting of selected text.

Notes:

  • Depending on your theme, the style pull-down menu may include default heading styles and other pre-defined styles.
  • When you create a new post or page and begin typing into the content editor, the text is formatted using the default “Paragraph” style.
  • Modifying content formatting styles typically require knowing how to edit CSS (Cascading Style Sheets).

To add a heading style to your content, highlight your text and choose a heading style option from the drop-down menu (e.g. Heading 4) …

Style Options Pull-Down Menu

(Styles)

22. Underline. Click this toolbar item to underline the words.

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

24. Select Text Color. Highlight a section of text and choose a color from the options in the dropdown menu to replace the color of your selected text …

Color Palette

(Color Palette)

Useful Info

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

Custom Color Palette

(Custom Color Palette)

This gives you access to an almost limitless choice of colors. If you are familiar with the Hexadecimal (HEX) color system, 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 slider to select 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 monitors) …

Common HEX Color Codes

(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 in the next section of this tutorial for useful details on using this item.

26. Clear formatting. If you find strange formatting codes in your text (or if your content isn’t displaying as you intended after your post or page has been published), then select all text and click this button to clear all page formatting.

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

Insert symbols or custom characters into your content

(Add symbols and special characters to your content)

For more information on adding symbols to WordPress, see this tutorial: Inserting Special Characters Into Your WP Pages & Posts

28. Outdent – Click this menu item to move text to the left.

29. Indent – Clicking this menu item indents text.

This is a line of indented text.

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

30. Undo. Clicking this button undoes your previous actions. This is useful if you have accidentally deleted a section of text or formatted text incorrectly and you would like to restore what you previously had.

31. Redo. Click this button to restore any changes or deletions that you have made.

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

Info

After installing new plugins you may see new options added to the WordPress content editor menu …

Plugins can add new buttons to your WordPress editor

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

Tips And Useful Information

Tip #1 - Keyboard Shortcuts For Power Users

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

WordPress Content Editor Power User Keyboard Shortcuts

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

WP version 4.5 - Formatting Shortcuts

(WP 4.5 – Formatting Shortcuts)

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

Formatting Shortcuts - Backticks

(WP 4.5 : Formatting Shortcuts – Backticks)

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

Formatting Shortcuts

(WordPress 4.5 – Formatting Shortcuts)

help To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

redarrow How To Enhance The WordPress Visual Editor

Tip #2 – Pasting Content Into WordPress From Microsoft Word

Microsoft Word and some other word processing applications contain 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 content editor will introduce unnecessary HTML code into your content resulting in formatting errors …

Pasting content from word processors 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.)

This is a good example of how WordPress continues to improve its software, so that more of the “magic” 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 the source content has heavy formatting and is not pasting cleanly, however, then try pasting it into your editor using the Paste as text button and format it afterwards.

Select the Paste as text button …

WordPress Editor - Paste as text toolbar button

(Paste as text button)

Clicking on the Paste as text button, brings up the following window …

Paste as Text feature message window

(Paste as Text notification)

Tip #3 – Using The Clear Formatting Function

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

Before …

Before formatting is removed

After …

After formatting removal

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

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

Content pasted directly from external websites ...

(Content pasted from an external website …)

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

Content pasted from an external website may include incompatible styles

(… can contain unwanted styles!)

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

For this reason, we recommend clearing the formatting from pasted content, especially if your content has been copied from other WordPress sites.

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

(Paste formatted content into the WordPress visual editor)

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

Clear formatting menu button

(Clear formatting button)

All your formatting (e.g. bold, italics, colors, etc.) is removed …

Remove formatted text from content

(Remove formatted text from text)

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

Practical Tip

Here is a quick and useful way to test for content errors that you suspect may be caused by poor formatting without losing your original content.

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

Copying formatted text

(Copying formatted text)

Open a new plain text file, paste into it the content from your clipboard, 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 of your content with all the original formatting intact.

Tip #4 – Adding Single Line Spacing To Text

Paragraph spaces are created by clicking the “Enter” key after typing text …

Adding line spaces to content

(Adding line spaces to content)

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

Single line spacing

(Line spacing – break returns)

Breaks enable the formatting of your text to continue. This is useful if you want to add line breaks to a bulleted section (without creating a new bullet point) or keep the same style going in a different text block.

Tip #5 – Resizing The WordPress Editor Box

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

WordPress comes with a responsive editor

(WordPress has a built-in responsive content editor)

You can confirm whether the Full Height Editor function is active or not, by looking at the  following:

  • If the Distraction-Free Writing button is visible, then the Full Height Editor function is active,
  • If the scrollbar is not visible when your text exceeds the text area, then the Full Height Editor feature is active …

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

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

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

Your content box should automatically expand as you type

(Your WordPress content area automatically expands as you type)

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

Full Height Editor function disabled

(Full Height Editor function disabled)

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

Full Height Editor function disabled

(Full Height Editor function disabled – Distraction-Free Writing Mode button not visible)

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

Text Box Resizing Tool

(Text Box Resizing Feature)

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

Drag and drop to resize your content editor

(Resize your text box using drag and drop)

Your editor will be resized …

Resized editor

(Resized content editor)

Tip #6 – Using The Distraction-Free Writing Mode

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

(Distraction-Free Mode – Text Editor)

Tip

You can eliminate all distractions by combining Distraction-Free Writing mode with the built-in Full-Screen feature of web browsers like Google Chrome & Firefox …

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

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

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

To use Full Screen in the Firefox or Chrome browser, go to your browser settings menu and click on the buttons shown below …

Full-Screen Function - Google Chrome & Firefox Web Browsers

(Full Screen Feature – Google Chrome & Firefox Browsers)

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click the Screen Options tab in the top right-hand corner of your WordPress admin screen …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, enable the full-height editor and distraction free functionality option …

Screen Options - Enable full-height editor and distraction-free functionality

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

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

Writing Settings - Formatting

(Formatting – Writing Settings)

🙂

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

A Basic Guide To Text Formatting In WordPress For Beginners - How To Use The WordPress Editor

***

"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

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

***

Did you enjoy this post? Please feel free to share this article with other WordPress users using the links below.

Author: Martin Aranovitch

WPCompendium.org provides hundreds of FREE WordPress tutorials for beginners. Our detailed step-by-step tutorials will save you money and teach you how to start, manage, and grow a website or blog using WordPress that puts you in complete control and delivers results with no coding skills required!