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.

Using The WordPress EditorWordPress makes publishing and formatting content online easy by providing users with a rich built-in 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, we show you how to use the WordPress Visual Editor – what the menu buttons do, how to format content, plus useful tips and information on using some of the lesser known features of the WordPress editor!

A Basic Guide To WordPress Text Formatting For Beginners

WordPress comes with an intuitive and easy-to-use WYSIWYG (What You See Is What You Get) content editor that enables you to easily add and 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 editor

(WordPress WYSIWYG content editor)

WordPress Visual Editor Menu Toolbar Explained

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

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu Toolbar)

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

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

2. Permalink – Clicking on the “Edit” button changes the permalink text of your post/page. This function is useful if you would like to edit the URL of your post or page.

3. Add Media – Clicking this button lets you upload, manage and insert media into your post from your computer, an external storage location, or from your website’s media library.

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

5. Text Editor Tab – Switch between the editor tabs to add content in the WYSIWYG mode and make changes to its code. When adding content using the text tab, line breaks get converted to paragraphs automatically …

Text [HTML] Editor

(Text [HTML] Editor)

6. Bold – Select this item to add bold formatting to your words.

7. Italics – Highlight content and click this button to add italicized formatting.

8. Strikethrough – Formats your highlighted text with strikethrough.

9. Unordered list – Use this feature to turn your selected content into an unordered list, e.g.:

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

10. Ordered list – Select this toolbar item to turn your selected content into an ordered list like the example below:

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

11. Blockquote. Select this menu button to create a block quote. Just select the section of text you want to include in the 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 end the command and return your text to standard formatting.

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

Insert dividing lines into your content

(Insert a dividing line into your content)

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

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. Use this button to insert a hyperlink into your text (See “Inserting Links Into WordPress Posts & Pages” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to delete hyperlinks.

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

'Read More' Tag

(’Read More’ Tag)

Important Info

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

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

(Display/Hide Kitchen Sink)

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

(Distraction-Free Writing Functionality)

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

See the “Tips” section in this tutorial for useful tips on using this function.

21. Format Style. Use this feature to format 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 box, the text will typically be formatted using the default “Paragraph” style.
  • Modifying heading 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 style option from the pull menu (e.g. Heading 3) …

Heading Style Formats

(Heading Options)

22. Underline. Highlight content 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 aligned left by default).

24. Text Color. Highlight text and choose a color from the options in the pull-down menu to replace text color …

Color Palette

(Color Palette)

Useful Information

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

Custom Color Palette

(Custom Text Color Palette)

You will then have 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 color slider to select a new custom color.

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

HEX Color Codes [Web-Safe]

(Commonly Used HEX Colors [Web-Safe])

25. Paste as Text. Click this button 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)

Refer to the “Tips” section in this tutorial for more information about using this function.

26. Clear formatting. If you find strange codes in your text (or if your content isn’t displaying as you intended after publishing), then select all text and click this button to clear all formatting on your page.

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

Add symbols and custom characters to your content

(Special characters)

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

28. Decrease Indent – Click this menu item to outdent (move left) text.

29. Indent – Click this item to indent a section of text.

This is 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. Click this if you have accidentally deleted text or formatted text incorrectly and you would like to revert to a previous state.

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

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

Idea

After installing new plugins you may see extra features added to the WordPress content editor menu …

Plugins can add new options to your WordPress editor

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

Content Editor – Tips

Tip #1 - Using Keyboard Shortcuts

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

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

Formatting Shortcuts

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

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

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

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

This is a good example of how WordPress improves its software with new updates, so that more of the technical work required to seamlessly integrate different platforms and make things work together invisibly takes place “magically” behind the scenes, allowing users to become less and less technical-minded.

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 Paste as text button and format it afterwards.

Select the Paste as text menu button …

WordPress Visual Editor - Paste as text menu button

(Paste as text menu toolbar button)

Clicking on the Paste as text menu button, brings up the following window, and lets users know that the feature will remain switched on until toggled off, and reminds them to turn it off if pasting content from Microsoft Word …

Paste as Text feature popup message

(Paste as Text popup window)

Tip #3 – Using The Clear Formatting Button

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

Before …

Before formatting is removed

After …

After formatting removal

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

Sometimes, you cannot tell whether or not content pasted from another website contains formatting specific to that site …

Content pasted directly from an external website ...

(Content pasted directly from an external website …)

… until you view its HTML …

Content pasted directly from an external website may contain incompatible CSS formatting

(… can include unwanted styles!)

If the content was copied from your own website or blog, things may look fine until you make a change to the styling (e.g. change your color scheme) and some of your old content elements (e.g. links) contain different formatting.

For this reason, we recommend removing the formatting from pasted content, especially from content sourced from other WordPress websites or blogs.

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

Paste pre-formatted content into the visual editor

(Paste pre-formatted content into the visual editor)

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

Clear formatting button

(WordPress Visual Editor – Clear formatting toolbar button)

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

Remove formatted text from content

(Formatting removed)

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

Tip

Here is a quick way to test for errors suspected of being caused by poor formatting without losing the original content.

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

Copying formatted text in WordPress

(Copying formatted text to the clipboard)

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

Tip #4 – Adding Single Line Spacing To Your Content

Paragraph spaces are created by clicking the “Enter” key after typing text …

Adding line spaces to content

(Default line spacing)

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

Line spacing - break returns

(Line spacing – break returns)

Breaks allow the formatting of your block of text to continue. This is useful if you want to add line breaks to a bulleted section 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 turned on, providing users with a responsive and auto-adjustable editor …

WordPress has a responsive content editor

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

An easy way to tell whether the Full Height Editor function is turned on or not, is to look at either of the  following tell-tale signs:

  • If you can see the Distraction-Free Writing button, then the Full Height Editor function is turned on,
  • The Full Height Editor function is on if you cannot see the content box scrollbar

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

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

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

The WordPress content area should automatically expand as you type

(Your WordPress content box should automatically resize as you type)

If for some reason the Full Height Editor feature is disabled, the editor scrollbar will appear once your content exceeds the visible space inside your editor …

Full Height Editor feature disabled - scrollbar visible

(Full Height Editor feature disabled)

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

Full Height Editor function disabled

(Full Height Editor feature disabled)

If the Full Height Editor function has been disabled, you can increase the size your text box using the text box resizing feature …

Text Box Resizing Tool

(Text Box Resizing Tool)

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

Resize the text box using drag and drop

(Resize your text box using drag and drop)

The text box will expand to the new size …

Resized editor

(Resized WordPress editor)

Tip #6 – Using The Distraction-Free Writing Functionality

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

(Distraction-Free Writing Mode – WordPress Text Editor)

Useful Tip

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

Distraction-Free Writing Mode - 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 web browser enabled, your current page will fill the screen entirely, leaving only the title and the content of the page or post you’re working visible.

To switch on Full-Screen in your web browser, refer to the screenshots below …

Full-Screen Option - Google Chrome & Firefox Web Browsers

(Google Chrome & Firefox – Full Screen Feature)

Idea

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click on the Screen Options tab (located in the top right-hand area of your WP dashboard screen) …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, click 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 features in your Screen Options tab)

Tip #7 – Convert Emoticons

One last 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 …

Formatting - Writing Settings

(WP Writing Settings – Formatting)

🙂

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

The WordPress Visual Editor - A Basic Guide To WordPress Text Formatting For Beginners

Get Thrive Leads for WordPress

***

"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: This site has no association with WordPress or any of the products reviewed on this site. We may receive financial benefits or affiliate commissions from the purchase of products or services mentioned on this website. All images and descriptions sourced from product websites are the copyright of their respective owners and comply with all license terms and agreements of use to the best of our knowledge.

***

Did you enjoy this tutorial? If so, please take a moment to use the share buttons below and share this page with other WordPress users.

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and has authored hundreds of FREE WordPress tutorials for non-techies and 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!