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 WordPress Visual Editor - A Basic Guide To Content 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 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 comprehensive tutorial, we show you how to use the WordPress Content Editor – what the menu toolbar items do, how to format content, plus useful tips and practical information on using some of the lesser known features of the content editor!

A Basic Guide To Content Formatting In WordPress For Beginners

WordPress comes with a simple semi-WYSIWYG (What You See Is What You Get) editor that allows you to format text, create hyperlinks, add images and media to your posts and pages, and much more, simply by clicking a few buttons …

WordPress editor

(WordPress editor)

WordPress Visual Editor Menu Buttons Explained

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

WordPress Visual Editor Buttons

(WordPress Visual Editor Menu Toolbar)

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

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

2. Permalink – Click on the Edit button to change your post/page permalink. This is useful if you want to optimize the post/page URL.

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

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

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

WP Text [HTML] Editor Mode

(WordPress Text Editor)

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

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

8. Strikethrough – Add strikethrough formatting to your text.

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

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

10. Ordered list – This button turns your selected text 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 create a block quote. Simply select the content you want to show up 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 return your text to normal formatting.

12. Dividing Line. Use this feature to insert a divider into your content …

Insert a line into your content

(Add a line to your content)

13, 14 & 15. Left, Center and Right align buttons – Use these buttons to align your text …

13. Align Left

14. Align Center

15. Align Right

Press Enter and add a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to add a hyperlink to your content (See “How To Easily Insert Hyperlinks Into WordPress Posts” tutorial for useful tips on creating internal links).

17. Unlink. Click this button to remove hyperlinks.

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

'Read More' Tag

(Insert ‘Read More’ Tag)

Info

The ‘Read More’ tag doesn’t work on WordPress Pages. It only works on the page that shows your most recent blog post entries (i.e. the Blog Page).

19. Show/Hide Kitchen Sink. Click this button to toggle the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

Enhanced Menu Toolbar

(Enhanced Menu Toolbar)

20. Distraction-Free Writing. Clicking this button will toggle between distraction-free writing functionality & 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 Functionality Button

(Distraction-Free Writing Functionality)

When distraction-free writing mode is toggled on, your surrounding page elements return as soon as you move the cursor outside the boundaries of the content editor.

Refer to the “Tips” section in this tutorial for useful details about using this item.

21. Format Style. Use this feature to change the formatting of your text.

Notes:

  • The style menu may include various headings and other pre-defined styles built into your WordPress theme.
  • When you create a new post or page and start typing into the content area, the text will typically be formatted using the default “Paragraph” style.
  • Modifying heading formatting styles typically require having knowledge of how to edit CSS (Cascading Style Sheets).

To add a heading style to your content, highlight your text and choose a heading style format from the pulldown menu (e.g. Heading 6) …

Heading Style Formats

(Heading Options Drop-Down Menu)

22. Underline. Select this function to underline the words.

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

24. Text Color. Highlight a section of text and choose a color from the palette in the dropdown menu to change your text color …

Color Palette

(Text Color)

Useful Info

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

Custom Text Color Palette

(Custom Color Palette)

You will then have access to wide 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 slider to select a 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 correctly across most monitor screens) …

Common HEX Color Codes

(HEX Color Codes [Web-Safe])

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

(Plain Text On/Off Mode)

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

26. Remove formatting. Use this feature to clear all content formatting if you notice unnecessary codes in your content (or if your content isn’t displaying as you expected after publishing).

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

Add symbols or special characters to your content

(Add symbols and special characters to your content)

For more information on using special characters in WordPress, see this tutorial:

28. Decrease Indent – Clicking this menu button decreases indented text.

29. Increase Indent – Click this button to indent one or more lines of text to the right.

This is a sample of indented text.

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

30. Undo. Click this button to undo your previous commands. This is useful if you have accidentally deleted a section of text or formatted text incorrectly and need to revert to a previous state.

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

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

Idea

Depending on which WordPress plugins you install on your site, you may see new functions added to the WordPress content editor menu …

Plugins can add new features to your editor

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

WordPress Content Editor – Tips

Tip #1 - Use Keyboard Shortcuts

As well as using the buttons in your Visual Editor toolbar, you can use the key combinations below as you type. This can help you get work done faster …

WordPress Content Editor - Power User Shortcuts

(WordPress 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 …

WordPress 4.5 - Formatting Shortcuts

(WordPress 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

(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 MS Word

Microsoft Word and some other word processing applications contain 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 unwanted code into your content that can result in 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 processors into pre-WP 3.9 versions can add unwanted formatting to your content.)

This is a great example of how WordPress continues to improve its software, so that more of the “magic” required to make things work together will happen invisibly behind the scenes, requiring users to become less and less technical-minded.

WordPress now has 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 into your content editor using the plain text mode button and format it later.

Click on the Paste as text menu toolbar button …

Paste as text toolbar button

(Paste as text menu button)

When you click on the Paste as text feature, the following notification pops up …

Paste as Text popup message

(Paste as Text feature message)

Tip #3 – Using The Clear Formatting Button

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

Before formatting removal …

Before removing formatting

After …

After removing formatting

This is great if, for example, you have pasted a block of content directly from an external website containing CSS styling formatting.

Sometimes, you cannot tell if content sourced and pasted from another site contains formatting specific to that website …

Content pasted from an external website ...

(Content pasted directly from an external website …)

… until you see the underlying HTML …

Content pasted from an external website may contain unwanted CSS formatting

(… may contain incompatible CSS styling!)

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

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

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

Paste content with formatting into the WordPress visual editor

(Paste content with formatting into the visual editor)

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

Clear formatting menu toolbar button

(Clear formatting toolbar button)

All formatting (e.g. bold, italicized text, etc.) is removed …

Remove formatted text from content

(Remove formatted text from text)

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

Useful Tip

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

Before using the Clear formatting feature, click on the Text tab, then select and copy everything to your clipboard …

Copying formatted text in WordPress

(Copying formatted text in WordPress)

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

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

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

Default line spacing

(Adding line spaces to content)

When you hit the “Enter” key to start a new line, WordPress adds a normal paragraph ending tag (</p>) to the content’s HTML. To insert a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …

Adding single line returns to content

(Adding single line spaces to content)

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

Tip #5 – Resizing The WordPress Visual Editor

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

WordPress comes with a built-in responsive content editor

(WordPress comes with a built-in responsive content editor)

A quick way to determine whether the Full Height Editor function is active or not, is to look at either of the  following tell-tale signs:

  • If the Distraction-Free Writing icon can be seen, then the Full Height Editor function is enabled,
  • If you cannot see the content editor scrollbar, then the Full Height Editor function is turned on …

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

(Tell-tale signs that the Full Height Editor feature is turned on)

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

The WordPress content area should automatically expand as you type

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

If the Full Height Editor feature has been disabled, you will see the editor scrollbar appear once your text exceeds the visible space inside your editor …

Full Height Editor feature disabled

(Full Height Editor feature disabled – scrollbar visible)

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

Full Height Editor feature disabled

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

If the Full Height Editor function has been disabled, you can increase 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 Tool)

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

Drag and drop to resize your content editor

(Drag and drop to resize your editor)

The editor will expand to the new size …

Resized content editor

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Functionality

Distraction-Free Writing functionality 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 Writing Mode - WordPress Text Editor

(Distraction-Free Mode – WordPress Text Editor)

Practical Tip

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

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

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

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

To turn on the Full Screen option in your browser, go to your browser menu and click on the icons shown below …

Google Chrome & Firefox Web Browsers - Full-Screen Function

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

Important

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

Screen Options Tab

(Screen Options Tab)

In the Additional settings section, click Enable the full-height editor and distraction free functionality

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

Tip #7 – Converting Emoticons

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

Formatting Options: Convert Emoticons - WordPress Writing Settings

(WP Writing Settings – Formatting)

🙂

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

The WordPress Editor - A Simple Guide To WordPress Text Formatting For Beginners

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya