Why I Write Posts Primarily In The WordPress HTML Editor

I was recently reminded why I write WordPress Posts and Pages in the HTML editor tab and NOT the visual tab.

I have always been frustrated by the visual editor – mainly because it is not a true WYSIWYG (What You See Is What You Get) editor. I guess I’m just too accustomed to using something like Word and expect what I put in the editor to actually be what I get on the output.

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

I wrote an article a few days ago for WPMU.org, formatting it like I wanted to see it on the screen – using the “Preview” button to constantly check all layout and placement until it was pixel perfect in my mind. I submitted it for posting and asked for a review.

Post Formatted With HTML Editor - Looked Like I Intended
Post Formatted With HTML Editor - Visually Correct

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more
The reviewer wrote me back saying that something was strange with the layout and asked if I could correct it.

Post After Switching To Visual Editor - Formatting is Skewed
Post After Switching To Visual Editor - Formatting is Skewed

When, I opened the post (in the HTML editor as I always do), I scrolled down the post and immediately saw the problem. There were two extra line breaks inserted in the image HTML that placed the caption for my image in such a manner that split one of my paragraphs and placed an edge of the image over some of my text.

Corresponding HTML After Switching Back From Visual Editor
Corresponding HTML After Switching Back From Visual Editor

I removed the extra line breaks, previewed the post, and it was once again pixel perfect in my mind.

But, I suspected that the person reviewing had opened it in the Visual editor, so I switched over to the Visual editor and clicked the “Preview” button. WOW!!! I saw the same issue again.

I then went back to the HTML editor and saw those same silly extra line breaks. Once again my issues with the Visual editor were confirmed – it only serves to give me greater frustration than actual assistance.

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

I prefer to write mainly in the HTML editor, adding my formatting either as I go or after I’ve completely written my page/post and then ensuring that I have it just the way I want it. My work flow seems to go smoother, and I seem to be less frustrated with my end result.

I searched once for a true WYSIWYG editor that I could install on a client’s website and NOTHING that I found actually worked like a true WYSIWYG editor. However, that was before I found that I was in good company with my frustrations. Tom Ewer posted an outstanding, unbiased review of Alternative Editors for WordPress that everyone should check out.

How do you handle formatting issues in WordPress? Do you use the Visual editor or the HTML editor? Do you use an editor instead of the standard WordPress editor? If so, which one? We’d love to have your comments here. In fact. Tom may have discovered the Perfect Alternative Editor in this article.

Embed Plane

Comments (2)

  1. That’s not a problem with the HTML editor. In fact, WordPress corrected your HTML correctly. Your captioned image is a block element as well is the preceding paragraph. Therefore you *should* have them separated with the linebreaks.

    The reason why the text is split and some of it appears above your image is because your image caption is floated( the part that goes [caption .. align=”alignleft” ). Set the captioned image to alignnone and the text will appear below it correctly.

    • Interesting evaluation David – thanks for commenting on this.

      Now, to how I actually overcame the situation – and it probably dovetails directly into what you are talking about here.

      To “fix” this situation, I simply reduced the size of the Chrome and Firefox logo to the left by about 1/3 and the post formatted properly in every browser and situation we tested it in.

      Based upon that, I’m assuming that the “white space” created by the sizing of the logos left a virtual hole that the caption “filled in” in some situations. But, I’m not 100% certain on that.

      Thanks again David for mentioning this here. I’ll actually have to dig into this and see how each responds.