How to Use the WordPress WYSIWYG Editor

Hey there! We’ve updated this post for you so it’s relevant in today’s WordPress world. Check out our 2016 WYSIWYG Editor Tutorial here.

For the amount of users out in the world using WordPress, it is amazing to me that there is no great tutorial to point our clients to about the WordPress Editor window. This post hopes to rectify that.

The Editor window changes and updates just like the rest of WordPress, but has remained pretty consistent for the past few major versions. We’ll be sure to update this post with the newest tools as they are released.

First: Whizzy what?

WordPress uses a javascript plug in called TinyMCE for its WYSIWYG editor. WYSIWYG is an acronym for “What you see is what you get” and its the best way to craft content before saving your post. The editor is pretty powerful, with many buttons and options for writing content. Most of the options are familiar ideas, similar to options in a Word Processor – bold, italic, bulleted list style, etc… When designers like myself start to throw out terms like “H1” and “blockquote”, though, most people’s eyes glaze over, but that is how these options are stored as HTML elements. Luckily, the Editor does the grunt work for you.

Second: Some definitions and pictures

The “WordPress Editor” window is the main focus of any page that produces content in the WordPress admin section. Most people are familiar with it for posts, and it looks like this:

A good theme will have some styles set up so that content in this window more closely resembles how it will look in your theme – colors, font, heading styles, etc… This helps you craft content that will look great before you even hit the “Save Draft” button and preview it.

No Kitchen Sink

When you fist use WordPress, the “kitchen sink” is off. So the Editor window will most likely look like this, with the following options:

WordPress TinyMCE WYSIWYG without the kitchen sink enabled

The options explained:

Upload/Insert: This area is a container for all of the media options. Sometimes, plug-ins like the Next Gen Media gallery or Poll Daddy will insert an icon in this area for accessing shortcodes for those items. Clicking on any of these will usually open a modal window above the content for managing photos and the like.

Content View Switcher: The Editor window can function as a Visual Editor (WYSIWYG), or as an HTML editor for those more adventurous. This post will concentrate on options in the Visual Editor.

Bold: Highlighted text will become bold when this is clicked. In HTML, this uses a <strong> tag.

Italic: Highlighted text will become italic when this is clicked. In HTML, this uses the <em> tag. Can be used in combination with the bold button.

Strikethrough: Highlighted text will appear struck, with a line through the center.In HTML, this uses the <del> tag. Used to indicate text for deletion or removal, or to indicate that a change in the text has taken place.

Bulleted List: Highlighted text will be formatted like a bulleted list. Depending on your theme’s style, the bullets may be round or square. Lists can be nested – a bulleted list may have a numbered list inside of it. In HTML, this uses a set of <ul> and <li> tags for the “unordered list” and the “list items”.

Numbered List: Similar to above, but with numbers. In HTML, this uses the <ol> (ordered list) tag in combination with the <li> list item.

Blockquote: Highlighted text will be indicated as a blockquote, which typically means that a whole passage has been quoted form another source. The style of it will vary from theme to theme, but most of the time italic text is used, it is indented, and may have quotes around it automatically. The HTML element is <blockquote>.

Left, Center and Right Align: These buttons will align highlighted text. Most themes align text to the left by default and this is how an author can break out of that mold. An author need not highlight a whole paragraph, as this style will be applied from one full return to another. In HTML, since there are no native tags for alignment, TinyMCE adds a <p> tag around the paragraph with a “style=align: right;” applied to it.

Link (chain icon): The link icon is available for clicking only when text is highlighted. Highlighting text and clicking this button will open a small modal window where an author can enter in the destination URL, choose whether or not to open in a new window, or choose to link to another page on their own site. In HTML, the tag used is <a href=”http://example.com”>Link Text</a>.

Unlink (broken chain): To remove a link, an author can highlight the whole link or simply place the cursor within the link and click this button.

The “More” break: WordPress has an option of adding this physical break to the post – breaking it into two sections, the teaser and the body. If your theme displays the entire post by default on category landing pages, the “more” break is a way to show only some of the content, forcing users to click a “Read More” link to see the rest of the body of the post. Upon clicking the “Read More” link, the user will be brought directly to an anchor in the text where the post continues, so they do not have to read the same teaser again.

If your theme’s landing pages use excerpts instead, this “more” break may not have the intended effect.

Spell Check: This button is a drop down that will change the preferred language of the editor’s spell check dictionary.

Full Screen: Toggles a full screen view of the editor so authors can concentrate on composing their post. Useful, but the buttons for styling your post will be limited in this view to bold, italic, bullets, numbers, blockquote, insert media, insert link, unlink and help. Learn the “Hotkeys” to access more style options (see the Help modal window for a list of Hotkeys and how to use them).

And finally, Toggle Kitchen Sink: This button simply makes another row of options available for styling your post. Those options are explained next.

Kitchen Sink!

With the kitchen sink option on (and WordPress remembers if you prefer it on), a whole slew of additional options are present.

WordPress TinyMCE WYSIWYG with the kitchen sink

Style drop down: (graphic below) Within this drop down are styles intended for block-level elements – paragraph, address, preformatted, heading 1, heading 2, etc…

The best way to think about inline vs. block-level may be this: A bold tag is inline, because you can bold a portion of a sentence; A Heading 1 is block-level because it will effect all the text in a block, from one hard return to another.

Underline: Highlighted text will have an underline applied to it. In HTML, the tag is <ins> (for insert). Your theme may apply an underline to links, so be sure to use this tag when appropriate, and don’t fool your readers into thinking something might be clickable when it is not.

Justify: Another alignment option. This one is by itself because authors should use it carefully. Not all browsers support the justify feature, and since browsers do not hyphenate text, this style may create “holes” in your paragraphs when spacing between words need to be very large.

Text color: Highlighted text will turn a variety of colors by using this button. When clicked, a standard palette of colors will appear for you to choose from, and a limitless palette is shown when the “More Colors” option is clicked.

Paste as Text: THIS BUTTON IS AWESOME! Very useful for authors who cut and paste text from other sources. Ever copy text from another website, and all the styles come with it? Soon you have a mish mash of styles in your post. You can get frustrated scraping the style tags in HTML view, or you can paste with this button to begin with. When clicked, a new modal pops up with its own text area. Text pasted into this area is converted to “plain text”… nothing but the facts, ma’am. This allows for much easier styling and integration into your content.

Paste from Word: THIS BUTTON IS ALSO AWESOME! Ever cut and paste content from Microsoft Word, and all the sudden your post looks funny? That’s because a bunch of styles – and, frankly, gobbledy gook – comes along with the content from Word. To paste the text in as plain text, click this button and paste your content into that window first. This option is better if you know the content is coming from Word than the Paste as Text button, as it specifically removes tags that Microsoft Word generates.

Remove Formatting: Highlighted text will have styles removed. While this icon is an eraser, it must be noted that it does not always remove every style. It does a better job removing styles that the editor has added in already. It does not consistently remove styles from text that has been cut and pasted from other sources.

Insert Special: This drop down list helps to insert special characters that are hard to access unless you know the special keystrokes.

Remove / Add Indent: A highlighted block-level element will be indented or un-indented with these buttons. Since there is no HTML element for this, TinyMCE adds a “style= margin-left: 30px” to the element. 30px is the default indent increment.

Redo / Undo: Simply keeps track of changes and allows the author to undo or redo a set of changes. I’m honestly not sure how many changes it will keep in memory before they get lost.

Help: A simple modal with Basic and Advanced tips will pop up when this is clicked. The most interesting to me is the table of “Hotkeys” available to authors. Did you know command 1 will make a selection take on the Heading 1 style?

And one more

The last thing I want to review is the contents of the Style drop down.

WordPress TinyMCE WYSIWYG with heading drop down

As briefly mentioned before, the style drop down menu contains a bunch of standard block-level elements. This means that a whole paragraph will get the style, not just a selection of portion of a paragraph. The styles are:

Paragraph: Used by default, but useful if you have chosen another style but want to switch it back to the default paragraph style In HTML, this is the <p>…</p> set of tags.

Address: An interesting tag, address is usually italic for some reason. I wonder if blocks using this tag have special weight with search engines, but very little data is available to back up that hunch. Personally, I rarely use it.

Preformatted: The <pre> tag is a tough cookie. It is intended to display text with white-space preserved, meaning that breaks in the text will be exactly as written. To me, this means trouble, as if there are no breaks in the text inside of this tag, then there are no breaks on the front-end as well, and that can lead to some goofy looking posts. A good theme will take into account the intention of a <pre> tag, but ensure that the display will not break the layout. Again, rarely used… most people use it to display chunks of code.

Heading 1, 2, 3, etc… These are great and every author needs to know how to use them. The concept is simple – headline styles, with more size or boldness given to the lower numbers. But search engines use these tags to determine where the important phrases are in the content as well (and in the page in general) so they should be used not only because they help organize your story, but because they also give your content extra weight.

That’s all folks!

Thanks for reading, and I hope this helps. There is a lot of options packed into this little Editor window, so take advantage of the array of style options WordPress gives the author. Happy blogging!