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 images quickly.
In this tutorial, you are going to learn how to use the WordPress Visual Content Editor.
A Basic Guide To Formatting Text In WordPress
WordPress provides a semi-WYSIWYG (What-You-See-Is-What-You-Get) visual editor for creating and editing posts and pages …
WordPress Visual Editor Menu Explained
If you have used a content editing application like MS Word, then the WordPress content editor interface will probably feel quite familiar to you …
(WordPress Visual Editor Menu Items)
Here is a brief description of each of the visual editor menu toolbar items shown in the screenshot above:
1. Post Title Field – Here’s where you enter your post/page title.
2. Permalink – Click on the “Edit” button to change your permalink. This is useful if you would like to search optimize your post URL.
3. Media Manager – Clicking this button lets you upload, manage and insert media into your post or page from your own hard drive, an external URL, or from your site’s media library.
4. Visual Tab – Click to access the WYSIWYG (What You See Is What You Get) editor.
5. Text (HTML) Tab – Switch between the editor tabs to add content in the WYSIWYG mode and make changes to the code. When entering content using the text tab, line breaks are converted into paragraphs automatically …
(WP Text [HTML] Editor Mode)
6. Bold – Select content and click this button to add bold formatting.
7. Italics – Highlight words and click this button to add italicized formatting.
8. Strikethrough – Add
strikethrough formatting to your selected content.
9. Unordered list – Turns your selected text block into an unordered list like the example below:
- List item 1
- List item 2
- List item 3
- etc …
10. Ordered list – Turns your text into an ordered list, e.g.:
- List item 1
- List item 2
- List item 3
- etc …
11. Blockquote. Choose this feature to create a block quote. Select the content section you want to show up in the blockquote and click the 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 standard formatting.
12. Divider Line. Click this menu button to add a horizontal line to your content …
(Add dividing lines to your content)
13, 14 & 15. Alignment buttons – Use these buttons to left, center and right align your 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. Use this button to add a hyperlink to your text (See “Linking Content In WordPress Posts & Pages” tutorial to learn more about creating internal links).
17. Unlink. Select the text you would like unlinked and choose this button to remove the hyperlink.
18. ’Read More’ Tag. Click this menu item to insert a “read more” link wherever you have placed the 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 appears to 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 posts (i.e. the Blog Page).
19. Toolbar Toggle. Click this button to toggle the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).
(Enhanced Menu Toolbar)
20. Distraction-Free Writing. Clicking this item will toggle between distraction-free writing screen & normal mode. This is useful for checking the placement of items on the page and for working on your content free of other page element distractions …
(Distraction-Free Writing Mode Toggle Button)
When distraction-free writing functionality is toggled on, all surrounding page elements return to the screen when you move your mouse cursor outside the boundaries of the content editor.
Refer to the “Tips” section further below for useful tips about using this function.
21. Format Style. Use this feature to format your text.
- Depending on your website’s theme, the style drop menu may include various headings and other pre-defined styles.
- When you create a new post and begin typing into the content area, the text will typically be formatted using the default “Paragraph” style.
- Modifying heading formatting styles typically require having knowledge of editing CSS (Cascading Style Sheets).
To create a heading, highlight your text and choose a style from the drop-down menu (e.g. Heading 3) …
(Heading Style Options Dropdown Menu)
22. Underline. Select your text and click this menu button to underline your words.
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 aligned left by default).
24. Text Color. Highlight your text and select a color from the palette in the pull menu to edit text color …
You can add new colors to the palette by clicking on the Custom area …
(Custom Color Palette)
You will then have access to an almost limitless palette 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 color slider to add a 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 correctly across most monitor screens) …
(Commonly Used 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 in the next section of this tutorial for more tips on using this functionality.
26. Remove formatting. If you detect unnecessary formatting codes in your text (or if your content isn’t displaying as you expected after your post or page has been published), then select all text and click this button to clear all page formatting.
27. Insert special character. Click this button to add characters like © ®
(Add symbols and custom characters to your content)
For more information about using special characters in WordPress, visit this tutorial:
28. Decrease Indent – Clicking this button removes indented text.
29. Indent – Clicking this menu item adds indentation.
Here’s a line of indented text.
To keep indenting text, press the Increase Indent button more than once.
30. Undo. Click this button to undo your previous actions. Click this if you accidentally delete content, or format content incorrectly and need to revert to a previous state.
31. Redo. Clicking this button reinstates any changes or deletions that you have made.
32. Keyboard Shortcuts. Click this button to see the Keyboard Shortcuts screen. This is covered in more detail in the Tips section further below.
After installing new plugins you may see new options added to the WordPress content editor menu …
(Plugins can add extra 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).
Useful Tips & Information
Tip #1 - Use Keyboard Shortcuts
As well as using the buttons on the toolbar, you can use the power 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 version 4.5 you can now also use formatting shortcuts for horizontal lines and code …
Add 3 horizontal dashes to create a horizontal line and enclose your text in backticks to turn your highlighted text into <code> …
(Formatting Shortcuts – Backticks)
The formatting shortcuts for horizontal lines and code are shown below …
(WordPress version 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 From Microsoft Word
Microsoft Word and some other word processors (e.g. Open Office) 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 editor will introduce unnecessary 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.)
The above is a good example of how WordPress continually improves its software, so that more of the work of integrating different platforms can take place “magically” behind the scenes, freeing greater numbers of non-tech-savvy users to benefit from WordPress.
WordPress now lets you paste 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 as plain text and format it afterwards.
Click on the Paste as text menu button …
(Paste as text toolbar button)
Toggle on the Paste as text menu button and the following reminder appears …
(Paste as Text message window)
Tip #3 – Clear Formatting Toolbar Button
You can paste formatted content and then remove the formatting inside the WordPress Visual editor.
Before removing formatting …
This is a useful feature if, for example, you have pasted text directly from another website containing CSS styling formatting.
Sometimes, you cannot tell that content sourced and pasted from another site contains formatting specific to that site …
(Content pasted directly from an external website …)
… until you click on the Text tab and see its underlying code …
(… may contain hidden styles!)
If you’ve copied content from your own website, things may look fine until you make a change to the styling (e.g. change the color scheme) and some of your old blog posts contain old formatting.
For this reason, it’s a good idea to clear the formatting from pasted content, especially from content sourced from other websites or blogs.
To remove formatting from your content, paste your formatted content into the Visual editor …
(Paste pre-formatted content into the WordPress visual editor)
Next, select everything inside the content editor section and select the Clear formatting button …
(WordPress Editor – Clear formatting toolbar button)
All your formatting (such as bold, italics, etc.) is now removed …
(Remove formatted text from text)
Note that some content elements will not be removed from your text after applying this feature. This includes hyperlinks, blockquotes, etc.
Here is a quick 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, switch over to the Text editor tab, then select and copy all of your text to the clipboard …
(Copying formatted text)
Open a new text file, paste the content from your clipboard into it and save, then return to your editor and complete the formatting removal process. Now, if something goes wrong, you have a backup copy with all the original content formatting preserved.
Tip #4 – How To Add Line Break Returns To Your Content
Line returns are created by pressing the “Enter” key after typing text …
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 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 enable 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 the same style going in different text blocks.
Tip #5 – Resizing The WordPress Visual Text Editor Box
By default, the Full Height Editor function is turned on, providing users with a responsive and self-adjusting editor …
(WordPress has a responsive content editor)
You can quickly check if the Full Height Editor feature is active or not, by looking at one or more of the following:
- If you can see the Distraction-Free Writing button, then the Full Height Editor function is active,
- If you cannot see the editor scrollbar, then the Full Height Editor feature is on …
(How to tell if the Full Height Editor function is enabled)
With the full height editor feature enabled, the content editor should automatically expand to accommodate your writing …
(The WordPress content box automatically expands as you type)
If the Full Height Editor function is inactive, you will see the editor scrollbar once your content exceeds the text area …
(Full Height Editor feature disabled)
Additionally, you will not see the Distraction-Free Writing Mode function the Distraction-Free Writing function will not show up in the Visual Editor …
(Full Height Editor feature disabled – Distraction-Free Writing Mode feature hidden)
If the Full Height Editor feature has been disabled, you can adjust the size your text box using the resizing feature at the bottom right-hand corner of the editor tool …
(Text Box Resizing Feature)
Simply click and drag the text box to resize the content editor …
(Resize your content editor using drag and drop)
The editor will expand to the new size …
Tip #6 – Using The Distraction-Free Writing Mode
Distraction-Free Writing mode requires that the full-height editor 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 Mode – Text Editor)
To eliminate all distractions try combining the Distraction-Free writing tool & the built-in Full Screen feature of browsers like Google Chrome & Firefox …
(Distraction-Free Writing – WordPress Only vs WordPress & Full Screen Browser)
With Distraction-Free Writing mode turned on and the Full Screen option of your web browser enabled, your current page completely fills the screen, leaving you free to focus only on your content.
To enable Full-Screen in your browser, open your browser settings and click on the buttons shown below …
(Full-Screen Function – Google Chrome & Firefox Web Browsers)
To enable both the Full Height Editor and Distraction-Free Writing Mode functionalities, click on the Screen Options tab …
(Screen Options Tab)
In the Additional settings area, select Enable the full-height editor and distraction free functionality …
(Enable full-height editor and distraction-free features)
Tip #7 – Convert 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) area …
(WordPress Writing Settings – Formatting Options)
Congratulations, now you know how to use the visual 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