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 Simple Guide To WordPress Content Formatting*** 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 fully-featured editor that requires no knowledge or coding experience to create professional-looking web pages with formatted text and embedded images quickly.

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

A Simple Guide To Content Formatting In WordPress For Beginners

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

WordPress WYSIWYG editor

(WordPress editor)

WordPress Visual Editor Menu Buttons Explained

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

WordPress Visual Editor Menu

(WordPress Visual Editor Menu Toolbar)

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

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

2. Permalink – Clicking on the Edit button changes the permalink text of your post/page. This is useful if you would like to improve your SEO.

3. Media Manager – Clicking the Add Media button lets you upload, manage and insert media into your post or page from your own hard drive, an external storage location, or from your website’s media library.

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

5. Text Tab – Switching between the two editor tabs lets you add content in the WYSIWYG mode and then make changes to its code. When adding content to the text tab, WordPress automatically converts line breaks into paragraphs …

Text Editor Tab

(Text Editor)

6. Bold – Highlight 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 – Formats highlighted text with strikethrough.

9. Unordered list – Turns your text block into an unordered list like the example below:

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

10. Ordered list – Turns your selected content into an ordered list, e.g.:

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

11. Blockquote. Choose this function to insert a block quote into your content. Simply select the section of text you want to display in the blockquote and click the menu button.

To exit the blockquote 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. Horizontal Line. Use this functionality to insert a divider into your content …

Insert dividers into your content

(Horizontal line menu button)

13, 14 & 15. Left, Center and Right align buttons – Use these buttons to left, center and right align content 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 text (See “How To Insert Hyperlinks Into Your WordPress Content” tutorial to learn more about creating internal content links).

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

18. ’Read More’ Tag. This function adds a “read more” link into your content wherever you have placed your cursor. Content added to a post prior to the insertion of this tag displays when published, but content added to the post after this tag will only appear to visitors after they click the “read more” link …

'Read More' Tag

(Insert ‘Read More’ Tag)

Important Info

The ‘Read More’ tag won’t work on WordPress Pages. It only works on the page displaying your latest blog posts (i.e. your Blog Page).

19. Enhanced Menu Toolbar. 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

(Display/Hide Enhanced Menu)

20. Distraction-Free Writing. Clicking this item will toggle between distraction-free writing functionality & normal writing screen. This is useful 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 Functionality)

With distraction-free writing functionality turned on, all surrounding page elements return when you move the cursor outside of the content editor box.

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

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

Notes:

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

To add a heading style to your content, highlight your text and select a heading format from the pull-down menu (e.g. Heading 5) …

Styles

(Heading Styles Drop-Down Menu)

22. Underline. Select words and click this button to add underline formatting.

23. Justify. Click this button to justify your content. Justification adjusts the spacing in your text to square up every line of text so that the line ends are not “ragged” (as when text is left-aligned by default).

24. Select Text Color. Highlight text and choose a color from the pulldown palette to edit your text color …

Text Color Palette

(Color Palette)

Info

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

Custom Color Palette

(Custom Colors)

You will then have access to an almost limitless palette of colors. If you are familiar with the Hexadecimal (HEX) color system, 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 codes for some of the most commonly used “web safe” colors (i.e. colors that display correctly across most monitors) …

Commonly Used HEX Colors [Web-Safe]

(HEX Color Codes)

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 Mode

(Plain Text On/Off Mode)

See the “Tips” section in this tutorial for useful information about using this item.

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

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

Add special characters and symbols to your content

(Special character table)

For more information on adding symbols to WordPress, see this tutorial:

28. Decrease Indent – Clicking this item decreases text indentation.

29. Indent – Click this button to add indentation.

Here’s 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. Use this if you accidentally delete content, or format text incorrectly and you would like to restore what you previously had.

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

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.

Idea

Plugins can add new options to your editor …

Plugins can add new features to your WordPress editor

(Plugins can add new functions 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 - Keyboard Shortcuts For Power Users

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

WordPress Content Editor Power User Keyboard Shortcuts

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

Formatting Shortcuts

(WP 4.5 – Formatting Shortcuts)

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

Formatting Shortcuts - Backticks

(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 From Microsoft Word

MS Word and some other content editors store 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 editor will add a bunch of messy code …

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

(Pasting content from word processing applications into pre-WP 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 behind the scenes, freeing up greater numbers of non-technical minded users to benefit from using 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 toolbar button …

WordPress Editor - Paste as text menu button

(WordPress Visual Editor – Paste as text menu toolbar button)

Turning on the Paste as text feature, displays the following notice …

Paste as Text feature dialog box

(Paste as Text feature dialog box)

Tip #3 – Removing Formatting From Text

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

Before …

Before formatting is removed

After …

After removing formatting

This is great if, for example, you have pasted text from an external website that contains CSS styling formatting.

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

Content pasted directly from external websites ...

(Content pasted from external websites …)

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

Content pasted directly from external websites may include incompatible CSS styling

(… may include incompatible CSS styling!)

If you’ve copied the content from your own website or blog, everything may look fine until you make a change to the styling (e.g. change your color scheme) and discover that some of your earlier content elements (e.g. links) 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 sites.

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

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

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

Next, select everything and click on the Clear formatting button …

Clear formatting menu button

(WordPress Visual Editor – Clear formatting menu button)

All your formatting (such as bold, italicized text, colors, etc.) is removed …

Removing text formatting

(Content formatting removed)

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

Practical Tip

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

Before using the Remove formatting function, switch to the Text tab, then select and copy everything to your clipboard …

Copying formatted text in WordPress

(Copying formatted text)

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

Tip #4 – How To Add Single Line Spacing To Text

As with most applications, line returns are created by clicking the “Enter” key after typing text …

Line spacing - default

(Line spacing – default)

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

Single line spaces

(Single line spacing)

Breaks enable the formatting of the paragraph 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 a different text block.

Tip #5 – How To Resize The WordPress Visual Editor

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

WordPress has a built-in responsive content editor

(WordPress has a responsive content editor)

The easiest way to check whether the Full Height Editor feature is active or not, is to look at one or more of the  following:

  • If you can see the Distraction-Free Writing icon, then the Full Height Editor function is enabled,
  • If you cannot see the scrollbar, then the Full Height Editor function is active …

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

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

When the full height editor feature is enabled, the editor box automatically resizes as you type to fit more content …

Your content editor box automatically resizes as you type

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

If for any reason the Full Height Editor feature is inactive, you will see the content editor scrollbar appear once your typing exceeds the visible space inside your editor …

Full Height Editor feature disabled

(Full Height Editor feature disabled)

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

Full Height Editor function disabled

(Full Height Editor feature disabled)

If the Full Height Editor feature is disabled, you can expand 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 post box to resize it …

Drag and drop to resize the text box

(Drag and drop to resize the text box)

Your editor will be resized …

Resized WordPress editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Mode

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

(Distraction-Free Mode – WordPress Text Editor)

Practical Tip

To eliminate all writing distractions try combining Distraction-Free writing & the Full Screen feature of web browsers like Google Chrome & Firefox …

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

To activate the Full Screen option in Firefox or Chrome, open your browser menu and click on the buttons shown below …

Full Screen Feature - Google Chrome & Firefox

(Google Chrome & Firefox – Full-Screen Feature)

Important

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click on the Screen Options tab (located in the top-right section 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 …

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

(Screen Options – 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 …

Formatting Options - WP Writing Settings

(Formatting Options: Convert Emoticons – WordPress Writing Settings)

🙂

Congratulations, now you know how to use your WordPress content editor.

A Simple Guide To Content Formatting For Beginners

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

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.