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 rich built-in 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 comprehensive step-by-step tutorial, you are going to learn how to use the WordPress Visual Editor.

A Simple Guide To Content Formatting In WordPress For Beginners

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

(WordPress editor)

WordPress Visual Editor Menu Items Explained

If you have used a word processing application like MS Word, then the WordPress visual content editing interface should feel familiar to you …

(WordPress Visual Editor Menu Toolbar Buttons)

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

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

2. Permalink – Clicking on the Edit button changes your permalink. This function is useful if you would like to change the URL of your post or page.

3. Add Media – Clicking this button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your hard drive, an external URL, or from your site’s media library.

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

5. Text (HTML) Editor Tab – Switch between the Visual and Text tabs to add content in the WYSIWYG mode and make changes to its code. When entering content using the text tab, WordPress automatically converts line breaks into paragraphs …

(Text [HTML] Editor)

6. Bold – Highlight content and click this button to add bold formatting.

7. Italics – Select this button to make the words italicized.

8. Strikethrough – Add strikethrough formatting to your text.

9. Unordered list – Use this item to turn your selected text into an unordered list like the example below:

10. Ordered list – Turns your content into an ordered list, e.g.:

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

11. Blockquote. Choose this functionality to create a block quote. Select the text you would like to display as a blockquote and click the menu button.

To exit the quote 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. Dividing Line. Click this menu item to add horizontal lines to your content …

(Add a dividing line to your content)

13, 14 & 15. Alignment buttons – Click these buttons to left, center and right align your text …

13. Align Left

14. Align Center

15. Align Right

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

16. Insert/Edit Link. Click this button to add hyperlinks to your content (See “Inserting Internal Content Hyperlinks Into Your WordPress Content” tutorial for useful tips on creating internal links).

17. Unlink. Click this button to delete hyperlinks.

18. ’Read More’ Tag. Click this menu item to insert a “read more” tag into your content wherever you have placed your cursor. Content added to a post prior to the insertion of this tag will display when published, but anything added to the post after this tag only displays to visitors after they click on the “read more” link …

(’Read More’ Tag)

The ‘Read More’ tag won’t work on WordPress Pages. It only works on the page that shows your most recent posts (i.e. the Blog Page).

19. Enhanced Menu Mode. 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. Clicking this button will toggle between distraction-free writing screen & normal writing mode. This is handy for checking the placement of items on the page and for working on your content without the distracting presence of surrounding page elements …

(Distraction-Free Writing Mode Button)

With distraction-free writing mode toggled on, the surrounding page elements return when the cursor is moved 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. This feature lets you format text.

Notes:

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

(Format Styles)

22. Underline. Highlight a section of text and click this button to add underline formatting.

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

24. Select Text Color. Highlight a section of text and choose a color from the drop-down palette to edit your text color …

(Color Palette)

You can add new colors to the 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, 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 slider to add a custom color.

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

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

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

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

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

(Special character options)

For more information about adding special characters to WordPress, visit this tutorial:

28. Outdent – Clicking this menu button decreases indented text and returns text to left alignment on the page.

29. Indent – Clicking this button adds indentation.

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 actions. Click this if you have accidentally deleted a section of text or formatted text incorrectly and need to revert to a previous state.

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

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

After installing certain WordPress plugins you may see new menu features displayed in the toolbar …

(Plugins can add new buttons to your 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).

Tips And Additional Info

Tip #1 - Use Power User Shortcuts

In addition to using the buttons in the menu, you can use the power key combinations below as you type. This can help you work faster …

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

(Formatting Shortcuts)

Add 3 horizontal dashes to insert 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 …

(Formatting Shortcuts)

To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

Tip #2 – Pasting Content From Microsoft Word

MS Word and some other content editors can contain 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 editor will introduce unwanted code into your content creating formatting errors …

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

As WordPress continues to improve its software, more of the technical work required to integrate different platforms and make things work together “invisibly” will take place behind the scenes, freeing up greater numbers of non-tech-savvy users to benefit from using WordPress.

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 editor as plain text and format everything afterwards.

Click on the Paste as text menu toolbar button …

(WordPress Editor – Paste as text toolbar button)

When you turn on the Paste as text menu button, the following window comes up, informing you that the feature will remain turned on until you toggle this option off …

(Paste as Text feature message window)

Tip #3 – Using The Clear Formatting Button

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

Before removing formatting …

After …

This is great if, for example, you have pasted a block of content from an external website that contains CSS styling formatting.

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

(Content pasted from an external website …)

… until you click on the Text tab and see its HTML …

(… may include incompatible CSS styling!)

If the content was sourced from your own website, 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 content elements (e.g. links) have a different CSS style.

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

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

(Paste content with formatting 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, italicized text, colors, etc.) has been removed …

(Remove formatted text from your content)

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

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

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

(Copying formatted text)

Open a new plain text file, paste the content from your clipboard into it and save, then return to your content 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 preserved.

Tip #4 – How To Add Line Break Returns To Text

A line return is created by pressing the “Enter” key at the end of your paragraph …

(Line spaces)

When you hit the “Enter” key to add spacing between lines of text, WordPress adds a regular 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 …

(Single line spacing)

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 the same style going in a different text block.

Tip #5 – Resizing The WordPress Text Editor Box

By default, the Full Height Editor function is enabled, providing users with a responsive and auto-adjustable content editor …

(WordPress includes a built-in responsive content editor)

You can tell if the Full Height Editor feature is active or not, by looking at either of the  following tell-tale signs:

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

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

(Your content area should automatically resize as you type)

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

(Full Height Editor feature disabled)

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

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

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

(Text Box Resizing Tool)

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

(Drag and drop to resize your editor)

The text box will expand to the new size …

(Resized WordPress editor)

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

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

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

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

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

To switch on Full-Screen either Firefox or Google Chrome, refer to the screenshots 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 …

(Screen Options Tab)

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

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

Tip #7 – How To Convert Emoticons

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

(Writing Settings – Formatting)

🙂

Congratulations, now you know how to use 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

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

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