Skip to main content

Prevent WordPress HTML Auto-Formatting

I hate that WordPress auto-formats my HTML.

I know HTML well and I always author it with semantic elements like paragraphs. I don’t insert blank paragraphs between paragraphs for spacing, and why in the world would anyone wrap an image or a figure (both block elements) in a paragraph?

I recently came up with a partial solution that doesn’t require a plugin or editing functions.php.

It’s not perfect but it’s easy to use and it doesn’t require access to the codebase.

Without further ado I give you (drum roll please):

My Auto-Formatting Solution: class="wp"

Have a look at the code of this post.

You’ll notice that all the <p> elements have a class of wp like this:
<p class="wp">.

I don’t use forced line breaks very often (<br>) but it works to preserve those as well.

Anyone who comes after me and works on a site where I have used this method, and isn’t aware of it, could easily be tricked, just like WordPress is, into thinking there’s some significance to this class; there isn’t.

As soon as a class is added, WordPress stops wantonly deleting my semantic HTML presumably because the software is intelligent enough to realize that classes generally indicate a default element no longer has default properties, that it must have additional properties or stylings associated with it.

I don’t really care why it works, I don’t really care why WordPress innately strips paragraphs (and then adds them programmatically when it renders it‽).

What I care about is that I don’t have blank lines (i.e. new lines \n) followed by &nbsp; in between lines of text that isn’t wrapped in an appropriate element like a <p>.

Other Solutions to Auto-Formatting

ps disable auto formatting plugin

With varying degrees of success, I have used 2 plugins (my current favorite pictured above) to help prevent auto-formatting, and my current starter theme, this theme (open-source and freely available on Github), includes functions for some of this.

The problem is they are hit or miss.

I don’t know why; I’m not really a developer. I loathe error logs and debug modes.

On some sites, the <img> tags end up wrapped in perfect little <figure> tags and any captions show up wrapped in <figcaption> tags with no despicable wrapping paragraphs standing on every street corner proclaiming their right to be there.

On other sites it doesn’t work.

Same goes for the plugins, especially the first one I found, Don’t Muck My Markup.

dont muck my markup plugin interface

No, I haven’t reported a bug because as I said it’s hit or miss. Sometimes it works like a charm and sometimes it fails miserably and given the complexity of most sites I work on (think of all the variables: server software, PHP version, WordPress version, other plugins, performance enhancements [i.e. cache], proxies, human error) I don’t even try to figure it out, in my recent experience, it probably works correctly about 2/3 of the time.

PS Disable Auto-Formatting has been more reliable for me so it’s now my plugin of choice (it has taken the place of Don’t Muck My Markup in the script that automagically installs plugins for me).

Your thoughts?