WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

How To Use The WordPress Visual Content 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 content editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

In this step-by-step tutorial, we show you how to use the WordPress Visual Editor – what the menu buttons do, how to format your text, and more!

A Simple Guide To WordPress Content Formatting

WordPress comes with a simple WYSIWYG (What You See Is What You Get) visual content editor that lets you easily format text, create hyperlinks, add images and media to posts and pages, and so much more, with a few clicks …

(WordPress content editor)

WordPress Visual Editor Buttons Explained

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

(WordPress Visual Editor Buttons)

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

1. Post Title Area – Type in your Post title here.

2. Permalink – Click on the “Edit” button to change your permalink. This is useful if you want to optimize the post URL.

3. Media Manager – Click the Add Media button to upload, manage and insert media into your post/page from your 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 Tab – The Text tab allows you to enter HTML along with your post text. When entering content in the text tab, line breaks are automatically converted to paragraphs …

(WP Text [HTML] Editor)

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

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

8. Strikethrough – Formats your selected text with strikethrough.

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

10. Ordered list – Select this menu button to turn 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. Choose this feature to create a block quote. Select the section of text you would like highlighted as a blockquote and click the 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 standard formatting.

12. Dividing Line. Select this menu item to add a divider to your content …

(Horizontal line feature)

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

13. Align Left

14. Align Center

15. Align Right

Press Enter and add a line of space to end the alignment command.

16. Insert/Edit Link. Click this button to add hyperlinks to your content (See “Adding HTML Hyperlinks In WordPress” tutorial to learn more about using the hyperlink function).

17. Unlink. Click this button to remove hyperlinks.

18. Insert Read More Tag. This feature inserts a “read more” tag wherever you have placed the cursor. All text added to a post prior to the insertion of this tag displays when published, but anything added to the post after this tag will only be displayed to site visitors once they click the “read more” link …

(Insert ‘Read More’ Tag)

The ‘Read More’ tag does not work on WordPress Pages. It only works on the page that shows your latest entries (i.e. the Blog Page).

19. Display/Hide Enhanced Menu. Clicking this button toggles the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

(Show/Hide Kitchen Sink)

20. Distraction-Free Writing Mode. Clicking this icon will 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)

When distraction-free writing mode is turned on, the page elements return to the screen as soon as you move the cursor outside the boundaries of the content editor.

See the “Tips” section further below for more tips on using this function.

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

Notes:

To create a heading, highlight your text and select a style from the pulldown menu (e.g. Heading 3) …

(Heading Formats Drop Menu)

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

23. Justify. Clicking this button will justify the paragraph where your mouse cursor has been placed or text selected. Justification ”neatens” your paragraphs by ensuring that line ends are not “ragged” (as when text is left-aligned by default).

24. Select Text Color. Highlight text and select a color from the pull menu options to replace your text color …

(Text Color Palette)

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

(Custom Color Palette)

This gives you access to wide choice of colors. If you are familiar with the Hexadecimal (HEX) color system, 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 custom color.

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

(HEX Color Codes [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)

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

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

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

(Add special characters and symbols to your content)

We have written a more detailed tutorial on adding symbols and special characters to WordPress here:

28. Outdent – Click this menu item to outdent text.

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

This is a sample of indented text.

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

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

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

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

Plugins can add new features to the WordPress menu toolbar …

(Plugins can add new options to the toolbar)

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)

Although the buttons have been removed from the toolbar, you can still use the keyboard shortcuts for both buttons (see below).

Tips & Useful Information

Tip #1 - Keyboard Shortcuts For Power Users

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

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

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

The formatting shortcuts for horizontal lines and code are shown below …

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

Microsoft Word and some other content editors can 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 unwanted HTML code into your content creating formatting errors …

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

As WordPress continually improves its software, more of the technical work of making different platforms work together will happen “magically” 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 into your content editor using the plain text mode button and format it later.

Click on the Paste as text toolbar button …

(WordPress Visual Editor – Paste as text menu button)

When you turn on the Paste as text menu button, the following notification comes up …

(Paste as Text feature popup message)

Tip #3 – Removing Formatting From Text

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

Before formatting removal …

After …

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

Sometimes, you can’t tell if content pasted from another website contains formatting specific to that website …

(Content pasted from external websites …)

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

(… may include incompatible styles!)

If you’ve copied content from your own blog, everything 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 elements (e.g. links) have been formatted differently.

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

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

(Paste formatted content into the WordPress visual editor)

Next, select everything and select the Clear formatting button …

(WordPress Visual Editor – Clear formatting menu toolbar button)

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

(Text formatting removal)

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

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

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

(Copying formatted text to the clipboard)

Open a new plain text file, paste the content from your clipboard into it and save, then go back to your content editor and complete the “remove formatting” process. Now, if something goes 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, a line return is created by clicking the “Enter” key at the end of your paragraph …

(Adding line spaces to content)

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

Breaks enable the formatting of the paragraph to continue. This is useful if you want to add line breaks to a bulleted section (without creating a new bullet point) or keep the same style going in a different text block.

Tip #5 – Resizing The WordPress Visual Editor

By default, the Full Height Editor feature is activated, providing users with a responsive and self-adjusting editor …

(WordPress has a responsive editor)

The easiest way to tell if the Full Height Editor function is enabled or not, is to look at either of the  following:

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

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

(Your content box automatically resizes as you type)

If for whatever reason the Full Height Editor feature is inactive, the editor scrollbar will appear once your typing exceeds the text box …

(Full Height Editor feature disabled)

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

(Full Height Editor feature disabled)

If your Full Height Editor feature is inactive, you can resize your text box using the resizing feature at the bottom right-hand corner of the editor 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 …

(Drag and drop to resize your content editor)

The editor will expand to the new size …

(Resized WordPress editor)

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

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 Writing Mode – Text Editor)

You can eliminate writing distractions by combining Distraction-Free writing and the built-in Full Screen option of web browsers like Google Chrome & Firefox …

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

With Distraction-Free Writing mode activated and the Full Screen feature of your browser enabled, the current page will fill the screen entirely, leaving you free to focus only on your content without any distracting page elements.

To use Full Screen in your web browser, refer to the image below …

(Google Chrome & Firefox Web Browsers – Full-Screen Feature)

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

(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 features in your Screen Options section)

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 …

(Writing Settings – Formatting)

🙂

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

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org