I have a love hate relationship with WordPress. It’s very convenient most of the time, but then the devil rears it’s ugly head more times than I can count.
One thing that is particularly aggravating 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.
All your work — gone. Sorry.
Why Only Using the Text Editor Sucks
Well you might be saying, why not just use the text editor only and shut it off permanently in your preferences?
Good idea, except..
Formatting bullets, lists, headers, and other common tasks are now a pain in the ass. 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
Let’s dig into ways we can have our cake and eat it too.
Use an Advanced Page Builder
The first method will be to use a drag and drop page builder. My favorite 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:
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.
Have you ever pressed “return” a few times in order to get some space, then hit publish and nothing happened?
Yup, me too.
That’s WordPress stripping out white space. Grrrrr.
With TinyMCE (or Elementor), you can easily add in whatever white space you want.
If using TinyMCE drag in this button.
Your white space is not only preserved, it’s as big as you want it.
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.
Say you want to program a Link or a Button to jump to a portion of a page.
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
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.
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
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.
We’ve shown you two easy ways to overcome this problem, with a drag and drop page builder or an upgraded editor option.
Either method will help you build pages faster the way you want to build them without being over-ridden by an algorithm.