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-
- Daily Tip: Remove Unwanted Plugins From Your WordPress Site Have you ever deleted the “Hello Dolly” and “Akismet” plugins…
- Daily Tip: Quick Trick to Remove /category/ From WordPress URL Having /category/ in the url of your blog url isn’t…
- Quick WordPress Tip: Future Proof Your CSS Stylings With Add To All If you’re looking for a simple solution to future-proofing your…