x
Bookmark

WordPress – Visual Editor Menu

Video Tutorial

Script & Screenshots

In this video I’m going to go through the editor menu.

The visual editor provides a semi-WYSIWYG (What You See is What You Get) content editor that allows you to easily create, edit, and format your page content in a view similar to that of a word processor.  This is both the same in Posts and Pages.

By default, the Visual Editor only shows a single row of buttons in the editor. The first thing you will want to do is click on the Toolbar Toggle button, also known as the Kitchen Sink Button.  This will expand the toolbar so that you see both rows of options.

Now you’ll see all the formatting options.

The first button is to bold text.  The first time you mention your company, consider making it bold. This can aid in scannability as people look through your content.  It also helps the SEO, as Google adds some extra weight to bold words in text as an indication of its content.  This will help it understand what your article or page is about.

To add bold to text, highlight the word or words that you want in bold, then click on the ‘B’ button.  If you’d like to remove the bold highlight the text and click the ‘B’ button again.  This will remove the bold from the selected text.

If you would like to Italicize any text, it works the same.  Highlight the text and click the ‘I’ button.

The next button is Strikethrough.  Strikethrough text is often used to show that something is unavailable, wrong or deleted.  If you would like add it on any text, highlight the words and then click on the strike through button.

Numbered lists and bulleted lists draw the eyes of your readers. Text is easier to read and easier to scan in list format.  Bulleted lists work best when the order doesn’t matter, but items in the list are related.

To add a Bulleted list, click on the location you want it added, click on the Bulleted List button, then start typing in your text.  Click the Enter key to add a second bullet, and so on.  To end the bulleted list, you can click the enter key twice or after clicking enter once, you can click the bulleted list button again to end it.

Numbered lists work best when the order or sequence is important.  If you’d like a numbered list, click on this button.  You can create it as a new list like I showed you how to create a bulleted list, or you can convert a bulleted list to a numbered list and vice versa.

Next up is blockquotes.  They are usually used for adding a quotation from another person.  These would work great for adding testimonials to your website.  They will help make them stand out better than just adding regular quotations.

If you’d like to add a Blockquote, click in the location you want to add the quote, then click on the button.  Type in your quote and then click the blockquote button again to end it.  You can also select text already on your page and click the button to turn it into a quote.

Horizontal Lines are a great, and simple way to break up your page.  Click where you’d like to add a line break and click the Horizontal Line button.

The next three buttons change your alignment.  Left, center, and right alignment.  They’re pretty self-explanatory.  The left alignment keeps the text aligned to the left.

The right will move all the text over to the right.

And center aligned will move all the text to the center.

The next button is for adding hyperlinks to text or images.  For adding a link, select the text or image that you want be hyperlinked.   Then click the hyperlink button in the toolbar.

This will bring up a box where you can enter the URL of your hyperlink and the title that will display the hyperlink.  If you would like to link to your existing content on your website, if it’s not already expanded, click on the arrow to expand this section. Now you’ll see a search bar to search for the page or post you would like to link to.

Then click on Add Link.

You can also add a link to an external URL or a document such as a pdf or word doc.  When doing this, I recommend clicking the checkbox to open the link in a new tab.   That way it doesn’t take them away from your website.  As soon as they close the tab it opens, they will be right back to your website.

Once you have your hyperlink URL ready to go, click the Add Link button.  In this example I’m going to set it to a link to espn.com and set it to open in a new tab.

Then click on Add Link.

I’m going to add one more link.

And link it to a page on my website.

The next link button is to remove a hyperlink.  If I highlight the link text I just created, if I click on the Remove Link button, it will remove my link.

Next is the Insert Read More Button.  You can truncate your blog entries so that only the first part of a posts is displayed on the home and archive pages. When you do this, a link will be placed directly after your excerpt, pointing the reader to the full post. You can put this link anywhere in a post, and customize it to say whatever you want.

Find the place on your post that you’d like to add the button.  Place your cursor at there and click on the “Insert Read More tag” button.  Once you click it, you’ll see the split appear in your post.

Here’s what it will look like in the back end.  On the front end you’ll just see a button that says Read more.

The Paragraph drop down gives you the option to add headings.  A heading is simply like a title. In HTML, it is structured by using heading tags such as H1, H2, H3, and H4. Normally, as the heading number gets bigger, the font gets smaller.

The H1 heading is typically reserved for the page title, usually found at the top of the content.  It is recommended that you only have one H1 heading per page.  Most templates automatically add the H1 page title.  If this is the case only use the H2, H3, and H4 subheadings.  Having different font sizes helps grab your audience’s attention or highlight different sections in a lengthy article.  Headings also help with SEO.  Google treats headings as a better indication of content than a regular paragraph.  It also treats them as more relevant than bold text.  For this reason, write your headings as you would a headline, and if possible use your keywords.

I’m going to add in four headings.  You can have one heading size per line.  Highlight the text you’d like to change the font and select it from the list.  I’m going to set a H1, H2, H3, and H4.

If you would like to underline text, highlight it and click on the U.  Click the button again and remove the underline.

If you would like to justify your text, select the text and click on the Justify button.  It will justify the entire paragraph.

To change the color of the font, select the color you’d like or you can create a custom color.  Click on the custom button.  From there you can choose a color with the color picker, enter the RGB value, or the color code.

I’m going to choose to turn my text to Green.

If you copy and paste text from somewhere else, you may discover that it does not always appear exactly as you would expect.  You’ll typically find all that formatting (font, size, color) will get carried into WordPress when you paste it in.  If you use the Paste as text button, then a special cleanup process will run to remove any special formatting and HTML tags that may otherwise change your text.

Click on the Paste as Text button to turn it on.

The first time you click the button, a window will appear notifying you that you will be pasting in plain text.  Until you click this button, it will remain in this mode.  Click ok once you’ve read the message.  Once you’ve enabled the Plain Text option once for a post or page, subsequent clicks on the button will turn it on (evidenced by a box around the button) or off (no box around the button). You will not see the pop up window again unless you reload the page or go to a new post/page, but the toggle option still works.  After you’ve read what’s in the box, click OK.

When you’re done pasting your text, click on the button again to turn it off.

The next button is the Clear Formatting button.  This button, as you would expect, removes all formatting (bold, italic, colors etc) from a highlighted section of text.  When the button is clicked, all the formatting will be removed.

Next up is the Special Character button.  As well as the normal letters available directly from your keyboard, you can also insert special characters. Position your cursor to where you want to insert a character and click on the insert custom character button. A popup window will appear.  Some of the options are copyright or trademark symbol you can select it here.  There are a ton of other characters to choose from as well.  Click any character and it will be inserted at your cursor position.

Here’s the full list of characters.  I’m going to add the infinity symbol to my content.

The indent button will move text in by one level, and the out dent button will take away one level.  Click on the paragraph or line of text you want to indent and click the button.

The next button will come in quite handy.  It’s the undo button.  It will undo your last action.

If you undo an action, you can also redo your last action.

The last button is the Keyboard Shortcuts.  The visual editor has several keyboard shortcuts, or hotkeys, built in.  To see a list of all of the available shortcuts, click the question mark button.  A window will pop up showing a list of keyboard shortcuts available in the editor.

That’s it for this video.  I’ll see you in the next one.

WordPress Basics
Pre Website
Buy a Domain   (5:20)
Buy Hosting   (7:44)
Create a Sitemap   (7:14)
Introduction To WordPress
WordPress vs WordPress.org vs WordPress.com   (3:32)
Installing WordPress on your own hosting   (7:56)
Logging into the admin dashboard   (2:22)
Admin Dashboard Overview   (9:22)
Dashboard Screen Options   (3:37)
Changing WordPress Settings
General Settings   (4:34)
Writing Settings   (3:53)
Reading Settings   (1:55)
Discussion Settings   (6:46)
Media Settings   (2:19)
Permalinks Settings   (4:37)
Setting up your site
Change Themes   (2:49)
Customize Themes   (7:50)
Menu Screen Options   (3:50)
Add A Menu   (4:07)
Edit Your Menus   (5:13)
Sidebar Widgets   (7:50)
Footer Widgets   (9:18)
Adding Users   (4:47)
Edit Users   (5:00)
Adding Content
Pages vs. Posts   (2:47)
Post & Page Screen Options   (8:15)
Visual Editor Menu   (11:44)
Post Formats   (4:18)
Publishing a Post   (11:13)
Publishing a Page   (8:42)
Adding Images   (11:48)
Adding a PDF as a Link   (2:35)
Linking Text to a URL   (3:15)
Pasting Text From Word or Other Editor   (7:26)
Categories & Tags   (7:35)
Custom Fields
Scheduling a Post   (1:32)
Updating WordPress
Updating WordPress   (1:50)
Updating Plugins   (1:50)
Plugins
Plugins Overview   (7:15)
Plugin Screen Options   (1:14)
X

Forgot Password?

Join Us

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.