How to Stop WordPress from Removing Your HTML Tags

Posted on September 14, 2011 by Greg

Using WordPress as a content management system (CMS) is usually a great choice. It provides you with everything you need to quickly make pages, posts, categories, and even custom posts – like a testimonial or portfolio item. However, sometimes we want to take over more control in our pages – so we use the HTML editor.

The HTML editor lets you insert HTML content into the content area of your page (designated by your page/post template). However, the editor that WordPress uses to accomplish this (TinyMCE) likes to help you out, sometimes a bit too much, and rearranges invalid HTML – especially when it comes to inserting empty HTML tags.

Sometimes users need an empty HTML tag to structure the look of a page. For example, if you need to clear a couple of floats, or if you want a purely CSS image. There are a few solutions to this problem:

1. Make the HTML editor the default editor and NEVER switch to the visual editor. The behind the scenes magic of editing your HTML by the TinyMCE editor is only done in “Visual” mode. So avoiding it can be a quick solution. However this isn’t ideal for web designers developing a client’s website on WordPress so the client can avoid having to learn HTML to make edits.
2. If you’re a developer, just go into the TinyMCE js file and turn off the “clean up” mode. However, not everyone using WordPress is a developer and this isn’t the easiest solution to perform.
3. The middle ground here is a simple but effective solution I came up with when I needed a really quick fix and didn’t feel like messing around in the javascript files of TinyMCE. Here it is:

<p class="empty">This text will be emptied</p>

.empty {text-indent:-9999px;}
It’s as simple as that. Try it out and let me know how it works for you! Leave a comment if you have any questions.

This entry was posted in Featured, Wordpress Development. Bookmark the permalink.