The WordPress visual editor is the window you’ll use to input content for every single post and page on your website. It looks a little something like this:
If you have a WordPress website, you’re going to be seeing a lot of this editor, so you might as well learn how to use it…and use it right.
The WordPress visual editor is fairly intuitive, making it easy to fumble your way through without any formal training. Most people can manage to input their text and bold a few words, and most of the time it ends up looking okay. But you’re selling yourself short by not learning all of the tools built into this powerful editor.
So, let’s start by getting acquainted.
WordPress Visual Editor vs. Text Editor
You’ll notice two tabs at the top of the editor: visual and text. These toggle between the visual editor and the text editor. You can use either one when creating pages and posts.
The visual editor is the default mode. It works similarly to a word processor and lets you format your content with toolbar buttons like bold or italicize. You’ll sometimes see the visual editor referred to as WYSIWYG, which stands for “What You See Is What You Get.” It’s called this because you can see the formatting within the editor.
On the other hand, the text editor displays your content in HTML. The text editor does not have the same formatting options as the visual editor. It’s less intuitive but can be useful for creating advanced page layouts or for embedding media from other sources. I would not recommend using the text editor if you’re not familiar with HTML.
Most likely, you’ll find yourself doing the bulk of your content editing in the visual editor, so that’s what we’ll be focusing on.
The Toolbar
Initially, the visual editor will only show one row of icons. Click the Toolbar Toggle button () to show the second row of icons.
Bold — Bold highlighted text.
Italic — Italicize highlighted text.
Strikethrough — Add a strikethrough to highlighted text.
Unordered List — Create a bulleted list. You can highlight an entire list and then click to add bullets. You can also click the icon to begin a list and enter your content bullet by bullet. Use the return key to create a new bullet. When your list is finished, click the icon again to end the list. Now you can press enter and return to default formatting.
Ordered List — Create a numbered list. You can highlight an entire list and then click to add numbers. You can also click the icon to begin a list and enter your content number by number. Use the return key to add a new numbered item. When your list is finished, click the icon again to end the list. Now you can press enter and return to default formatting.
Blockquote — Use to display a quote. Every theme styles blockquotes differently. Font size may be increased, text may be indented, alignment may change, etc. This style applies to full blocks of text, not just strings of words. Even if you highlight just a few words, the formatting will apply to the entire paragraph.
Horizontal Line — Use to insert a horizontal line. This can be used to separate sections of a page.
Align Left — Align highlighted text to the left.
Align Center –Align highlighted text in the center.
Align Right –Align highlighted text to the right.
Insert/Edit Link — Link highlighted text to another page, post, or website. See below for more details.
Remove Link — Remove link from highlighted text.
Insert Read More Tag — Insert the <!–more–> tag into a post. This tool is only useful for posts, not pages.Most blogs only show an excerpt of a post. You have to click the title or a “read more” link to see the full post. The<!–more–> tag lets you manually define the excerpt. Everything before the tag is used as the excerpt.
Toolbar Toggle — Click this to show or hide the second row of icons (also called the Kitchen Sink) in the toolbar.
Distraction Free Writing — Click this to expand the editor to fill the entire browser window.
Style Dropdown — Define paragraphs and headings within your page/post. See below for more details.
Underline — Underline highlighted text.
Justify — Align highlighted text on the left and the right.
Text Color — Change the color of highlighted text. Click this button to display a dropdown of color choices.
Paste as Test — If you copy and paste text from another web page, the visual editor will copy the formatting from that web page as well. To avoid this, click the Paste as Text button before pasting your text into the editor.
Clear Formatting — Remove all formatting (bold, italic, underline, etc.) from highlighted text.
Special Character — Easily add special characters, like copyright (©) or trademark (™) symbols. Click this button to display a popup with a list of all available characters. Select a character and it will automatically be inserted into the editor.
Decrease Indent — Remove indenting on a highlighted block of text.
Increase Indent — Indent a highlighted block of text.
Undo — Undo your last action.
Redo — Redo your last action.
Keyboard Shortcuts — Click this to display a popup of keyboard formatting shortcuts.
There may be additional icons in the toolbar if you have plugins activated. If you’re not sure what they do, you can hover over them. The tooltip text should give you an idea of what it does.
Inserting and Editing Links
Highlight the text you want to link, then click on the “add link” icon in the toolbar. This will open a popup box with several options.
Enter the Destination URL
If you are creating a link to another website or if you know the URL that you want to link to, you can manually enter the details using the fields at the top of the window.
- URL — Paste the url of the webpage you want to create a link to.
- Title — This text displays in the tooltip when you hover over the link.
- New Window / Tab — By default, a clicking a link will open it in the same window. This works well if you are linking to other pages or posts on your own website. If you are linking to a page on another website, you can set the link to open in a new browser window or tab. This keeps your website open in a separate window or tab. Opening a link in a new window/tab is also helpful if you are linking to a file, such as a .pdf document.
When you’re done, click “add link” to insert the link into the post/page.
Link to Existing Content
If you want to link to a post or page on your own site, skip the steps above and use this option instead. You may need to click “or link to existing content”, to display a search box and a list of your posts and pages. The list will display your most recently published content first. You can scroll through and select a post or page directly from the list. If you have a lot of posts/pages or you’re looking for an older post/page, you can use the search box to filter the list.
When you select a post/page, the URL and Title fields will be automatically populated. You can still choose whether to open the link in a new window/tab. However, if when linking to posts/pages on your own website, it’s best to leave this unchecked. Then click “add link” to insert the link.
Style Dropdown
The style dropdown is for applying styles to whole paragraphs or blocks of text. Whereas you can highlight a single word and make it italic, the styles in this dropdown will apply to the entire chunk of text. Even if you highlight just a few words, the formatting will apply to the entire paragraph.
Paragraph
Paragraph is the default style. It is the normal body text style that is used on your website. Since this is the default style within the visual editor, you won’t have to use this often. However, it’s useful if you apply a style to a chunk of text and then decide to change it back to the paragraph style.
Heading 1, 2, 3, 4, 5, 6
Headings allow you to set titles and subtitles within your posts and pages. Aside from creating visual importance for your reader, heading are important for search engines, because they tell the search engine what the page is about and what the most important phrases are. The number signifies importance. Heading 1 is the most important, followed by Heading 2, Heading 3, and so on. Generally, themes are styled to make headings larger, bolder, and/or a different color than the default paragraph text. Usually the number correlates to the size of the heading, with Heading 1 being the largest and boldest. In most themes, Heading 1 is reserved for the title of your post/page and should not be used within the editor. Start your headings with Heading 2 and work your way down the list. In this post, “Style Dropdown” is a Heading 2, while “Paragraph,” “Heading 1, 2, 3, 4, 5, 6”, and “Preformatted” are Heading 3.
Preformatted
Honestly, I doubt that you will ever use this style. I’ve never used this style. If you’re curious, this style will display the text EXACTLY as it was entered. Normally, WordPress will wrap text. When it gets to the end of one line and runs out of space, it automatically creates another line. Preformatted text doesn’t do that. If you don’t press the return button to create a new line the text will run on and on until eventually runs off the side of the page. This style is pretty rarely used except to display code. I promise, it’s safe to ignore this one.
Well, that’s about it! There are a lot features packed into this tiny editor, but I think they’re pretty easy to use once you learn them. Are there any formatting options that still confuse you? Is there an icon that just doesn’t do what you’d expect?
Leave a Comment