HelloARI logo: vinyl signs and identity design web design«    sign design«    blog«    contact«  USE MY IMAGINATION
web design and wordpress development 94114

san frnacisco web design

WordPress: adding extra line breaks, vertical space and more

There are issues with all the WYSIWYG (What You See Is What You Get) editors out there. It’s hard to make a browser-based tool that just works right. Over the years these tools have gotten better and require fewer “hacks” to get them to display what you want them to display.

The intutiive solution is to just add more blank lines (carriage returns, to use a typewriter term). But it doesn’t work — WordPress is trying to “clean” the code and 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 to add vertical space between sections of content but the spaces don’t show up on the public facing page.

FOR CURRENT “GUTENBERG” WORDPRESS BLOCK EDITOR

Adding some extra space is easy—use the block called Spacer. Click on the + icon, search for “spacer”, then add the Spacer block. By default, the space will be set at 100 pixels in height.

click the image below to see in more detail the block options.

TWO WORDPRESS LINE BREAK HACKS
For older versions of WordPress

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. Or try out the Advanced Editor Tools (previously TinyMCE Advanced): http://wordpress.org or http://www.laptoptips.ca
  3. And TextControl gives way more options — It reminds me of the MoveableType editor from way back when but I have not used it.

 

 

Originally published 2009, Updated 2013 and 2021

This entry was posted in Web Design, WordPress. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

21 Comments

  1. 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. Posted January 16, 2011 at 1:28 pm | Permalink
  8. Posted April 24, 2011 at 8:18 pm | Permalink

    thank you very much, really grateful.

  9. 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. 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. 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. Posted February 6, 2014 at 9:09 am | Permalink

    Thanks! Very helpful.

  18. 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!

  21. Posted April 28, 2016 at 7:22 am | Permalink

    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

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>

*
*

© 1996 - 2024
contact  |  links  |  rss