How-to Avoid Wrecking WordPress Posts With The Visual Editor

If you code WordPress posts in HTML by hand, it’s very easy to accidentally mess them up with the WordPress “Visual” editor. It sounds crazy but it’s a real problem. As soon as the Visual editor starts, it changes all the HTML code, which can potentially do damage to the post.  This damage can be avoided by always using the “Text” editor.

Here’s how you can accidentally wreck a post with hand-coded HTML. Let’s say you used the Visual editor to create a new post. Then the next day you login and want to edit an old post with custom HTML. WordPress remembers that you were using the Visual editor mode! That’s where the trouble starts. As soon as the Visual editor started, it’s quite possible a lot of your custom HTML was erased. So you click to the “Text” editor mode, save the post, then BAM the post is all wonky because you saved the changes. What’s the solution?

Here’s what I do: If you edit a post and the editor was already Visual, you can switch to the Text editor but do not save the post. Close the browser tab, then open the post again, checking that you started in “Text” mode. Now you can safely edit the post.

For posts without much formatting, the Visual editor can’t do much damage. It’s more the posts with complex codes where the Visual editor can do damage.  WordPress is working on fixing this with their new Gutenberg editor but for now it is what it is. Worst case scenario, save all the HTML somewhere safe so you have a backup copy.

In summary, you can’t use the “Visual” editor on a post that was coded by hand. It’s like oil and water–they don’t mix. If a post was created with the Visual editor, keep using the Visual editor. If a post was created with HTML codes, keep using the “Text” mode editor.