The main editor on your WordPress.com website is very similar to the editor on a self hosted website. The only difference is color (for the most part). I am going to show you all you need to know about the WYSIWYG (pronounced “wizzy wig”) editor tool bar.

A first glance

The toolbar will be collapsed at first so make sure you open the tool bar to see more options.

The big list of toolbar items

Let’s take it from the top and then work left to right.

Visual vs. HTML

WordPress is ultimately a website and if you know how to write or edit (good for you!) HTML then the makers of WordPress want to make sure you can create your pages using this feature. There are some cool things you can do outside of the toolbar if you want to edit you page in HTML. Just switch it over to HTML and take a look. This is how I learned HTML by using a WYSIWYG editor and then seeing how it was built in the HTML.

+ Add

You can use the options under the Add menu option to add Media, Media from Google, Free photo library, Contact Form, Payment Button.

Media options

Media can be images, audio, video, and other files. You can drag and drop files into the media window. Once you have the media window open you can also access your media from your Google library and find a photo from the free photo library by clicking the WordPress icon (W) in the top left corner of the media window. These are the same options on the main Add menu.

Contact Form

If you have a page that you want a form on you can choose the Contact Form option from the Add menu. This is mainly for inserting a Contact Form but you can get creative and add other fields to your form to use it for any type of form.

Want to create a quiz or encourage your users to submit a questionnaire you can use the Contact Form option.

Payment Button

This is a Premium plan option. But if you have this type of WordPress.com plan then you can take advantage of this. You can learn more about Simple Payments from WordPress here.

Paragraph

The Paragraph option on the toolbar is a little deceptive.

This is where you can see what type your text is being formatted as. Websites are built to use a hierarchy (like an outline). You are familiar with this if you use Word. My website has the following hierarchy:

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Paragraph

Preformatted

You can see in this post my use of these types of headlines. If you do not write your own HTML then this is the best way for you to use WordPress’ built in styling to add some order to your page with headlines. When you have your cursor in line of text this menu option will change to tell you what kind of text this is. So if you have some headlines formatted you can tell pretty easily which type it is by viewing this part of the toolbar.

Oh, these look familiar: Bold, Italic, Lists, Links, Alignment, and Spell Check

The next four you will recognize from any other application you use on a regular basis: Bold, Italic, Bulleted List, Numbered List. Just select the text you want to format and then click the option and your text will be formatted in that option.

A few more that will look familiar are the next few. First you have the Link option and then the Blockquote option.

Adding a link to your pages is every simple. Highlight the text you want to make the link, then click the Link option in the toolbar. Type in the URL for the link and then click the Add Link button. Other options WordPress gives you when adding a link is to open it in a new window. If you do not want to take the user away from your website when you are showing them another website then click the Open the link in a new window/tab checkbox. WordPress also lets you easily link to your own site pages by giving you some choices of pages. This way you do not have to know the URL for your own pages to add a link.

You may not recognize is the Blockquote icon. This menu option is a great tool for calling out a quote or part of your page. Here is an example of a block quote:

A good teacher, like a good entertainer first must hold his audience’s attention, then he can teach his lesson.
—John Henrik Clarke

The style of your Blockquote will depend on your Theme but most of them will make it different enough from your paragraph style so that users know what you are trying to show by pulling this text out as special.

The next four you will also be familiar with. Like any text editing software you have used you can set the alignment of the text to the left, center, or right using these alignment options in the toolbar.

A handy dandy Spell Checker to make sure you do not have any typos rounds off this section.

The last two options on the top row of your toolbar are the Read More option and the Expand toolbar option.

If you are using your website to write a blog you will find there are places (depending on your theme) that show a short excerpt of your blog post before you see the whole page. You would have seen this before you clicked to read the whole post you are reading now.

Kinda like not reveling a spoiler, you can control where the “Read More” link will show up by inserting the Read More tag.

What there’s more?!

Clicking the three little dots “…” will turn them and revel more. This used to be called the “Kitchen Sink” because it was everything else. Now they just call it something boring like “Advanced.” 😉 A quick look and you will see that you know most of these icons.

Strikethrough

Starting from left to right, there is the Strikethrough Text option. Which naturally strikes through text.

Underline

For underlining important information in your paragraph. You will want to make sure that you can tell the difference between your underlined text and your links. (UNDERLINED vs HYPERLINK) People are used to underlined text meaning a link on a website. So I would suggest you use this option sparingly.

Horizontal Rule

Next there there is the Horizontal Rule option. This will add a line to your page.

It will help you to break apart sections of content.

Justify Text

The fourth option is the Justify text option. They put this in the expanded section because it is so little used. Now a days there are many types of websites and most of them are responsive. Justifying your text isn’t always going to look great across all versions of your responsive website. This is another option I would use sparingly.

Text Color

If you wanted to you could go CRAZY with your text colors. But I would stick to using this to highlight important information. You can select from the predefined color choices or click custom and choose your own RGB mix. Internet color are defined as HEX Colors. You can find all kinds of Hex Color guides out there. Here are a few to help you pick a color that isn’t on the predefined list. Once you find a color you like just copy the 6-digit code and paste it in to the custom window next to the # sign.

Paste as Text

There has been issues arise with pasting from Word into a WYSIWYG editor. So WordPress created an option to let you paste with out any formatting. This is the same idea as “Paste as Special” you see in Word. Clicking on this little clip board will bring up the alert “Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off. If you’re looking to paste rich content from Microsoft Word, try turning this option off. The editor will clean up text pasted from Word automatically.” This is just a handy tool. You might actually like pasting form Word with out this because when you are in the visual editor it will keep all your formatting you had in Word with out you having to reprogram it.

Clear formatting

On the other hand if you did paste it and the formatting is way off then you can use the Clear Formatting option to remove any formatting and put all text back to default paragraph style.

Special Characters

Ever want to add a © or ♥ and do not know the key command to add it? Clicking the Special Characters option will pull up a grid of all the symbols you can add. All you have to do is double click the one you want and it will add it for you. One thing to note, smiley faces like : ), with out the spaces, will automatically convert to an emoji with out you having to do anything. The geniuses at WordPress decided to make your life easier on that one. 😉

Increase and Decrease Indent

If you are wanting to add space to a paragraph but do not want to use bullets you can use the Increase Indent option. To remove the space then use the Decrease Indent.

This helps you to organize your information as needed.

However you want to.

Undo and Redo

Just like any text editor there is an undo and redo option. These work the same as the key command on your keyboard.

Keyboard Shortcuts

Lastly, there is a list of all the keyboard shortcuts you can use. This is handy if you are the type of person that likes to use Control-V instead of going to the Edit menu > Paste. Take a look and see if any of these keyboard shortcuts can help you work more efficiently.