The Limits of the WordPress Editor

WordPress uses the TinyMCE WYSIWYG editor for every page and post. This editor has a few quirks that webmasters need to be aware of.

WordPress is exceptionally powerful in that it allows any non-technical user to maintain their site without the help of a web developer. A large part of this is the WYSIWYG (What You See Is What You Get) editor that allows a user to apply basic formatting to their text and add various types of media to an article. The problem, however, is that the editor is still quite limited in many ways, and users need to be aware of this.

Copying Text into the Editor

Many bloggers choose to write their material in another program such as Word, and then copy the text into the WordPress editor. This presents a problem in that the editor automatically picks up all formatting from the original program, including text colors, sizes, and fonts. The formatting is translated into CSS (Cascading Style Sheet) inline styles which the user can examine by swapping to the HTML view.

This is especially difficult to work with because the inline styles are applied without any kind of consistency. Some styles will be applied to every individual word, or a block of text, or every sentence. A user can expect to see a mess of span styles throughout the HTML source which will inevitably override the site's usual formatting, all of which will need to be removed.

The first solution is to cut the formatting entirely using the Remove Formatting button, found on the second row of editor tools. The second solution is rather more delicate, and should only be used if the user wishes to preserve formatting like header tags. Copy the HTML from the editor into a program such as Notepad, and then selectively highlight each unwanted style section in turn and do a Find and Replace to cut every instance of that style from the text.

Youtube Embedding

It's long been known that the WordPress editor does not handle video embedding very well. This has largely been solved in the latest version of WordPress, thankfully, but users on older versions can still encounter issues.

The first problem is that a Youtube embed code must be copied into the HTML view of the WP editor, and swapping back to the Visual view can cause the code to disappear. In order to keep the code, the post or page must be published without swapping back to the Visual view.

The second problem is that of dropdown menus appearing behind the video, if it appears high enough on the page. There are several possible fixes for this, but the most successful one seems to be to add 'wmode="transparent"' to the iframe tag of the embed, like so:

iframe src="http://www.youtube.com/embed/xxxxxxxxxxx" wmode="transparent" frameborder="0"

Another possible fix is to add an inline style to the iframe that sets its zindex value to -9999. This should cause the menu to appear over the video.

Users on the latest version should only have to paste the link to the video into the Visual view in order for it to appear at its default size.

Moving a Picture with a Caption

Any picture in an article can be moved by clicking and dragging it in the Visual view. It will appear wherever the cursor in the text is placed, so a user must pay careful attention to its position. A problem arises, however, when a picture with a caption must be moved - the picture will move, but the caption will not, and the formatting of the article will inevitably be disrupted.

The simplest solution to this is to simply remove the picture from the Visual view, place the cursor at the desired location, then add it again. The caption should be saved in the WordPress image selection screen. A second method is to swap to the HTML view, and cut and paste the caption and image code to the new location. In any case, the image itself cannot be dragged as normal.

These are just a few of the quirks of the WordPress TinyMCE editor. It may also have other issues with tables, forms, and styled divs, so users should be careful about what they choose to add into it.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---