Quick WordPress Tip: Remove Unwanted Divs with Two Quick Keystrokes

WordPress’ visual editor comes complete with plenty of eccentricities – some distracting, some plain irritating.

But don’t worry – the purpose of this brief post is not to lay hate down on TinyMCE – instead, I want to offer up a quick and easy shortcut fix for a common issue that used to drive me around the bend.

You may wondering what the aforementioned common issue is. Here is a screenshot:

As you can see, the paragraph after the numbered list seems to have lost its bottom margin. When you switch views to the HTML editor, you can see why:

For reasons unbeknownst to me, TinyMCE has seen fit to wrap the paragraph after the list in <div> tags. This results in a loss of formatting which varies depending upon your theme’s CSS. I’m not entirely sure what precise circumstances prompt this issue, but it only (but not always) seems to happen after lists.

This bug used to be a real pain in the ass, as I would have to go into the HTML editor, scroll to the relevant part of the post, and remove the <div> tags. This was especially irritating when working with a long post.

Fortunately, I discovered an easy fix. All you need to do is place your cursor within the div-wrapped paragraph in the visual editor, and hit Ctrl + 1 (or Cmd + 1 on Macs) twice. This will first wrap the paragraph in <h1> tags, then remove those tags – and the <div> tags at the same time. Hey presto! No more divs, and done in a fraction of the time it would take to do manually.

Creative Commons image courtesy of -Marlith-

Tags:

• HTML
• wordpress editor