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 EditorWordPress makes it easy to publish and format content online 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 media quickly.

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

A Basic Guide To WordPress Content Formatting For Beginners

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

WordPress visual editor

(WordPress editor)

WordPress Visual Editor Menu Explained

If you have used a word processing application like Microsoft Word, then the WordPress visual editor interface should seem familiar to you …

WordPress Visual Editor Menu Items

(WordPress Visual Editor Menu Toolbar Buttons)

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

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

2. Permalink – Clicking on the Edit button changes your permalink. This function is useful if you would like to shorten your post or page URL.

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

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

5. Text Tab – The Text mode lets you enter HTML along with your post text. When adding content to the text tab, WordPress converts line breaks into paragraphs automatically …

WP Text Editor Tab

(WP Text Editor Tab)

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

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

8. Strikethrough – Add strikethrough formatting to your selected words.

9. Unordered list – Select this function to turn your text into an unordered list like the example below:

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

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

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

11. Blockquote. Click this icon to insert a blockquote into your content. Simply select the content you want to display as a 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 standard formatting.

12. Dividing Line. Click this button to add a horizontal line to your content …

Horizontal line menu item

(Add dividers to your content)

13, 14 & 15. Alignment buttons – Select these buttons to left, center and right align your content …

13. Align Left

14. Align Center

15. Align Right

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

16. Insert/Edit Link. Click this button to insert a hyperlink into your text (See “Adding HTML Links To WordPress Posts & Pages” tutorial to learn more about creating internal links).

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

18. ’Read More’ Tag. Click this menu button to insert a “read more” link into your content wherever you have placed the 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 appears to visitors after they click the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Important

The ‘Read More’ tag won’t work on WordPress Pages. It is only used on the page that shows your latest entries (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).

Display/Hide Enhanced Menu

(Enhanced Menu Toolbar)

20. Distraction-Free Writing. Click this item to toggle between distraction-free writing screen & normal writing screen. This is useful for checking the placement of items on the page and for working on your content without the distracting presence of other page elements …

Distraction-Free Writing Functionality Button

(Distraction-Free Writing Functionality)

With distraction-free writing functionality turned on, your surrounding page elements return to the screen as soon as you move the mouse cursor outside the boundaries of the content editor.

Refer to the “Tips” section in this tutorial for useful tips about using this function.

21. Format Style. Use this feature to add styling to selected text.

Notes:

  • Depending on the theme you’ve installed, the style menu may include various heading formats and other pre-defined styles.
  • When you create a new post and begin typing into the content box, the text will typically be formatted using the “Paragraph” style by default.
  • Modifying content formatting styles generally require having knowledge of CSS (Cascading Style Sheets).

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

Heading Style Formats

(Style Options Drop Menu)

22. Underline. Highlight your text and click this toolbar item to underline your words.

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 ensure that line ends are not “ragged” (as when text is aligned left by default).

24. Select Text Color. Highlight an area of text and choose a color from the options in the pull menu to edit the color of your selected text …

Color Palette

(Color Palette)

Tip

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

Custom Text Color Palette

(Select Custom Text Colors)

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 new custom color.

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

Common HEX Colors [Web-Safe]

(HEX Colors)

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)

See the “Tips” section in the next section of this tutorial for more details about using this feature.

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

27. Insert special characters. Click this button to add symbols like © ® ™ and a bunch of custom characters and symbols to your content.

Special character table

(Special characters)

For more information about using special characters in WordPress, see this tutorial: Adding Symbols And Special Characters To Your WP Posts & Pages

28. Outdent – Click this button to remove indented text.

29. Increase Indent – Clicking this menu button adds indentation.

Here’s a line of indented text.

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

30. Undo. Click this button to undo your previous actions. Use this if you have accidentally deleted a section of text or formatted content incorrectly and you would like to restore what you previously had.

31. Redo. Click this button to redo any changes or deletions that you have undone.

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

Tip

Plugins can add extra functions to your toolbar …

Plugins can add new buttons to the WordPress toolbar

(Plugins can add extra items to your 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 - Power User Shortcuts

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

Content Editor - Keyboard Shortcuts

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

Formatting Shortcuts

(WP v. 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 …

Formatting Shortcuts

(Formatting Shortcuts)

help To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

redarrow How To Enhance The WordPress Visual Editor

Tip #2 – Pasting Content From MS Word

MS Word and some other word processing applications (e.g. Google Docs) can contain 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 HTML code …

Pasting content from word processing applications into pre-WordPress 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.)

As WordPress continues to improve its software, more of the technical work of making content from different platforms work together will take place behind the scenes, freeing more non-technical minded users to enjoy the benefits of their WordPress sites.

WordPress now lets you paste 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 into your content editor as plain text and format it afterwards.

Select the Paste as text button …

Paste as text menu toolbar button

(Paste as text menu button)

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

Paste as Text feature notice

(Paste as Text popup message)

Tip #3 – Clear Formatting Menu Button

You can remove formatting from pasted content using the WordPress editor.

Before …

Before formatting removal

After …

After removing formatting

This can be a useful function if, for example, you have pasted text from an external website that includes CSS formatting.

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

Content pasted from an external website ...

(Content pasted directly from external websites …)

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

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

(… may include incompatible formatting!)

If the content has been sourced from your own blog, things may look normal until you make a change to the styling (e.g. change the color scheme) and discover that some of your previous posts contain different formatting styles.

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

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

Paste content with formatting into the WordPress visual editor

(You can paste pre-formatted content into the visual editor)

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

WordPress Editor - Clear formatting toolbar button

(WordPress Visual Editor – Clear formatting toolbar button)

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

Removing text formatting

(Text formatting removal)

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

Tip

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

Before using the Remove formatting feature, switch to the Text editor tab, then select and copy all of your text to the clipboard …

Copying formatted text to the clipboard

(Copying formatted text to the clipboard)

Paste the content from your clipboard into a new text file, then go back 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 preserved.

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

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

Default line spacing

(Line spaces)

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

Adding single line spaces to content

(Single line spacing)

Breaks enable the formatting of your block of text to be carried over. This is useful if you want to add line breaks to bulleted sections or keep different blocks of text together in the same paragraph for styling purposes.

Tip #5 – How To Resize The WordPress Content Editor

By default, WordPress has the Full Height Editor feature enabled, providing users with a responsive and self-adjusting content editor …

WordPress comes with a built-in responsive content editor

(WordPress has a responsive content editor)

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

  • If you can see the Distraction-Free Writing button, then the Full Height Editor feature is active,
  • If the content scrollbar cannot be seen when your typing exceeds the size of the text editor box, then the Full Height Editor function is active …

How to tell if the Full Height Editor function is enabled

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

With the full height editor feature enabled, the editor area automatically resizes as you type to fit more content …

Your WordPress content box should automatically resize as you type

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

If the Full Height Editor feature is inactive, the editor scrollbar will appear once your content exceeds the size of the text box …

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor function disabled)

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

Full Height Editor function disabled

(Full Height Editor feature disabled)

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

Text Box Resizing Feature

(Text Box Resizing Tool)

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 your text box)

Your text box will enlarge to the new size …

Resized 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 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 Mode - WordPress Text Editor

(Distraction-Free Writing Mode – WordPress Text Editor)

Useful Tip

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

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

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

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

To enable Full-Screen in your web browser, open your browser settings and click on the buttons shown below …

Google Chrome & Firefox Browsers - Full-Screen Function

(Full Screen Function – Google Chrome & Firefox)

Important

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

Screen Options Tab

(Screen Options Tab)

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

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

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

Tip #7 – Converting Emoticons

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

Convert Emoticons - WordPress Writing Settings

(Convert Emoticons – Writing Settings)

🙂

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

A Basic Guide To WordPress Content Formatting - How To Use The WordPress Editor

***

"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

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 services and products offered on this site are not associated, affiliated, sponsored, or endorsed by WordPress, nor have they been certified, reviewed, or tested by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items linked to, advertised, or reviewed on this site.

Get Thrive Leads for WordPress

***

Did you enjoy this article? Feel free to share this page with anyone thinking of starting or growing their business online using the social links below.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for beginners. WPCompendium.org provides detailed step-by-step tutorials that will teach you how to use WordPress with no coding skills required and grow your business online at minimal cost!

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