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.

A Basic Guide To Text Formatting In WordPress For Beginners - The WordPress Visual Editor*** 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 built-in visual editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded images quickly.

In this comprehensive tutorial, you will learn how to use the WordPress Content Editor – what the menu items do, how to format text, plus useful tips and information to help you get the most out of the content editor features!

A Simple Guide To Formatting Text In WordPress For Beginners

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

WordPress WYSIWYG editor

(WordPress visual editor)

WordPress Visual Editor Menu Items Explained

If you have used an editor like Microsoft Word, then the WordPress visual content editing interface will probably seem quite familiar to you …

WordPress Visual Editor Buttons

(WordPress Visual Editor Menu)

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

1. Title Field – Type in your Post/Page title here.

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

3. Add Media – Clicking this button lets you upload, manage and insert pictures, videos, audio, etc. into your post/page from your own computer, an external storage location, or from your site’s media library.

4. Visual Content Editor Tab – Clicking this tab lets you access the WYSIWYG (What You See Is What You Get) visual content editor.

5. Text (HTML) Tab – Click this tab to access the HTML code behind your content. When adding content using the text tab, WordPress converts line breaks into paragraphs automatically …

WordPress Text [HTML] Editor Tab

(Text Editor)

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

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

8. Strikethrough – Add strikethrough formatting to your text.

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

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

10. Ordered list – This button changes your text into an ordered list like the example below:

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

11. Blockquote. Use this functionality to insert a block quote into your content. Select the text you would like to display as a block quote and click this button.

To exit the quote press the “Enter” key to create a line of space and then click the block quote button again and this will end the command and return your text to normal.

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

Horizontal line function

(Add lines to your content)

13, 14 & 15. Alignment buttons – Select these buttons to align text …

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 add a hyperlink to your content (See “How To Create Links In Your WordPress Posts” tutorial to learn more about using the hyperlink function).

17. Unlink. Select the text you want to unlink and choose this button to delete the hyperlink.

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

'Read More' Tag

(’Read More’ Tag)

Important

The ‘Read More’ tag does not work on WordPress Pages. It is only used on the page showing your most recent posts (i.e. your Blog Page).

19. Toolbar Toggle. 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 Kitchen Sink)

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

(Distraction-Free Writing Mode)

With distraction-free writing mode toggled on, all surrounding page elements return to the screen as soon as the cursor is moved outside the content editor area.

Refer to the “Tips” section in this tutorial for useful information about using this feature.

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

Notes:

  • Depending on the theme you’ve installed, the style menu may include default heading formats and other pre-defined styles.
  • When you create a new post and start entering text into the content area, your text will typically be formatted using the default “Paragraph” style.
  • Modifying heading formatting styles typically require knowing how to edit CSS (Cascading Style Sheets).

To create a heading, highlight your text and choose a heading style option from the dropdown menu (e.g. Heading 6) …

Heading Style Formats

(Format Styles Pull-Down Menu)

22. Underline. Select the content your want to underline and click this button.

23. Justify. Clicking this button justifies a paragraph where your mouse cursor has been placed or text selected. Justification adjusts the spacing in your text to square up every line of text so that the line ends are not “ragged” (as is the case when text is left-aligned by default).

24. Select Text Color. Highlight your text and select a color from the palette in the pull-down menu to change text color …

Color Palette

(Color Palette)

Important Info

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

Custom Text 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 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 values for some of the most commonly used “web safe” colors (i.e. colors that display correctly across most monitors) …

HEX Color Codes

(Commonly Used HEX Colors [Web-Safe])

25. Paste as Plain 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 Mode)

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

26. Remove formatting. Use this feature to clear all page formatting if you spot strange formatting codes in your text (or if your content isn’t displaying as you intended after publishing).

27. Insert special character. Click this button to insert characters like © ® ™ and other symbols into your content.

Special character table

(Special character table)

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

28. Outdent – Click this menu button to outdent (move left) text.

29. Increase Indent – Click this menu button to indent your paragraphs.

This is a line of indented text.

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

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

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

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

Important

Plugins can add new buttons to your WordPress toolbar …

Plugins can add new features to the WordPress menu toolbar

(Plugins can add new functions 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).

WordPress Content Editor Tips

Tip #1 - Keyboard Shortcuts For Power Users

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

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

WordPress 4.5 - Formatting Shortcuts

(WP version 4.5 – Formatting Shortcuts)

Add three horizontal dashes to insert 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 …

WordPress v. 4.5 - 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 Microsoft Word

MS 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 messy code into your content resulting in formatting errors …

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

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

The above is a great example of how WordPress continues to improve, so that more of the technical wizardry required to integrate content from different platforms will happen behind the scenes, allowing more non-tech-savvy users to enjoy the benefits of using WordPress.

WordPress now ships with 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 editor using the Paste as text button and format everything later.

Select the Paste as text toolbar button …

WordPress Visual Editor - Paste as text toolbar button

(Paste as text menu button)

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

Paste as Text notification

(Paste as Text feature popup message)

Tip #3 – Clear Formatting Button

You can paste formatted content and then remove the formatting using the WordPress editor.

Before …

Before removing formatting

After …

After formatting removal

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

Sometimes, you can’t tell if the content you’ve pasted from an external website or blog contains formatting specific to that site …

Content pasted from an external website ...

(Content pasted from external websites …)

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

Content pasted directly from an external website can contain unwanted CSS styling

(… may contain unwanted formatting!)

If the content was sourced from your own website or blog, things may look fine until you make a change to the styling (e.g. change the color scheme) and discover that some of your old content have a different CSS style.

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

To do this, paste your pre-formatted content into the Visual editor …

Paste formatted content into the WordPress visual editor

(You can paste formatted content into the visual editor)

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

Clear formatting menu button

(WordPress Visual Editor – Clear formatting menu button)

All your formatting (e.g. bold, italicized text, colors, etc.) will be removed …

Removing content formatting

(Remove formatted text from your content)

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

Tip

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

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

Copying formatted text

(Copying formatted text in WordPress)

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

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

As with most applications, line returns are created by clicking the “Enter” key at the end of your text …

Default line spacing

(Default line spacing)

When you press the “Enter” key to start a new line, WordPress adds a normal 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 …

Line spacing - break returns

(Adding single line spacing to content)

Breaks allow 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 groups of text together in the same paragraph for styling purposes.

Tip #5 – How To Resize The WordPress Content Editor

By default, all newer versions of WordPress have the Full Height Editor function enabled, providing users with a responsive and auto-adjustable content editor …

WordPress comes with a built-in responsive editor

(WordPress comes with a built-in responsive editor)

You can easily check whether the Full Height Editor function is active or not, by looking at either of the  following:

  • If the Distraction-Free Writing button is visible, then the Full Height Editor feature is turned on,
  • 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 feature is enabled

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

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

Your content box automatically expands as you type

(Your WordPress content editor area automatically resizes as you type)

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

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled – scrollbar visible)

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

Full Height Editor function disabled

(Full Height Editor feature disabled)

If the Full Height Editor feature has been deactivated, you can resize your text box using the text box resizing feature …

Text Box Resizing Feature

(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 the editor

(Drag and drop to resize the text box)

Your text box will enlarge to the new size …

Resized content editor

(Resized content editor)

Tip #6 – Using The Distraction-Free Writing Mode

Distraction-Free Writing requires that the full-height editor be 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 Writing Mode – WordPress Text Editor)

Practical Tip

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

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

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

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

To activate Full Screen in your browser, refer to the diagram below …

Full-Screen Feature - Google Chrome & Firefox

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

Useful Info

To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab (found in the top-right area of your WordPress administration 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 in your Screen Options section

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

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

Writing Settings - Convert Emoticons

(Formatting Options – WordPress Writing Settings)

🙂

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

The WP 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)

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