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 editor that does not require knowledge or coding experience to create professional-looking web pages with formatted text and embedded media quickly.

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

A Basic Guide To Content Formatting In WordPress

WordPress comes with an intuitive semi-WYSIWYG (What You See Is What You Get) visual 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 editor)

WordPress Visual Editor Menu Explained

If you have used a text editor like Microsoft Word, then the WordPress visual content editing interface should feel quite familiar to you …

(WordPress Visual Editor Menu Buttons)

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

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

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

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

4. Visual Tab – Clicking this tab lets you access the WYSIWYG (What You See Is What You Get) visual content editor.

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

(Text [HTML] Editor)

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

7. Italics – Highlight text and click this button to add italicized formatting to your words.

8. Strikethrough – Formats highlighted text with strikethrough.

9. Unordered list – Choose this item to turn your selected text into an unordered list, e.g.:

10. Ordered list – Choose this button to create 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 create a block quote. Just select the content section you would like highlighted in the block quote and click this 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. Divider Line. Choose this function to insert dividers into your content …

(Insert horizontal lines into your content)

13, 14 & 15. Alignment buttons – Click these buttons to align your page elements …

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 paste hyperlinks into your text (See “Inserting Hyperlinks Into WordPress Posts” tutorial for useful tips on using the hyperlink function).

17. Unlink. Click this button to delete hyperlinks.

18. Read More Tag. Click this menu button to insert a “read more” link wherever you have placed the 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 only displays to site visitors once they click the “read more” link …

(’Read More’ Tag)

The ‘Read More’ tag won’t work on WordPress Pages. It only works on the page showing your most recent blog posts (i.e. your 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).

(Enhanced Menu Mode)

20. Distraction-Free Writing Mode Toggle. Clicking this icon will toggle between distraction-free writing functionality & normal screen. 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)

When distraction-free writing mode is toggled on, your surrounding page elements return to the screen as soon as you move your mouse cursor outside the content area.

Refer to the “Tips” section further below for useful tips on using this function.

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

Notes:

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

(Heading Styles Drop-Down Menu)

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

23. Justify. Click this button to justify your content. Justification ”neatens” your paragraphs by ensuring that line ends are not “ragged” (as is the case when text is left-aligned by default).

24. Select Text Color. Highlight an area of text and choose a color from the pull-down palette to edit text color …

(Select Text Color)

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

(Custom Text Color Palette)

This gives you access to wide 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 custom color.

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

(HEX Colors [Web-Safe])

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)

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

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

27. Insert custom characters. Click this button to insert special characters like © ® ™ and many other symbols into your content.

(Insert symbols and custom characters into your content)

We have written a more detailed tutorial about using special characters in WordPress here:

28. Outdent – Clicking this menu item decreases indented text.

29. Indent – Click this button to increase indent size.

This is a sample of indented text.

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

30. Undo. Clicking this button undoes your previous commands. Click this if you accidentally delete content, or format text incorrectly and you would like to backtrack.

31. Redo. Clicking this button recovers any changes or deletions that you have undone.

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

Plugins can add extra items to your toolbar …

(Plugins can add new features to your editor)

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).

Useful Tips And Information

Tip #1 - Keyboard Shortcuts For Power Users

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

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

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

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

(WP v. 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 Into WordPress From Microsoft Word

MS Word and some other word processing applications store 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 messy code …

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

As WordPress continually improves its software, more of the technical wizardry that goes into integrating different platforms and making things work together “invisibly” will take place behind the scenes, allowing greater numbers of non-tech-savvy users to benefit from WordPress.

WordPress now ships with built-in support for pasting 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 Paste as text button and format it later.

Click on the Paste as text button …

(Paste as text menu toolbar button)

Clicking on the Paste as text button, displays the following notice …

(Paste as Text feature popup window)

Tip #3 – Clear Formatting Button

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

Before formatting is removed …

After …

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

Sometimes, you can’t tell if the content you’ve pasted from an external website contains formatting specific to that website …

(Content pasted from an external website …)

… until you see the code …

(… can include hidden CSS styling!)

If you’ve copied content from your own site, everything may look normal until you make a change to the styling (e.g. change your color scheme) and some of your previous content elements (e.g. links) have a different CSS style.

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

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

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

Next, select everything inside the content editor area and click on the Clear formatting button …

(WordPress Visual Editor – Clear formatting button)

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

(Removing formatting styles from your text)

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

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

Before using the Clear formatting feature, click on the Text editor tab, then select and copy everything to the clipboard …

(Copying formatted text in WordPress)

Paste the content from your clipboard into a new text file and save, then go back to your content editor and go through the “remove formatting” process. Now, if something were to go wrong, you have a backup copy of your content with all the original formatting intact.

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

Line returns are created by pressing the “Enter” key at the end of your paragraph …

(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 insert a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …

(Line 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 or keep different groups of text together in the same paragraph for styling purposes.

Tip #5 – How To Resize The WordPress Content Editor Box

By default, all newer versions of WordPress have the Full Height Editor feature turned on, providing users with a responsive and self-adjusting editor …

(WordPress has a responsive editor)

You can easily check if the Full Height Editor feature is enabled or not, by looking at one or more of the  following tell-tale signs:

(How to tell if the Full Height Editor function is turned on)

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

(Your content area should automatically resize as you type)

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

(Full Height Editor function disabled)

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

(Full Height Editor function disabled – Distraction-Free Writing Mode menu icon hidden)

If the 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 content editor to resize it …

(Resize your content editor using drag and drop)

Your editor will expand to the new size …

(Resized content editor)

Tip #6 – Using The Distraction-Free Writing Tool

Distraction-Free Writing mode requires that the full-height editor be 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)

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

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

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

To switch on Full Screen in the Firefox or Google Chrome web browser, refer to the picture below …

(Google Chrome & Firefox Browsers – Full-Screen Option)

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 WP dashboard screen) …

(Screen Options Tab)

In the Additional settings section, enable the full-height editor and distraction free functionality option …

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

Tip #7 – Converting Emoticons

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

(Formatting – Writing Settings)

🙂

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

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya