The Post 103

Using the Visual Editor

In this WordPress video tutorial we learn how to use WordPress’ Visual editor — a very useful tool for most WordPress users, particularly those who are not familiar with HTML. The WordPress visual editor can be a great tool for spicing up content, adding styles, media, and more.

Related Links:
WordPress Keyboard Shortcuts for the Visual Editor

WordPress Tutorial Transcript

Hello and welcome to LifeGuard. In this video, we’re going to talk about Using the Visual Editor. The visual editor is the interface that let’s you control the look and feel of your content. You’ll notice there are two options for editing your content: ‘Visual’ and ‘HTML’. We’re going to cover the ‘Visual’ editor which should be activated by default. The ‘HTML’ tab is only needed if you want to manually edit your markup.

Let’s start with the first option, ‘Bold’. To format your text, simply select the text you wish to edit and click the Bold icon. Pressing it again removes the formatting. You can also use command or control ‘B’ on your keyboard to set the selected text to bold. The same works for the ‘Italic’. Just select the text you want, and click the ‘Italic’ icon. You can also use command or control “I’ on your keyboard to set the selected text to italic.

The next icon has ‘ABC’ with a line through it. This lets you create strikethrough text.

Next, we have the bullet list icon. You can click it to start a new list, or you can select an existing text to give it bullets. You can have the list either be bullets, or ordered numerically.

The icon with the quotation mark is the blockquote icon. This is used set apart a quotation from the rest of the content. You’ll see that it doesn’t look like it does much here, but depending on your theme, it can look quite different.

The align icons let you set your text to align content to center, right, or left.

The chain icon lets you turn any selected text into a link. Just type in the url and your text will now be clickable. This broken chain icon quickly removes the link from your text.

The ‘More Tag’ icon lets you insert a break point into your post. When your post is displayed in other areas—such as the Archives or Search—the ‘More Tag’ tells WordPress to only show an excerpt of the content up to this point. It will automatically insert a ‘Read More’ link wherever you have this tag.

The ABC icon is Spell check which you can click to check your content for spelling errors. Click the small arrow to the right of the icon reveals a list of different languages for spell checking.

The next icon is the toggle for Full Screen mode. This provides a distraction free writing area. You’ll notice that after a few seconds, the extra tools faded out to give you a clean workspace. If you want to see the tools again, just move your mouse toward the top of the screen to reveal them.

It might seem like we’ve come to the end, but believe it or not, there’s more. This last icon is what WordPress has labeled “Show the Kitchen Sink,” which essentially all the options you would ever need.

The first one on this new row is the paragraph dropdown. This gives you quick access to several different styling options. This is especially useful for settings headings.

Next is the underline icon. This doesn’t actually make a link like we did before, but just underlines the text.

The justify icon is similar to the align icon in a way, but what this does is it tells the text to spread itself out to use the full width. It’s mostly noticeable with large sections of text.

The A icon with the gray bar underneath lets you set the text color to what you like. You’re not just limited to the suggested colors, you can click ‘More colors’ to pick virtually anything.

Next, we have two paste icons. The first let’s you paste as plain text. Let’s say you have a selection of text copied to your clipboard and it contains a number of styles (in this case we have a few here, including bold and a link…). When you select this first icon, ‘Paste as plain text’ and command or control ‘v’ to paste, you’ll see that it strips the content of all its style. So if we insert this, it adds the text without all of it’s styles.

The next option is labeled ‘Paste from Word’ but really it can include any styled content. When we use command or control ‘v’ to paste in here, you’ll see that it keeps all of the styles. When we insert this into the content it retains everything.

The Eraser icon removes the formatting of your selected text. So if we selected this text here and hit the Eraser icon, there are no longer any styles applied.

The omega icon is actually a custom character inserter. This lets you insert a number of special characters into your post as well as gives you the HTML and NUM codes for a given character.

The indent icons are pretty straight forward. You can use them indent a paragraph. You can even indent it multiple times. Use the ‘Outdent’ icon to push it back.

The ‘Undo’ and ‘Redo’ icons are here if you need them, however I find it much easier to use command or control ‘z’ to undo and command or control ‘y’ to redo.

It would be helpful to note at this time that you can get a quick word count at a glance by looking at the bottom left corner of the editor.

That would be all, but we’ve got one more thing for you here. The last help icon with the question mark on it actually packs some useful information. It gives you a basic overview on editing, but the real nugget here is the ‘Hotkeys’ tab. This gives you a list of keyboard shortcuts you can use with the Visual Editor. Familiarizing yourself with these shortcuts can save you a lot of time in the long run.