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 WP Content Editor - A Simple Guide To WordPress Content Formatting For Beginners*** 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 media quickly.

In this tutorial, you are going to learn how to use the WordPress Visual Content Editor – what the menu toolbar items do, how to format text, plus useful tips and information on some of the lesser known features of the WordPress content editor features!

A Simple Guide To WordPress Content Formatting For Beginners

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

WordPress content editor

(WordPress content editor)

WordPress Visual Editor Menu Toolbar Explained

If you have used content editing software like Microsoft Word, then the WordPress content editing interface should feel familiar to you …

WordPress Visual Editor Menu

(WordPress Visual Editor Menu Toolbar)

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

1. Post Title Field – Enter your Post/Page 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/page URL.

3. Add Media – Clicking this button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your 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) content editor.

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

WordPress Text [HTML] Editor

(WP Text Editor)

6. Bold – Highlight words and click this button to add bold formatting.

7. Italics – Select text and click this menu item to add italicized formatting to your words.

8. Strikethrough – Add strikethrough formatting to your content.

9. Unordered list – Choose this feature to create an unordered list, e.g.:

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

10. Ordered list – Click this menu item to turn your content into an ordered list, e.g.:

  1. List item 1
  2. List item 2
  3. List item 3
  4. etc …

11. Block Quote. Select this item to create a blockquote. Select the section of text you want to display in the blockquote and click the menu 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. Divider Line. Select this feature to insert a divider into your content …

Add horizontal lines to your content

(Horizontal line icon)

13, 14 & 15. Alignment buttons – Select these buttons to align your page elements …

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 add hyperlinks to your content (See “Creating Internal Hyperlinks In WordPress Posts” tutorial for useful tips on creating internal content links).

17. Unlink. Click this button to remove hyperlinks.

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

'Read More' Tag

(’Read More’ Tag)

Important Info

The ‘Read More’ tag doesn’t work on WordPress Pages. It is only used on the page showing your latest blog posts (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 Mode

(Enhanced Menu Mode)

20. Distraction-Free Writing. Click this item to toggle between distraction-free writing mode & normal 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

(Distraction-Free Writing Mode Toggle)

With distraction-free writing functionality enabled, all surrounding page elements return as soon as you move your cursor outside of the content area.

See the “Tips” section in this tutorial for more information on using this function.

21. Format Style. This feature lets you format 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 or page and start typing into the content editor, the text will typically be formatted using the default “Paragraph” style.
  • Modifying heading formatting styles generally require having knowledge of editing CSS (Cascading Style Sheets).

To create headings, highlight your text and select a heading option from the drop menu (e.g. Heading 2) …

Heading Options Pull Menu

(Heading Styles)

22. Underline. Highlight a section of content 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 a section of text and select a color from the pulldown palette to change the color of your content …

Text Color

(Text Color Palette)

Important Info

You can expand the selection of colors available in 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, 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 add a custom color.

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

HEX Color Codes [Web-Safe]

(Commonly Used HEX Colors)

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 below for useful information on using this item.

26. Remove formatting. If you spot unnecessary formatting 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. Insert special character. Click this button to add characters like © ® ™ and many other characters and symbols to your content.

Insert symbols or special characters into your content

(Add special characters to your content)

For more information about using custom characters in WordPress, see this tutorial:

28. Decrease Indent – Click this menu button to remove text indentation.

29. Indent – Clicking this button adds indented text.

Here’s a sample of indented text.

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

30. Undo. Click this button to undo your previous actions. Select this if you accidentally delete text, or format content incorrectly and need to revert to a previous state.

31. Redo. Clicking this button recovers any changes or deletions that you have undone.

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

Useful Information

Installing certain WordPress plugins can add new menu options to the WordPress content editor …

Plugins can add extra features to your WordPress content editor

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

Content Editor Tips

Tip #1 - Using Power User Keyboard Shortcuts

As well as using the buttons in the editor toolbar, you can use the power key combinations below as you type. This will help create and format content faster …

Content Editor Power User Keyboard Shortcuts

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

Formatting Shortcuts

(WordPress version 4.5 – Formatting Shortcuts)

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

Formatting Shortcuts - Backticks

(WordPress 4.5 : Formatting Shortcuts – Backticks)

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

Formatting Shortcuts

(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

MS Word and some other text editors (e.g. Open Office) 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 add a bunch of messy HTML code …

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 adds unwanted formatting to your content.)

As WordPress improves its software with every new release, more of the work required to seamlessly integrate content from different platforms and make things work together “invisibly” will take place behind the scenes, requiring users to become less and less technical-minded.

WordPress now ships with built-in support for pasting 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 everything later.

Select the Paste as text toolbar button …

Paste as text toolbar button

(WordPress Editor – Paste as text menu toolbar button)

Click on the Paste as text feature and the following window comes up …

Paste as Text feature notification

(Paste as Text feature dialog box)

Tip #3 – Removing Content Formatting

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

Before formatting is removed …

Before formatting is removed

After …

After removing formatting

This function can be useful if, for example, you have pasted a block of content from another website containing 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 site …

Content pasted from external websites ...

(Content pasted from external websites …)

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

Content pasted from an external website may include unwanted CSS formatting

(… can include incompatible CSS formatting!)

If the content has been copied from your own website or blog, everything may look normal until you make a change to the styling (e.g. change the color scheme) and some of your previous content contain different formatting.

For this reason, it’s a good idea to remove the formatting from pasted content, especially if your content has been sourced from other sites.

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

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

(You can paste formatted content into the visual editor)

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

Clear formatting menu button

(WordPress Editor – Clear formatting toolbar button)

All your formatting (such as bold, italicized text, etc.) has been removed …

Remove formatted text from your text

(Remove formatted text from text)

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

Useful Tip

Here is a quick way to test and remove any 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 tab, then select and copy all of your text to your clipboard …

Copying formatted text to the clipboard

(Copying formatted text in WordPress)

Paste the content from the clipboard into a new plain text file, then go back to your content editor and go through the formatting removal process. Now, if something goes wrong, you have a backup copy with all the original content formatting intact.

Tip #4 – Adding Single Line Returns To Text

Line returns are created by clicking the “Enter” key at the end of your text …

Default line spacing

(Adding line spaces to content)

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

Adding single line spacing to content

(Line spacing – break returns)

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

Tip #5 – How To Resize The WordPress Content Editor

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

WordPress has a built-in responsive editor

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

You can easily determine whether the Full Height Editor function is active or not, by looking at the  following tell-tale signs:

  • If the Distraction-Free Writing button can be seen, then the Full Height Editor function is enabled,
  • If the scrollbar is not visible when your text exceeds the size of the text box, then the Full Height Editor feature is active …

How to tell if the Full Height Editor function is enabled

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

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

Your WordPress content editor area automatically expands as you type

(The WordPress content editor area should automatically resize as you type)

If the Full Height Editor function has been switched off, you will see the editor scrollbar appear once your content exceeds the size of the text editor area …

Full Height Editor feature disabled

(Full Height Editor function disabled)

Additionally, you will not see the Distraction-Free Writing button the Distraction-Free Writing feature will not be shown in the Visual Editor tab …

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

(Full Height Editor feature disabled)

If the Full Height Editor function has been disabled, you can adjust the size 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 text box to resize it …

Resize your editor using drag and drop

(Drag and drop to resize your editor)

Your text box will enlarge to the new size …

Resized content editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Functionality

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

(Distraction-Free Mode – WordPress Text Editor)

Tip

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

Distraction-Free Writing - 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 completely fills the screen, leaving you completely free to focus on your writing.

To turn on the Full Screen feature either Firefox or Chrome, go to your browser menu and click on the icons shown below …

Full Screen Feature - Google Chrome & Firefox

(Google Chrome & Firefox Browsers – Full Screen Feature)

Tip

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

Screen Options Tab

(Screen Options Tab)

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

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

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

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

WordPress Writing Settings - Convert Emoticons

(Writing Settings – Formatting Options)

🙂

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

A Simple Guide To Content Formatting For Beginners

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)