The WordPress Text Editor Keeps Changing My HTML!

Don’t you hate it when HTML suddenly changes or disappears from your WordPress post or page? Yeah it’s happened to me too and it drives me nuts. This is most likely caused by someone switching from the Wordpress Text editor to the Visual editor. You know, the 2 buttons at the top right of the WordPress editor.

Wordpress Text Editor - switch from visual to text

 

Why is the Wordpress text editor doing this?

You see, tinyMCE, which powers WordPress’ WYSIWYG editor, validates your html when you switch from Text to Visual. This validation process can alter or remove some of your HTML. It’s also very hard to identify when or where your HTML has changed once you are in Visual. If you are not familiar with what’s going on behind the scenes when you switch between editors this can be very frustrating. So I put together some of the most common issues I have noticed when inserting HTML into the Text editor.

No empty nested elements

Nested div elements must have some content in them, otherwise tinyMCE will remove all children and only keep the parent. An empty space   is not enough either. So basically in the following example, the only div remaining would be the_parent. All children elements would be removed.

<div class="the_parent">
	<div class="child_one"></div>
	<div class="child_two"></div>
	<div class="child_three"></div>
</div>

 

No empty paragraphs

No empty p or span elements. An empty space &nbsp; is not enough either. All of the following would be removed.

<p class="load_something_later"></p>
<span>&nbsp;</span>

<section></section>
<article></article>

 

Duplicate elements

When an empty div is inserted, it is easy to end up duplicating said div by accident when adding new paragraphs. Let’s say you enter the following HTML into the WordPress text editor:

This div loads a Google map.
<div class="goolge_map"></div>

If someone types any text at the end of this from the visual editor you may end up with the following:

This div loads a Google map.
<div class="goolge_map"></div>
<div class="goolge_map">This was added from the visual editor.</div>

These are not make or break issues by any means. As a matter of fact if you are comfortable writing some HTML you may never switch to the Visual editor and you’ll be fine. For people like you the WordPress text editor works like a charm. But when you have multiple people editing one site things get more complicated. We do a lot of work for agencies where we build a site and the agency maintains it (which includes updating content). In these cases I cannot give my client a site with HTML that may break if they make changes.

So what is the solution?

Don’t worry I am not prefacing all this to tell you there isn’t a better way; of course there is and we built it here at Premise WP. The solution is called Premise Boxes and it is a simple but clever approach to this problem. I see it as an enhancement to the WordPress text editor and always install it in all of our clients’ sites as well. Premise Boxes is a WordPress plugin that lets you insert “Boxes” anywhere in your site. A Box offers 2 different editors – a WYSIWYG editor for none coders and a code editor for developers. The neat thing about it is that from the code editor you can insert the content from the WYSIWG editor. This way you can wrap the content from the WYSIWYG editor with HTML. Anyone who makes changes to the content will not affect the code.

Here is a quick video on how it works..

 

So as you can see, when changes are made to the content in the WYSIWYG editor none of the HTML is affected because it is never involved. It lives in another editor separate from the Box’s content. Here at Premise WP we use Premise Boxes on nearly every project. Even though we always try not to include code in the WordPress text editor some times it is necessary. We’ve all had to insert a script on a specific page or enter an empty div to load something later. A common one for us is inserting CSS or JS into a specific post. Normally this happens during maintenance on sites that have already been developed.

I hope this plugin helps others avoid bugs and headaches the way it’s helped us. Cheers!

Send us your comments..

Your email address will not be published. Required fields are marked *