Updated 4/2013
There are issues with all the wysiwyg editors out there. It’s a problem with Drupal too. It’s hard to make a browser-based tool that just works right.
What WordPress is trying to do is “clean” the code. This is useful in many situations but not always.
First: remember that you can always get less space by using “shift” with the “return” (or “enter”) key. that will give you one line break as opposed to a paragraph space. But what many WordPress users find is that they add a few extra line breaks but they don’t show up.
TWO WORDPRESS LINE BREAK HACKS
Insert this in HTML mode to create line break that survives WP “cleaner” (look at html):
<div style="margin-bottom:2em;"><span style="display:none;">.</span></div>
Adjust “size” of line break via “margin” CSS tag.
This line has 2em set above it – just to prove the code above works! Make sure you don’t paste in curly/smart quotes.
OR if you just want one line break add <code><br ></code>. Note that this gets ‘cleaned’ whenever you switch from visual to html mode but it still works after the “br” part gets cleaned out. Again, you will see extra lines above this sentence.
PLUG-IN METHODS FOR LINE BREAKS
- Disable Visual Editor WYSIWYG: Adds a button in editor to disable the visual editor for that particular page/post. That gives you flexibility to add code but of course you lose the power of the visual editor.
- Turn off all HTML cleaning with this method. But that’s an issue with existing posts so not a flexible solution.
- Or try out the ‘advanced’ TinyMCE editor: http://wordpress.org or http://www.laptoptips.ca
- This post related to curly quotes is helpful
- And TextControl gives way more options — It reminds me of the MoveableType editor from way back when but I have not used it.
- WP Post Columns: This simple plugin lets you to easily create columns via a shortcode. It is old but still works fine. It can be sensitive to extra spaces. And I find the final [end_columns] code is not needed. Watch out in some themes where other CSS can conflict with how these columns are built.
21 Comments
You, sir, are my hero. Thank you.
I hope you do not mind if I posted a link on digg
Thank you so much! TinyMCE Advanced is EXACTLY what I needed to resolve the problem!!
Awesome code stylie…thanks
Works great, but how can we go about incorporating directly into the style sheet so we don’t have to drop the code in the html view every time we want a line break?
You’d have to add a style to your stylesheet and make reference to it. One trick i use is to take advantage one of the unused h4, h5 or h6 tags since they are in the default editor. Then they can be applied to some text just to add extra space below it.
Is this what you’re trying to do?
http://www.theblogaholic.com/2011/01/16/add-line-breaks-in-wordpress-posts/
thank you very much, really grateful.
Your tip is still working 2 years later! Thanks a whole heap.
Brilliant! Thank you.
Worked in 2013! Thank you.
Perfect! This has been an issue for a while, but it looks like this will do the trick
Just used this solution for adding extra lines in wordpress it is still working fine. Many other solutions don’t work anymore but this one does. Wish wordpress would address this. You are a life saver. thx
My hero! Thanks so much. I’ve made a TextExpander snippet of the code! Works like a charm.
Very helpful, thanks!
Your code still works! In my case, I just wanted to place a BannerZest Gallery at the bottom of the page and it worked just fine. Thank s a lot!
Thanks! Very helpful.
That code for adding extra vertical space rocks!
A hero indeed! Couldn’t find the right code all night until I came across your page. Thanks!
gooood. Thank you!
PLS I NEED HELP WITH THIS WITH THIS LITTLE ISSUE AM HAVING.
WOOCOMMERCE USE TO ADD EXTRA LINES ON MY URL PLS DO U HAVE ANY IDEA HO I CAN STOP IT
THIS IS AN EXAMPLE OF WHAT AM SAYING shekinamediahouse [DOT] com/?v=bf7410a9ee72
I WANT THIS( ?v=bf7410a9ee72) TO STOP SHOWING ON MY URL