If there is one thing I HATE about WordPress, it’s their STUPID visual editor and the fact that it likes to think it’s smarter than I am in how I write content. I add several line breaks, it takes them away. I put NO HTML into my content, it starts to wrap things in <p> and <div> tags as it likes. Maybe for some this is fine, but I personally don’t know who those people are. I’ve seen colleagues and clients who have a range of knowledge of no HTML to a website developer (like me) that hate this. And one of the first things that many people do on a new WordPress install is find a new visual editor plugin to get rid of some of these dumb TinyMCE features that WordPress seems to think we like. The WordPress visual editor is NOT a WYSWYG editor, rather a “What You See Is What WordPress Decided To Give You” editor.
Ok, rant over.
The Problem:
We wanted a rather simple layout:
- Bold text heading.
- New Line.
- Image on the left. Text on the right.
- New Line
- Add a similar block as above
This works in WordPress as long as the text on the right is a long enough paragraph to wrap around under the image. But if your text on the right is too short, then you get strange floating issues due to how WordPress structures the HTML.
As a web developer, I know I just need to add a simple clear or even a block level element to where I need the new line break to be. But given that the settings WordPress gives TinyMCE, this isn’t possible as most all HTML tags are stripped out, particularity if they are empty.
The Solution:
No more complaining – I did find a solution that does require a small HTML tag, but is rather straightforward.
- Click on the Text tab in the top right of the editor
- Find where you would like the line break, and add the following line of code:1<br style="clear:both;" />
That’s it! Often times when you add HTML code to the Text editor, and switch back to the Visual editor your code is removed. However WordPress respects this line of code and adds the clear and line break that you desire. I know I’ve wasted too much time trying to figure this one out, so I hope this helps you.
Update:
I’ve recognized one thing: in order for this to work, you need to have the tinyMCE Advanced plugin installed, as well as the option of “stop removing paragraphs and line breaks” selected in the tinyMCE Advanced plugin settings. But to be honest, even that some times doesn’t seem to be 100% reliable…
Despite this overly frustrating issue existing since the begging of WordPress time, and there being countless conversations online and requests to the WP developers for something to be changed here, there still is no out of the box solution to one of the most frustrating issues – What You See Is What You Get being extremely far from the truth…
