Preserving HTML in the Visual Editor in WordPress

One really annoying thing about WordPress is that if you are working with something like an opt-in code or another raw form of HTML – such as a YouTube video – it will often times completely break when you switch to the “Visual” editor in WordPress from the “Text” editor. One thing that many people do to combat this problem is disable the visual editor for clients; however, that’s not always ideal. Many clients love and even expect the visual editor experience with WordPress.

Thankfully, there is a handy little plugin that will allow you to use raw HTML and JavaScript inside the visual editor without fear of breaking the code. It’s called, as expected, “RAW HTML”. This plugin allows you to filter out WordPress code from being modified from within WordPress.

The first thing you’ll want to do is navigate to Plugins > Add New and search for “RAW HTML” in the WordPress Database; it should be the very top result shown below:

Screen Shot 2013-05-23 at 2.07.06 AM

Once found, simply install and activate the plugin:

Screen Shot 2013-05-23 at 2.07.17 AM

 

Once the plugin is activated, you simply have to wrap your HTML code in [raw][/raw] and it will now be modified by WordPress when switching to the visual editor. To complete this, first switch your page to the “text” view and paste in your HTML code, and then wrap it in [raw][/raw] tags as shown below:

Screen Shot 2013-05-23 at 2.11.34 AM

 

Next, to test the code, switch the page over to the “visual” editor to see that the HTML code remains intact completely:

Screen Shot 2013-05-23 at 2.13.40 AM

 

That’s it! Your raw code is now protected by the “Raw HTML” plugin system! Simply wrap everything in [raw] tags from now on and you’ll never have to worry about a broken YouTube, Google Maps, or MailChimp code again!