Skip to main content
Posted in

How-to

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).

WP.me Shortlinks via JetPack: Why I disabled them

JetPack options in WordPress admin for WP.me shortlinks

I use WordPress for my website (this website); I’m aware of it’s shortcomings but all in all quite happy with it.

On most sites I work on I install JetPack, but I only really use a few features.

I recently decided to try disabling the “wp.me shortlink” and I’m quite happy with the results.

Here’s the details:

Branding

Using wp.me shortlinks causes Publicize, which auto-posts to my social media channels, to post links that are non-branded gibberish in the URLs, as shown below.

tweet of auto posted wp.me shortlink

By disabling that feature, my links get posted with my actual domain.

auto posted tweet with link showing default permalink

Transparency

As a web professional, I know more about security exploits than the average bear. Auto-posting a wp.me link to Twitter means that the link that shows up is a redirect to a redirect to my site.

A URL shortened redirect to a URL shortened redirect…Sounds legit, right?

Analytics Traffic Attribution

Let me note, I haven’t looked into this but if I see t.co in my traffic reports than I know that people clicked a link on Twitter.

If t.com redirects to wp.me how is that traffic attributed?

My guess is that any traffic I get from auto posting to social media would be attributed to wp.me and that isn’t useful.

Sure, there’s an argument to be made that wp.me links would be auto-posted and t.co traffic would be that which was shared personally. That argument will be valid when and if I ever have time to share links to my own site without auto-posting them.

Non “Pretty Permalinks”

The main drawback to this approach is that the links auto post as links to the default WordPress which is a post ID in a query string.

All sites I work on use “pretty permalinks” as they are much more human and SEO friendly, and while I wish they’d post that way, the simple fact is that auto-posting non-pretty permalinks saves me a lot characters so I’m OK with it.

What do you think?

Do you prefer the wp.me shortlinks or the default WordPress query string permalinks?