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

In this comprehensive step-by-step tutorial, we show you how to use the WordPress Visual Content Editor – what the menu toolbar buttons do, how to format your content, plus tips and practical information to help you get the most out of the WordPress content editor!

A Simple Guide To Content Formatting In WordPress For Beginners

WordPress provides a WYSIWYG (What-You-See-Is-What-You-Get) content editor for creating and editing your posts and pages …

(WordPress WYSIWYG editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

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

(WordPress Visual Editor Menu)

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

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

2. Permalink – Click on the Edit button to change your permalink. This is useful if you want to improve your SEO.

3. Media Manager – Click the Add Media button to 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 site’s media library.

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

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

(Text Editor)

6. Bold – Select this menu button to make your words bold.

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

8. Strikethrough – Formats selected text with strikethrough.

9. Unordered list – Click this item to create an unordered list, e.g.:

10. Ordered list – Turns your text into an ordered list like the example below:

  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. Just select the section of text you want to include in the block quote and click this menu button.

To exit the quote press the “Enter” key to create a line of space and then click the blockquote button again and this will return your text to standard formatting.

12. Divider Line. Click this item to insert horizontal lines into your content …

(Insert a dividing line into your content)

13, 14 & 15. Left, Center and Right align buttons – Click these buttons to left, center and right align 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. Click this button to paste hyperlinks into your content (See “How To Link Content Internally In WordPress” tutorial to learn more about using the hyperlink function).

17. Unlink. Highlight the text you would like unlinked and choose this button to remove the hyperlink.

18. ’Read More’ Tag. Clicking this button will insert a “read more” link into your 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 display to site visitors once they click the “read more” link …

(’Read More’ Tag)

The ‘Read More’ tag does not work on WordPress Pages. It is only used on the page displaying your latest post 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).

(Display/Hide Kitchen Sink)

20. Distraction-Free Writing. Click this button to toggle between distraction-free writing mode & normal screen. This is handy for checking the placement of items on the page and for working on your content without distracting page elements …

(Distraction-Free Writing Functionality)

When distraction-free writing functionality is enabled, all surrounding page elements return to the screen when you move the mouse cursor outside of the content box.

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

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

Notes:

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

(Style Options)

22. Underline. Select this button to underline the words.

23. Justify. Clicking this button justifies the paragraph where your mouse cursor has been placed or text selected. Justification can only be applied to a block of text.

24. Text Color. Highlight text and select a color from the options in the drop menu to replace text color …

(Color Palette)

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

(Custom Text Color Palette)

You will then have access to wide choice of colors. If you are familiar with the Hexadecimal (HEX) color system, 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 color slider to add a new custom color.

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

(HEX Color Codes [Web-Safe])

25. Paste as Plain 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)

See the “Tips” section below for useful information on using this item.

26. Clear formatting. Use this feature to clear all content formatting if you find unwanted codes in your content (or if your content isn’t displaying as you expected after your post or page has been published).

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

(Add symbols and special characters to your content)

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

28. Decrease Indent – Click this menu item to outdent text.

29. Increase Indent – Click this button to increase indentation.

Here’s a sample of indented text.

To keep indenting text, press the Indent button more than once.

30. Undo. Click this button to undo your previous actions. This is useful if you have accidentally deleted content or formatted content incorrectly and need to backtrack.

31. Redo. Clicking this button restores a change or deletion that you have made.

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

After installing certain WordPress plugins you may see extra items added to the WordPress content editor menu …

(Plugins can add extra features to the menu 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).

Content Editor Tips And Useful Information

Tip #1 - Keyboard Shortcuts For Power Users

As well as using the menu buttons in the toolbar, you can use the key combinations below as you type. This will help you get work done 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 4.5 you can now also use formatting shortcuts for horizontal lines and code …

(WP version 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> …

(WordPress v. 4.5 : Formatting Shortcuts – Backticks)

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

(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 (e.g. Open Office) store 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 editor will introduce unwanted HTML code into your content resulting in 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 work required to integrate content from different platforms and make things work together “invisibly” will happen behind the scenes, requiring users to become less and less technical-minded.

Versions newer than WP v. 3.9 now offer built-in support for pasting content directly from Microsoft Word and other word processors. If you find that your content is not pasting cleanly, however, then try pasting it in using the Paste as text button and format it later.

Select the Paste as text menu button …

(Paste as text menu button)

Turn on the Paste as text menu button and the following reminder pops up …

(Paste as Text feature notification)

Tip #3 – Clear Formatting Toolbar Button

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

Before formatting removal …

After …

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

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

(Content pasted from an external website …)

… until you see the HTML code …

(… may contain hidden styles!)

If the content was sourced from your own site, everything may look normal until you make a change to the styling (e.g. change the color scheme) and discover that some of your previous blog posts have been formatted incorrectly.

For this reason, we recommend removing the formatting from pasted content, especially if your content has been copied from other WordPress 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 and select the Clear formatting button …

(WordPress Visual Editor – Clear formatting menu button)

All formatting (such as bold, italics, etc.) has been removed …

(Formatting removed)

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

Here is a quick way to test and remove any 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 everything to the clipboard …

(Copying formatted text in WordPress)

Paste the content from your clipboard into a new plain text file and save, then go back to your editor and complete 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 Your Content

As with most applications, line returns are created by pressing the “Enter” key at the end of your paragraph …

(Line spaces)

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

(Adding single line spaces to content)

Breaks allow the formatting of your text to be carried over. This is useful if you want to add a line break to bulleted sections or keep the same style going in a different text block.

Tip #5 – How To Resize The WordPress Content 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 built-in responsive content editor)

You can check whether the Full Height Editor feature is turned on or not, by looking at the  following tell-tale signs:

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

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

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

If the Full Height Editor feature has been disabled, you will see the editor scrollbar once your typing exceeds the visible space inside your editor …

(Full Height Editor feature disabled)

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

(Full Height Editor function disabled)

If your Full Height Editor feature is disabled, you can enlarge your text box using the resizing feature at the bottom right-hand corner of the editor tool …

(Text Box Resizing Tool)

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

(Resize your editor using drag and drop)

The text box will enlarge to the new size …

(Resized editor)

Tip #6 – Using The Distraction-Free Writing Mode

Distraction-Free Writing functionality requires that the full-height editor 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 Mode – Text Editor)

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

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

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

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

(Full-Screen Option – Google Chrome & Firefox)

To enable either the Full Height Editor or Distraction-Free Writing Mode feature, click on the Screen Options tab …

(Screen Options Tab)

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

(Enable full-height editor and distraction-free features)

Tip #7 – How To Convert Emoticons

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

(WordPress Writing Settings – Convert Emoticons)

🙂

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

***

"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

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

How To Create Engaging Presentations

Learn how to create beautiful and engaging presentations that will help you sell more products and services online.

More info: How To Create Engaging Presentations

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

WordPress SEO

In this WordPress SEO training series you will learn how to optimize your WordPress site and how to craft website pages and blog posts that will help you get better search engine rankings and improve your traffic results.

More info: WordPress SEO