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.

The WordPress Content Editor - A Beginner's Guide To WordPress Text FormattingWordPress makes it easy to publish and format content online by providing users with a rich visual 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 Simple Guide To Text Formatting In WordPress For Beginners

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

WordPress WYSIWYG content editor

(WordPress content editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

If you have used content editing software like MS Word, then the WordPress content editing interface will probably feel familiar to you …

WordPress Visual Editor Menu Buttons

(WordPress Visual Editor Menu Toolbar Buttons)

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

1. Post Title Field – Enter your Post/Page title here.

2. Permalink – Click on the Edit button to change your permalink. This feature is useful if you would like to improve your post/page SEO.

3. Media Manager – Clicking this button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your own hard drive, an external URL, or from your website’s media library.

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

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

WP Text [HTML] Editor Mode

(WordPress Text [HTML] Editor Mode)

6. Bold – Select words in your text and click this button to add bold formatting.

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

8. Strikethrough – Formats highlighted text with strikethrough.

9. Unordered list – Turns your text into an unordered list, e.g.:

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

10. Ordered list – This button 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. Select this function to insert a block quote into your content. Select the section of text you would like included 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 normal.

12. Horizontal Line. Choose this feature to insert horizontal lines into your content …

Horizontal line item

(Add horizontal lines to your content)

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

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. Use this button to insert a hyperlink into your content (See “Inserting Internal Links Into Your WordPress Posts” tutorial to learn more about creating internal links).

17. Unlink. Select content you would like to unlink and click this button to remove the hyperlink.

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

'Read More' Tag

(Insert ‘Read More’ Tag)

Useful Information

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

19. Enhanced Menu Mode. 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 Tool. Clicking this button will toggle between distraction-free writing functionality & normal 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 Toggle

(Distraction-Free Writing Mode)

With distraction-free writing functionality enabled, your page elements return to the screen when you move the cursor outside the content editor box.

Refer to the “Tips” section further below for useful tips about using this item.

21. Format Style. This feature lets you add styling to text.

Notes:

  • The style drop menu may include various heading styles and other pre-defined styles built into your theme.
  • When you create a new post or page and start typing into the content editor, the text will typically be formatted using the “Paragraph” style by default.
  • Modifying heading 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 from the pull menu (e.g. Heading 4) …

Styles

(Heading Options Dropdown Menu)

22. Underline. Select 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. Text Color. Highlight your text and select a color from the pull menu options to change text color …

Color Palette

(Color Palette)

Tip

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

Custom Text Colors

(Custom Text Color Palette)

You will then have access to wide palette of colors. If you are familiar with the Hexadecimal (HEX) color system, you can just 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 slider to select a custom color.

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

Commonly Used HEX Color Codes

(HEX Colors [Web-Safe])

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)

Refer to the “Tips” section further below for useful information on using this item.

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

27. Special character. Click this button to add symbols like © ® ™ and a bunch of custom symbols to your content.

Add symbols and custom characters to your content

(Insert special characters into your content)

We have written a more detailed tutorial about adding symbols and special characters to WordPress here:

28. Decrease Indent – Click this item to outdent text.

29. Increase Indent – Click this button to increase indentation.

Here’s 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. This is useful if you have accidentally deleted text or formatted content incorrectly and need to restore what you previously had.

31. Redo. Click this button to restore a change or deletion that you have undone.

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

Important

After installing certain WordPress plugins you may see new menu buttons added to the WordPress toolbar …

Plugins can add new items to the editor

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

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

Content Editor - Keyboard Shortcuts

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

WordPress v. 4.5 - Formatting Shortcuts

(Formatting Shortcuts)

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

WP version 4.5 : Formatting Shortcuts - Backticks

(Formatting Shortcuts – Backticks)

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

WordPress v. 4.5 - Formatting Shortcuts

(WordPress 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 word processing applications (e.g. Google Docs) store formatting 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 content editor will add a bunch of unwanted code …

Pasting content from word processors into pre-WP 3.9 versions adds unwanted formatting to your content.

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

As WordPress continues to improve its software, more of the technical wizardry required to seamlessly integrate different platforms will take place “magically” behind the scenes, freeing more 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 is not pasting cleanly, however, then try pasting it into your editor using the plain text mode button and format it later.

Click on the Paste as text menu button …

Paste as text toolbar button

(WordPress Visual Editor – Paste as text button)

Turn on the Paste as text function and the following notice comes up …

Paste as Text message window

(Paste as Text feature notice)

Tip #3 – Clear Formatting Toolbar Button

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

Before …

Before formatting removal

After …

After formatting removal

This is great if, for example, you have pasted content directly from an external website that includes CSS styling formatting.

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

Content pasted directly from external websites ...

(Content pasted directly from an external website …)

… until you view its HTML code …

Content pasted directly from an external website may contain unwanted CSS formatting

(… may include hidden formatting!)

If the content was copied from your own website, things may look fine until you make a change to the styling (e.g. change the color scheme) and some of your earlier content elements (e.g. links) are formatted incorrectly.

For this reason, it’s a good idea to remove 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 …

You can paste formatted content into the visual editor

(Paste pre-formatted content into the WordPress visual editor)

Next, select everything and select the Clear formatting button …

WordPress Visual Editor - Clear formatting menu button

(WordPress Visual Editor – Clear formatting menu toolbar button)

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

Remove formatted text from text

(Removing content formatting)

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

Practical Tip

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

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

Copying formatted text in WordPress

(Copying formatted text to the clipboard)

Paste the content from the clipboard into a new text file and save, then go back to your editor and complete the formatting removal process. Now, if something were to go wrong, you have a backup copy of your content with all the original formatting preserved.

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

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

Line spacing - default

(Line spacing – default)

When you hit 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 …

Single line spacing

(Adding single line spacing to content)

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 different blocks of text together in the same paragraph for styling purposes.

Tip #5 – Resizing The WordPress Content Editor

By default, the Full Height Editor feature is turned on, providing users with a responsive and self-adjusting editor …

WordPress comes with a built-in responsive editor

(WordPress comes with a responsive content editor)

You can easily determine if the Full Height Editor feature is turned on or not, by looking at either of the  following tell-tale signs:

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

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

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

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

The WordPress content box should automatically expand as you type

(Your content editor box automatically expands as you type)

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

Full Height Editor feature disabled

(Full Height Editor function disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing Mode menu item displayed …

Full Height Editor feature disabled - Distraction-Free Writing Mode menu icon not visible

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

If your Full Height Editor function is inactive, you can adjust the size 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)

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

Drag and drop to resize your content editor

(Resize the editor using drag and drop)

Your editor will be resized …

Resized WordPress editor

(Resized content editor)

Tip #6 – Using The Distraction-Free Writing Functionality

Distraction-Free Writing requires the full-height editor to is 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 Mode - Text Editor

(Distraction-Free Writing Mode – Text Editor)

Tip

You can try eliminating writing distractions by combining Distraction-Free Writing mode and the built-in Full-Screen function of browsers like Google Chrome & Firefox …

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

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

With Distraction-Free Writing mode activated and the Full Screen option of your web browser enabled, your current page completely fills the screen, leaving you completely free to focus on your content without any distracting page elements.

To use Full-Screen in Firefox or Google Chrome, refer to the instructions below …

Google Chrome & Firefox Browsers - Full Screen Function

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

Tip

To enable either the Full Height Editor or Distraction-Free Writing Mode feature, click on the Screen Options tab (located in the top right-hand corner of your WordPress dashboard screen) …

Screen Options Tab

(Screen Options Tab)

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

Enable full-height editor and distraction-free functionality

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

Tip #7 – Convert Emoticons

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

Convert Emoticons - Writing Settings

(Formatting Options: Convert Emoticons – Writing Settings)

🙂

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

A Simple Guide To Text Formatting In WordPress For Beginners - The WordPress Content 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 is not affiliated with nor sponsored by Automattic, Inc. or the WordPress Open Source project. 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 to this site.

***

Did you find this post useful? Please feel free to share this information with other blog owners using the social buttons below.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

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