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 fully-featured editor that requires no knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.

In this tutorial, we show you how to use the WordPress Content Editor – what the menu buttons do, how to format content, and more!

A Basic Guide To Text Formatting In WordPress For Beginners

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

(WordPress visual content editor)

WordPress Visual Editor Buttons Explained

If you have used a word processing application like Microsoft Word, then the WordPress content editor interface will probably seem familiar to you …

(WordPress Visual Editor Menu Toolbar Buttons)

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

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

2. Permalink – Clicking on the Edit button changes the permalink text of your post or page. This is useful if you want to search optimize your post/page URL.

3. Add Media – Click the Add Media button to upload, manage and insert pictures, videos, audio, etc. into your post or page from your hard drive, an external URL, or from your website’s media library.

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

5. Text Editor Tab – Switch between the two editor tabs to add content in the WYSIWYG mode and make changes to the code. When adding content to the text tab, WordPress converts line breaks into paragraphs automatically …

(WP Text Editor Tab)

6. Bold – Highlight words in your text and click this button to add bold formatting.

7. Italics – Select this feature to make your words italicized.

8. Strikethrough – Add strikethrough formatting to your text.

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

10. Ordered list – Use this 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 functionality to create a block quote. Simply select the content you want displayed as a block quote and click this button.

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

12. Dividing Line. Select this button to insert a dividing line into your content …

(Add horizontal lines to your content)

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

13. Align Left

14. Align Center

15. Align Right

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

16. Insert/Edit Link. Click this button to insert hyperlinks into your text (See “How To Link Content Internally In WordPress” tutorial for useful tips on creating internal content links).

17. Unlink. Click this button to remove hyperlinks.

18. Read More Tag. Click this icon to insert a “read more” link 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 will only show to site visitors after they click on the “read more” link …

(’Read More’ Tag)

The ‘Read More’ tag does not work on WordPress Pages. It only works on the page showing your most recent blog post entries (i.e. your Blog Page).

19. Show/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 Enhanced Menu)

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

When distraction-free writing mode is enabled, all 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 in this tutorial for useful tips about using this functionality.

21. Format Style. This feature lets you add styling to selected text.

Notes:

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

(Heading Style Options)

22. Underline. Click this menu button to underline your words.

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

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

(Text Color Palette)

You can expand the selection of colors available in 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, 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 new custom color.

The table below shows the 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)

Refer to the “Tips” section below for more information on using this item.

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

27. Insert custom character. Click this button to add characters like © ® ™ and other characters and symbols to your content.

(Special character options)

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

28. Outdent – Click this menu button to remove text indentation.

29. Increase Indent – Clicking this button indents text.

This is a sample of indented text.

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

30. Undo. Click this button to undo your previous actions. Select this if you have accidentally deleted 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 display the Keyboard Shortcuts screen. This is covered in more detail in the Tips section further below.

Plugins can add extra options to your WordPress editor …

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

Useful Tips & Additional Info

Tip #1 - Keyboard Shortcuts For Power Users

In addition to using the buttons on the toolbar, you can use the key combinations below as you type. This will help you work 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> …

(WP 4.5 : Formatting Shortcuts – Backticks)

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

(WordPress 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 using an earlier version of WordPress than version 3.9, pasting content directly from Microsoft Word into the editor will add a bunch of unwanted HTML code …

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

The above is a good example of how WordPress continually improves its software, so that more of the “magic” required to make things work seamlessly together will take place behind the scenes, requiring users to become less and less technical-minded.

WordPress now offers built-in support for pasting content directly from Microsoft Word and other word processors. If the source content is not pasting cleanly, however, then try pasting it into your editor using the Paste as text button and format it afterwards.

Select the Paste as text menu button …

(Paste as text toolbar button)

Clicking on the Paste as text menu button, brings up the following notice …

(Paste as Text notice)

Tip #3 – Removing Formatting From Text

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

Before …

After …

This is great if, for example, you have pasted text from an external website that contains CSS formatting.

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

(Content pasted directly from an external website …)

… until you click on the Text tab and see the underlying HTML code …

(… can include unwanted CSS styling!)

If the content was copied from your own website or blog, everything may look fine until you make a change to the styling (e.g. change your color scheme) and discover that some of your previous content have a different CSS style.

For this reason, we recommend clearing the formatting from pasted content, especially if your content has been copied from other WordPress websites or blogs.

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

(Paste content with formatting into the WordPress visual editor)

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

(Clear formatting menu button)

All your formatting (such as bold, italicized text, colors, etc.) has been removed …

(Removing formatting styles from your content)

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

Here is a quick way to test and remove any errors that you suspect may be caused by poor formatting tags without losing your original content.

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

(Copying formatted text)

Open a new plain text file, paste the content from your clipboard into it and save, then return to your editor and go through the formatting removal process. Now, if something goes wrong, at least you have a backup copy with all the original content formatting intact.

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

As with most applications, a line return is 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 regular 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 …

(Adding single line spacing to content)

Breaks allow the formatting of your block of text to be carried over. This is useful if you want to add a line break to a bulleted section (without creating a new bullet point) or keep groups of text together in the same paragraph for styling purposes.

Tip #5 – Resizing The WordPress Visual Editor

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

(WordPress comes with a responsive content editor)

The quickest way to tell if the Full Height Editor function is active or not, is to look at the  following:

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

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

(The WordPress content box should automatically resize as you type)

If for some reason the Full Height Editor feature is inactive, the content editor scrollbar will display once your text exceeds the size of the text editor area …

(Full Height Editor function disabled – scrollbar visible)

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

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

If the Full Height Editor function is inactive, you can increase the size your text box using the text box resizing feature …

(Text Box Resizing Feature)

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

(Resize your text box using drag and drop)

Your text box will expand to the new size …

(Resized WordPress editor)

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

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

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

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

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

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

(Full-Screen Function – Google Chrome & Firefox)

To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click on the Screen Options tab (located in the top-right area of your WordPress admin 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)

Tip #7 – 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) screen …

(Formatting Options – WP Writing Settings)

🙂

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

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

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

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

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

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