Solutions to Prevent WordPress From Stripping HTML Markup

image showing how to prevent wordpress from stripping html

Updated 8-6-2019

WordPress is an effective tool for web development but occasionally it has some issues.

One thing that is frustrating is when WordPress decides to strip HTML markup. This is a problem when you type in custom HTML in the text editor and then switch to the visual editor.

 

Why Not Just Shut Off The Visual Editor?

Well you might be saying, why not just use the text editor only and shut it off permanently in your preferences?

That’s fine but formatting bullets, lists, headers, and other common tasks are now more time consuming. You are forced to either mark it up yourself by hand, or use an external editor.  Neither is appealing.

Sure, there are a few options in the text editor left like bold, italic, link, and the lists code, but now you have to manually use the list function. That’s not quick anymore and is prone to error.

Secondly, you can’t see how it will look without using a second window to preview any changes.

There has to be a better way.

Options to Prevent WordPress From Stripping HTML

 

The first method will be to use a drag and drop page builder. One top rated builder is Elementor.  Not only can it build stunning pages, but posts too.

What’s great about a page builder is that you don’t need a bunch of plugins to solve every last issue with the editor.

For example, if you need some HTML code, no problem. Just drag it in where you need it and WordPress won’t override your decision and strip it out like this:

drag elementor html function to post

Elementor has a WYSIWYG editor so everything you type is updated in the screen to the right in real time.

Elementor is also responsive for any device like mobile and that functionality does not exist in the standard WordPress editor.

Upgrade The WordPress Editor

Another option to prevent WordPress from stripping HTML markup is to upgrade the editor.

A popular plugin that is customizable is the TinyMCE Advanced. This plugin adds all kinds of capabilities to the standard editor.

When Possible, Embed HTML Markup in Headers

Another way to preserve markup is to embed the code into a header. This only works on a case by case basis.

For example. Say you want to program a Link or a Button to jump to a portion of a page.

No problem. Here’s how to do it.

First create the link normally, say “Jump to Section” and then for the link location, use the link tool and assign it a value such as

“#Section”

Next create the target.

If you were marking this up with a pagebuilder, you could put the target wherever you wanted by dragging in an HTML box. We are going to get around the text editor stripping issue without using a plugin by placing it in a header like this.

Embed html markup in header
The code id=”Section” is the target that will be preserved in the visual editor without a plugin

Now the id tag will be preserved in the header no matter if you switch to the visual editor or not.

Create Anchor With TinyMCE

The example above is really simple when using the TinyMCE editor.  All you need to do is to highlight the text that you want, then select the anchor symbol and type in the target.  The link to the target could be anywhere and is added normally using the link tool

Update 8-6-2019

Well some things have changed since I first wrote this post.  I had tried about everything to stop WordPress from wiping out my work.  I now have what I think is a better workaround if you don’t want to use a page builder.  I’m leaning away from page builders since they can be finicky at times.

A New Hack

The new version of WordPress now has the block editor.  It’s a pain to use, but it does have a redeeming feature.  Built right into the code is an HTML widget.  Bingo – done.  You can just drag this into your post and WordPress will preserve all of your code.

To make the block editor less painful, I’m using WordPress Classic Editor.  The reason being is that you can switch at will between the old classic editor and the new block editor.  That means you can stop using a page builder and pick and choose which posts to use the cumbersome block editor.  To me, this is a good solution because I’m not forced to work with the block editor and I don’t need to download a page builder.

Let me know in the comments below what you think.

Conclusion

It’s not a good idea to overlap functions with plugins. So, if you are trying to solve issues like stripping HTML with the visual editor, choose a single plugin that works for you, or start using the new WordPress Block Editor.

We’ve shown you three easy ways to overcome this problem, with a drag and drop page builder, block editor with classic editor option, or an upgraded editor option.

Each method has advantages and disadvantages, but they will help you build pages faster the way you want to build them without being over-ridden by an algorithm.

Leave a Reply

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