Wordpress: adding extra line breaks, vertical space and more

By Ari Salomon | Published: July 13, 2009

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.

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

Turn off all cleaning with this

http://www.mensk.com/webmaster-toolbox/wordpress/how-to-prevent-wordpress-from-changing-tags-and-text-formatting-rich-text-editor/

But that’s an issue with existing posts so not a flexible solution

Or try out the ‘advanced’ editor:

http://wordpress.org/extend/plugins/tinymce-advanced/

http://www.laptoptips.ca/projects/tinymce-advanced/

This post is helpful:

http://blog.ironspider.ca/2008/05/02/plain-text-wordpress-look-ma-no-curly-quotes/

And this gives way more options:

http://plugins.trac.wordpress.org/wiki/TextControl

It reminds me of the MoveableType editor.