10 Tips for Using the WordPress WYSIWYG Editor

Wordpress SwagThe WordPress WYSIWYG editor resembles most text editors but differs in its capabilities; some for the better, some for the worse. It does have some quirks that you need to be aware of and some cool tricks that aren’t readily available or intuitive. Here is a list of ten tips to get you started. All buttons can be identified by hovering over them to reveal the names.

1. Show/Hide Kitchen Sink

The WYSIWYG toolbar will show one or two rows of buttons depending on whether or not you are showing or hiding the “kitchen sink”.

Keyboard Shortcut: (Alt + Shift + Z)

WYSIWYG Toolbar

2. Read More

If your blog archive page is currently set to display the full post, it can be a bit cumbersome to scan through and not very user friendly. The “Read More” button, however, will allow you to set a break point at any spot in the post. This will add a link to read the entirety of the post after the desired break point, acting as a sort of teaser.

Keyboard Shortcut: (Alt + Shift + T)

More Functionality Usage

Another way to accomplish this same effect is through the “Excerpt” metabox found below the WYSIWYG editor. Different from the “Read More” button, this will allow customized text, separate from the post. If the “Excerpt” metabox is not visible it can be made available by checking the excerpt box under “Screen Options” at the top of the page.

3. Next Page

If your blog post is very long, you may consider paginating it by utilizing the built-in “Next Page” functionality. There is currently no button in the editor to display this. You must type the code shown below into the “Text” tab only and on its own line.

Next Page Functionality Usage

4. Embeds

WordPress provides the ability to custom embed content from a number of social media websites like a YouTube video, a Spotify playlist or a Tweet, among others. Copy and paste the url of the video, tweet, etc., into the WYWIWYG editor on a line by itself.

Wordpress Embeds

5. Paste as Plain Text or Paste from Word

If you decide to write a blog post in another application, it is a good idea to utilize the “Paste as Plain Text” or “Paste from Word” button to remove weird characters and formatting. If you paste text from a website or other document, it can sometimes look like the image below. It may invalidate your code or override the default theme styling.

Pasted from Outside Source

6.  

If you are making a lot of corrections, “&nbsp” can run rampant. They are only visually represented in the “Text” tab of the WYSIWYG editor. Each one is a line break, and if they pile up, it can create huge spaces between content that will look unprofessional. It is a good idea to check the “Text” tab and remove these as needed.

7. Learn Basic HTML

While the essence of the WYSIWYG editor allows for users of all skill levels to create content without needing to know HTML, it is, however, recommended that one have a basic understanding to trouble shoot content that isn’t displaying correctly. The W3Schools website is a good place to start. All HTML or “tags” have an open “<” and close “>”. Missing closing tags is likely the biggest reason for display issues. The HTML is visible in the “Text” tab of the WYSIWYG editor.

8. Adding Images

Images are added from the “Add Media” button above the WYSIWYG editor. Once the image is selected, there are a number of settings: size, alignment, link to, title, caption, description, and alt text. Once the image is added to the post, these settings may be updated by clicking the image and two buttons will be overlayed on the image to either edit or delete. To align the image left or right of a paragraph, set the cursor at the beginning of the paragraph and then add the image.

Image Edit Screen

9. Distraction Free Writing

This button will hide everything but the WYSIWYG editor and post title.

Keyboard Shortcut: (Alt + Shift + W)

10. Preview

It is always highly recommended to proofread the content of a blog post before hitting publish, but it’s also just as important to preview the layout of the post as things may appear differently within the editor. The Preview button is under the “Publish” metabox.