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 Text Formatting In WordPress For BeginnersWordPress makes publishing and formatting content online easy by providing users with a rich editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

In this tutorial, you will learn how to use the WordPress Visual Content Editor – what the menu items do, how to format your text, and more!

A Basic Guide To Content Formatting

WordPress comes with a built-in WYSIWYG (What You See Is What You Get) content editor that allows you to format text, create and edit hyperlinks, add images and media to posts and pages, and so much more, just by clicking a few buttons …

WordPress editor

(WordPress editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

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

WordPress Visual Editor Menu Toolbar

(WordPress Visual Editor Menu Items)

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

1. Post Title Area – 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 edit your post or page URL.

3. Add Media – Clicking the Add Media button lets you upload, manage and insert pictures, videos, audio, etc. into your post from your own computer, an external storage location, 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 (HTML) Tab – Click this tab to work with your content’s HTML code. When inserting content into the text tab, WordPress automatically converts line breaks into paragraphs …

Text Editor

(Text [HTML] Editor Tab)

6. Bold – Click this option to make your words bold.

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

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

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

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

10. Ordered list – This button turns your selected text block into an ordered list, e.g.:

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

11. Block Quote. Use this function to create a block quote. Just select the content section you would like to show up 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 blockquote button again and this will end the command and return your text to normal formatting.

12. Divider Line. Choose this functionality to insert a dividing line into your content …

Horizontal line menu item

(Horizontal line icon)

13, 14 & 15. Left, Center and Right align buttons – Use these buttons to left, center and right align your 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. Click this button to insert hyperlinks into your text (See “How To Add Links In WordPress” tutorial for useful tips on creating internal links).

17. Unlink. Click this button to remove hyperlinks.

18. ’Read More’ Tag. Click this icon to insert 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 only displays to site visitors once they click the “read more” link …

'Read More' Tag

(’Read More’ Tag)

Useful Info

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

Display/Hide Kitchen Sink

(Display/Hide Kitchen Sink)

20. Distraction-Free Writing Functionality. Clicking this button will toggle between distraction-free writing functionality & normal mode. This is a handy feature for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Mode Button

(Distraction-Free Writing Functionality)

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

Refer to the “Tips” section in this tutorial for more tips on using this functionality.

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

Notes:

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

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

Heading Formats Dropdown Menu

(Heading Formats Pull Menu)

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

23. Justify. Click this button to justify your content. Justification can only be applied to text.

24. Text Color. Highlight text and select a color from the options in the pulldown menu to edit your text color …

Text Color Palette

(Text Color Palette)

Tip

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

Custom Text Colors

(Select Custom Text Colors)

You will then have access to an almost limitless choice 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 color slider to select a custom color.

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

HEX Colors

(Common HEX Colors [Web-Safe])

25. Paste as Plain Text. Click this button 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 below for more details on using this item.

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

27. Special character. Click this button to add symbols like © ® ™ and custom characters and symbols to your content.

Add symbols or custom characters to your content

(Insert special characters into your content)

We have written a more detailed tutorial on adding symbols to WordPress here: How To Add Special Characters To WP Pages And Posts

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

29. Indent – Click this item to indent text.

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 commands. This is useful if you accidentally delete a section of text, or format text incorrectly and need to revert to a previous state.

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

32. Keyboard Shortcuts. Clicking this button shows you the Keyboard Shortcuts feature. This is covered in more detail in the Tips section below.

Idea

Plugins can add extra buttons to the WordPress content editor …

Plugins can add new items to the toolbar

(Plugins can add extra features to the WordPress 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 - Keyboard Shortcuts For Power Users

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

Content Editor - 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 …

WordPress 4.5 - Formatting Shortcuts

(Formatting Shortcuts)

Add 3 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

(WordPress 4.5 – 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

Microsoft Word and some other word processing applications (e.g. Google Docs) store 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-WP 3.9 versions can add unwanted formatting to your content.

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

The above is a great example of how WordPress continues to improve its software, so that more of the “magic” will happen behind the scenes, requiring 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 has heavy formatting and is not pasting cleanly, however, then try pasting it in using the plain text mode button and format it later.

Select the Paste as text button …

WordPress Editor - Paste as text button

(Paste as text menu button)

When you click on the Paste as text menu button, the following window pops up, letting you know that the feature will stay active until you toggle this option off …

Paste as Text dialog box

(Paste as Text feature notice)

Tip #3 – Using The Clear Formatting Function

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

Before …

Before formatting is removed

After …

After removing formatting

This can be a useful feature if, for example, you have pasted content from an external website that contains CSS styling formatting.

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

Content pasted directly from external websites ...

(Content pasted from external websites …)

… until you view its underlying HTML code …

Content pasted directly from an external website may contain unwanted formatting

(… can contain unwanted 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 discover that some of your earlier posts have been formatted incorrectly.

For this reason, it’s a good idea to remove 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 formatted content into the visual editor)

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

WordPress Editor - Clear formatting menu toolbar button

(WordPress Editor – Clear formatting toolbar button)

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

Remove formatted text from text

(Removing text formatting)

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

Practical Tip

Here is a useful way to test and remove any content errors that you suspect may be caused by poor formatting tags without losing the original content.

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

Copying formatted text

(Copying formatted text)

Open a new text file, paste the content from your clipboard into it and save, then return to your content editor and complete 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 Spacing To Content

Line returns are created by pressing the “Enter” key after typing text …

Default line spacing

(Adding line spaces to content)

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 returns, use both the “shift” and “enter” keys …

Line spacing - break returns

(Line spacing – break returns)

Breaks allow the formatting of your text to be carried over. This is useful if you want to add a line break to a bulleted section (without creating a new bullet point) or keep the same style going in other text blocks.

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

WordPress includes a responsive content editor

(WordPress includes a built-in responsive editor)

You can quickly confirm whether the Full Height Editor function is active or not, by looking at either of the  following tell-tale signs:

  • The Full Height Editor feature is active if you can see the Distraction-Free Writing button,
  • If the scrollbar cannot be seen when your typing exceeds the text area, then the Full Height Editor function is on …

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

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

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

Your content editor box should automatically expand as you type

(Your WordPress content editor box automatically expands as you type)

If for whatever reason the Full Height Editor function has been switched off, the content editor scrollbar will display once your typing exceeds the visible space inside the editor …

Full Height Editor function disabled - scrollbar visible

(Full Height Editor function disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing Mode icon displayed …

Full Height Editor function disabled

(Full Height Editor function disabled)

If the Full Height Editor function has been disabled, you can increase the size your text box using the resizing feature at the bottom right-hand corner of the editor tool …

Text Box Resizing Feature

(Text Box Resizing Feature)

Just click and drag the text box to resize your editor …

Drag and drop to resize your text box

(Drag and drop to resize your content editor)

The text box will be resized …

Resized WordPress editor

(Resized editor)

Tip #6 – Distraction-Free Writing Mode – Additional Info

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

(Distraction-Free Mode – Text Editor)

Tip

You can try eliminating all distractions by combining Distraction-Free Writing mode and the Full Screen option of web 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 function of your browser enabled, your current page will completely fill the screen, leaving only the page or post title and content you’re working on visible.

To use Full-Screen in the Firefox or Chrome web browser, open your browser options menu and click on the icons shown below …

Full-Screen Option - Google Chrome & Firefox Browsers

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

Idea

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click on the Screen Options tab (found in the top right-hand area of your WP administration screen) …

Screen Options Tab

(Screen Options Tab)

In the Additional settings section, 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 functionality in your Screen Options tab)

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

Formatting Options - WP Writing Settings

(Writing Settings – Convert Emoticons)

🙂

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

A Simple Guide To Content Formatting In WordPress - The WordPress Editor

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

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 advertised, linked to, or reviewed on this site.

***

Did you enjoy this article? Feel free to share this information with other WordPress users using the 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 at minimal cost!

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