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 it easy to publish and format content online by providing users with a fully-featured editor that requires no knowledge or coding experience to create professional-looking web pages with formatted text and embedded media quickly.

In this step-by-step tutorial, you will learn how to use the WordPress Visual Editor – what the menu toolbar items do, how to format content, and more!

A Simple Guide To Content Formatting In WordPress For Beginners

WordPress comes with an easy-to-use semi-WYSIWYG (What You See Is What You Get) visual editor that enables you to easily add, edit and format text, create hyperlinks, add images and media to your posts and pages, and so much more, with a few clicks …

(WordPress editor)

WordPress Visual Editor Menu Explained

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

(WordPress Visual Editor Menu Toolbar)

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

1. Title Area – Here’s where you type in your post or page title.

2. Permalink – Click on the Edit button to change your post permalink. This function is useful if you would like to improve your post/page SEO.

3. Media Manager – Clicking the Add Media button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your own hard drive, an external storage location, or from your website’s media library.

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

5. Text Tab – Switching between the two editor tabs allows you to add content in the WYSIWYG mode and then make changes to the code. When entering content using the text tab, line breaks are automatically converted to paragraphs …

(Text Editor Mode)

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

7. Italics – Select text and click this menu button to make the words italicized.

8. Strikethrough – Formats selected text with strikethrough.

9. Unordered list – This button turns your selected text block into an unordered list like the example below:

10. Ordered list – Click this menu button to turn your selected content into an ordered list, e.g.:

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

11. Block Quote. Select this menu item to create a block quote. Simply select the text you would like displayed 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 block quote button again and this will end the command and return your text to standard formatting.

12. Divider Line. Select this feature to insert a horizontal line into your content …

(Add a divider to your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to left, center and right align page elements …

13. Align Left

14. Align Center

15. Align Right

Press the “Enter” key and leave a line of space to end your alignment formatting.

16. Insert/Edit Link. Use this button to add hyperlinks to your content (See “Adding Links In Your WordPress Content” tutorial to learn more about creating internal links).

17. Unlink. Select the text you want to unlink and choose this button to remove the hyperlink.

18. ’Read More’ Tag. This feature adds a “read more” tag into your content wherever you have placed your cursor. Text added to a post prior to inserting this tag will display when published, but content added to the post after this tag only displays to visitors once they click on the “read more” link …

(’Read More’ Tag)

The ‘Read More’ tag doesn’t work on WordPress Pages. It is only used on the page displaying your latest entries (i.e. your Blog Page).

19. Display/Hide Kitchen Sink. 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)

20. Distraction-Free Writing. Click this item to toggle between distraction-free writing mode & 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)

With distraction-free writing mode toggled on, your surrounding page elements return to the screen as soon as the cursor is moved outside the boundaries of the content editor.

Refer to the “Tips” section further below for more details on using this function.

21. Format Style. Use this feature to format selected text.

Notes:

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

(Heading Styles Drop Menu)

22. Underline. Highlight words in your text and click this button to add underline formatting.

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

24. Select Text Color. Highlight a section of text and select a color from the palette in the drop menu to change the color of your selected text …

(Text Color Palette)

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

(Custom Color Palette)

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 add a custom color.

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

(Common HEX Color Codes)

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 below for more tips about using this feature.

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

27. Custom characters. Click this button to insert characters like © ® ™ and a bunch of other custom characters and symbols into your content.

(Special character options)

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

28. Decrease Indent – Clicking this button removes text indentation and returns text to left alignment on the page.

29. Increase Indent – Clicking this button indents one or more lines of text to the right.

This is a line 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. This is useful if you have accidentally deleted text or formatted content incorrectly and you would like to backtrack.

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

32. Keyboard Shortcuts. Click this button to bring up the Keyboard Shortcuts feature. This is covered in more detail in the Tips section below.

Plugins can add extra options to your WordPress editor …

(Plugins can add extra buttons to your WordPress content 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 & Information

Tip #1 - Power User Keyboard Shortcuts

In addition to using the menu buttons in your Visual Editor toolbar, you can use the key combinations below as you type. This will help create and format your content 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 WordPress version 4.5 you can now also use formatting shortcuts for horizontal lines and code …

(Formatting Shortcuts)

Add three horizontal dashes to insert a horizontal line and enclose your text in backticks to turn your highlighted text into <code> …

(WP 4.5 : 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 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 code …

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

As WordPress continues to improve with every new release, more of the work required to seamlessly integrate content from different platforms will take place behind the scenes, requiring users to become less and less technical-minded.

Versions newer than WP 3.9 now come 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 into your editor using the Paste as text button and format it afterwards.

Click on the Paste as text menu toolbar button …

(Paste as text menu button)

When you click on the Paste as text feature, the following notification appears …

(Paste as Text feature popup message)

Tip #3 – Clear Formatting Menu Button

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

Before formatting is removed …

After …

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

Sometimes, you can’t tell if content sourced and pasted from an external site contains formatting specific to that site …

(Content pasted from an external website …)

… until you see its code …

(… can include hidden CSS styling!)

If you’ve copied the content from your own site, things may look normal until you make a change to the styling (e.g. change your color scheme) and discover that some of your earlier content elements contain incorrect formatting.

For this reason, we recommend removing the formatting from pasted content, especially from content sourced from other sites.

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

(You can paste content with formatting into the visual editor)

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

(WordPress Editor – Clear formatting button)

All your formatting (such as bold, italics, etc.) is now removed …

(Formatting removed)

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

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

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

(Copying formatted text in WordPress)

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

Tip #4 – Adding Line Break Spacing To Your Content

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

(Line spaces)

When you hit the “Enter” key to add spacing between lines of text, WordPress adds a normal paragraph ending tag (</p>) to your content’s code. To insert 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 your text to be carried over. This is useful if you want to add line breaks to a bulleted section (without creating a new bullet point) or keep different groups of text together in the same paragraph for styling purposes.

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

By default, WordPress has the Full Height Editor function turned on, providing users with a responsive and auto-adjustable editor …

(WordPress includes a responsive editor)

You can quickly tell whether the Full Height Editor feature is active or not, by looking at one or more of the  following:

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

When the full height editor feature is enabled, the WordPress editor area should automatically expand to accommodate your writing …

(Your content area automatically resizes as you type)

If the Full Height Editor function is disabled, you will see the editor scrollbar appear once your typing exceeds the text area …

(Full Height Editor function disabled – scrollbar visible)

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

(Full Height Editor function disabled – Distraction-Free Writing Mode function not visible)

If the Full Height Editor function is disabled, you can resize your text box using the 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 …

(Resize your text box using drag and drop)

Your editor will expand to the new size …

(Resized editor)

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

Distraction-Free Writing 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)

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

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

With Distraction-Free Writing mode turned on and the Full-Screen feature of your web browser enabled, the current page will completely fill the screen, leaving you free to focus only on your writing.

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

(Full-Screen Option – Google Chrome & Firefox)

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

(Screen Options Tab)

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

(Enable full-height editor and distraction-free features in your Screen Options section)

Tip #7 – Convert Emoticons

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

(Formatting Options – Writing Settings)

🙂

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

***

"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com