HelloARI logo: vinyl signs and identity design home«    web design«    sign design«    photography«    blog«    contact« 

web design and wordpress development 94114
blog»
san frnacisco web design

WordPress: adding extra line breaks, vertical space and more

1 Flares 1 Flares ×

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

  1.  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.
  2. Turn off all HTML cleaning with this method. But that’s an issue with existing posts so not a flexible solution.
  3. Or try out the ‘advanced’ TinyMCE editor: http://wordpress.org or http://www.laptoptips.ca
  4. This post related to curly quotes is helpful
  5. And TextControl gives way more options — It reminds me of the MoveableType editor from way back when but I have not used it.
  6. 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.
1 Flares Twitter 0 Facebook 0 Google+ 1 LinkedIn 0 Email -- 1 Flares ×
This entry was posted in Web Design, WordPress. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

20 Comments

  1. H2U
    Posted August 21, 2009 at 11:05 am | Permalink

    You, sir, are my hero. Thank you.

  2. Posted August 30, 2009 at 10:30 am | Permalink

    I hope you do not mind if I posted a link on digg

  3. Posted July 19, 2010 at 5:08 pm | Permalink

    Thank you so much! TinyMCE Advanced is EXACTLY what I needed to resolve the problem!!

  4. Posted August 24, 2010 at 11:02 am | Permalink

    Awesome code stylie…thanks

  5. Posted September 28, 2010 at 6:14 am | Permalink

    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?

  6. Posted September 28, 2010 at 8:53 pm | Permalink

    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.

  7. Jim
    Posted January 16, 2011 at 1:28 pm | Permalink
  8. chinedu
    Posted April 24, 2011 at 8:18 pm | Permalink

    thank you very much, really grateful.

  9. JustCallMeBradley
    Posted June 10, 2011 at 9:12 am | Permalink

    Your tip is still working 2 years later! Thanks a whole heap.

  10. Posted May 1, 2012 at 4:41 pm | Permalink

    Brilliant! Thank you.

  11. Wordpress noob
    Posted January 3, 2013 at 1:45 pm | Permalink

    Worked in 2013! Thank you.

  12. Posted February 15, 2013 at 8:15 am | Permalink

    Perfect! This has been an issue for a while, but it looks like this will do the trick

  13. Posted April 16, 2013 at 7:30 am | Permalink

    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

  14. Posted April 22, 2013 at 5:23 am | Permalink

    My hero! Thanks so much. I’ve made a TextExpander snippet of the code! Works like a charm.

  15. Valerie Mosolgo
    Posted October 16, 2013 at 4:04 pm | Permalink

    Very helpful, thanks!

  16. Posted October 18, 2013 at 12:06 pm | Permalink

    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!

  17. Daniel Ross
    Posted February 6, 2014 at 9:09 am | Permalink

    Thanks! Very helpful.

  18. Shawn
    Posted February 27, 2014 at 1:08 am | Permalink

    That code for adding extra vertical space rocks!

  19. Posted March 23, 2014 at 9:37 am | Permalink

    A hero indeed! Couldn’t find the right code all night until I came across your page. Thanks!

  20. Posted March 28, 2015 at 7:39 am | Permalink

    gooood. Thank you!

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*

 

1 Flares Twitter 0 Facebook 0 Google+ 1 LinkedIn 0 Email -- 1 Flares ×
© 2016
contact  |  links  |  rss