Tuesday Tech: Single-spacing in your WordPress post

I recently got a query from a Wax client who wanted to know how to change her WordPress self-installation to only do a single-line-space each time she hits the Enter key. She would much rather do her double-spacing manually.

It’s a straight-forward challenge, with a not-quite-as-straightforward solution.

NOTE: if I get too technical for you in this post please comment below and I will do my best to de-tech-ify my reply.

In WordPress, the code is set so that when the Enter key is hit, it automatically inserts what is called a paragraph tag (or <p> tag) in the underlying code of your post. Line spacing in WordPress is so deeply established to the point that <p> and <br /> tags (single space) don’t even show up in the HTML view of the Edit post page.

SOLUTION A: Fix it at ground level. It is likely that I could go into the source code for a WordPress installation and alter it such that when editing a post, hitting Enter on the keyboard would produce a <br /> tag instead of a <p> tag, but that would make all future upgrades to the installation very cumbersome. I would either have to do a manual upgrade (time-consuming) and then do a line-by-line comparison of the code specific to where I did my customization (cumbersome, room for error) or do an automatic upgrade and then go back into the code and re-customize for the single-space (time-consuming, cumbersome). Any client with this customization would never be able to upgrade her own WordPress installation, as the customization would be over-written at each upgrade.

SOLUTION A is therefore not an option.

So what is a blogger to do? I Googled the issue and found many heated discussions about line-spacing in WordPress… far more on the topic than I would have expected. People are upset that

  1. WordPress automatically assumes a <p> tag whenever the Enter button is hit; and
  2. WordPress automatically removes from view the <p> and <br /> tags in the the HTML tab in the Edit Post page and that you cannot insert more than just a double space between paragraphs.

SOLUTION B: install a plugin. I searched for ways around #1 that did not involve some intense code hacks, and surprisingly found no plugins! Weird.

SOLUTION B isn’t an option either.

SOLUTION C: train yourself to adapt. What I did find is exactly what I was expecting. You have to live with the automatic double-spacing and when you want a single-space you have to train yourself to hit SHIFT-Enter, like I will do right here:
This will produce a <br /> or line break (single-space) tag in the code. (Hitting SHIFT-Enter again here.)
It is good for poetry, or maybe also for creating lists when you don’t want to use the ordered or unordered lists features.

  • By the way
  • this is an example
  • of an unordered list
  1. And this is
  2. an example
  3. of an ordered list

What your lists are formatted to look like (the bullet for the unordered list, the line height in the list, etc.) is determined by your theme’s stylesheet — it can be altered for your own customization without getting messed up whenever your blog is upgraded.

SHIFT-Enter is the way to go for this. Though I suspect (and hope) that because so many people have been frustrated with this issue for so long, it may be something WordPress addresses in a future update. It would be great if they created an on/off checkbox for this.

SOLUTION B, revisited: install a plugin and use it as a workaround. In my search for plugins I did find one that resolves problem #2 from above “WordPress automatically removes from view the <p> and <br /> tags in the the HTML tab” called PS Disable Auto Formatting. It is a good plugin for folks who like to use HTML view — bloggers who want a little more control over their code. It is also good to have if you want to force extra line breaks into your post. Why would you want to do that? Read on…

Let’s say you are inserting an image that you want text to wrap around, but you don’t want the next paragraph to start until below the image. If I am limited to one double-space (a <p> tag), then it looks like this.

Here is my next paragraph. Notice it starts higher up than I want.

And here is the paragraph I want associated with my picture, but I want my next paragraph to start lower down. Why? Maybe have more photos and I want paragraphs to be associated with each photo as opposed to captions.

.

(Note: I’ve had to do a little “hack” to make this post look like I am actually using the plugin I mention, because I’ve chosen not to install the plugin on this particular blog… yet. Can you figure out the “hack?”)

With this plugin that I discovered, your post retains as many <p> tags as you specify — it doesn’t force them all down to one as the WP default does. Liberal use of the Preview button is advised if you are going to do this, as your edit window is invariably going to be a different width than the width for content in your live blog.

I think I like this plugin. I’ll keep it on my test blog and play around with it for bit. A word of caution should you decide to use it: you do have to be careful as the plugin also allows for hitting the spacebar multiple times. The default always took more than one character space and culled it down to one, but with this plugin, if you hit the spacebar five times the plugin will allow the post to retain that spacing. Could be a good thing, could be a pain in the tush.

This all being said, a work-a-round could PROBABLY be arranged by combining the plugin above plus some fancy stylesheet coding to make your post content’s <p> tags look like they are single-spaced. Then, hitting just Enter would produce what LOOKS like a single-space and you would then have to force two <p> tags (hence the need for the plugin described above) to create the look of double-spacing. The catch is that you would have to go through all your past posts to manually add that ‘double-space’ in wherever you want it.

Anybody out there using this plugin — or one like it — and have more to add?


15 thoughts on “Tuesday Tech: Single-spacing in your WordPress post

  1. Pobba says:

    Thanks for the tutorial.

    I was confused at first…until I realized that I was confusing LINE SPACING with LINE HEIGHT.

    So here’s my question: How do I bring my lines closer together vertically (decrease LINE HEIGHT) within a paragraph?

    1. Abi Bowling says:

      Excellent question!

      In WordPress (and likely most other blogging platforms), line height is determined by your blog’s stylesheet. If you have familiarity with CSS (Cascading Style Sheets) then you can easily adjust your bog post line height. Or, you can hire a design firm like Waxcreative to design and skin your blog and we’ll take care of your line height for you! Oh wait… you already have….

  2. Bill says:

    I installed the plugin mentioned and it doesn’t seem to work.
    What I am also having a problem with is that I want to use forms. It seems that the form also double spaces… Just started using WP and not familiar enough to know how to adjust the form I am trying to create.

    1. Abi Bowling says:

      I’m sorry the plugin isn’t working for you (and I’m sorry for this delayed response)! You may want to check your version of WordPress to see if your plugin is supported for it. That would be my first troubleshooting move.

      Form plugins can be tricky, as I suspect most of them use their own CSS. You may need to go into your form plugin’s stylesheet and see if you can alter the line height from there. If you don’t know how to maneuver in CSS, my next suggestion is to contact the author of the plugin (or go to the plugin’s site) to see if any solutions are offered up there.

      Good luck!

  3. Kevin Kane says:

    Shift-enter leaves a line break between bullet points!

    Excellent! A simple but helpful tip! Thank you!

    (You can see I’m excited about this…)

    1. Abi Bowling says:

      Sometimes even the seemingly smallest and simplest tips can be huge on the web. Glad to be of help!

  4. Hi Abi,

    Thank you very much for this article. I googled my issue and your blog came right up. Shift enter did the trick for me! Your tip solved my problem. Thanks for the value packed article.

    Tammy McClure

    1. Abi Bowling says:

      My pleasure, Tammy!

  5. Dave Porter says:

    Hi There,

    This plugin has this feature, and adds more!
    http://www.laptoptips.ca/projects/tinymce-advanced/
    http://wordpress.org/extend/plugins/tinymce-advanced/
    Regards, Dave
    ps, There is something odd with this comment form – pressing tab between fields moves the page to the top (Chrome and FF)

  6. Morg says:

    Great write-up, I could not have said it better.

  7. John Hayes says:

    Abi, thank you. I have been googleing for the last hour trying to figure out how to add an additional line in a bulleted list. The Space / Enter solution was never mentioned on any other site.

    Thank You

    John Hayes

  8. 2013, internet has existed forever…. and we still have text editors that double space when you press enter.

    That’s wrong. Very very very wrong.
    It’s pathetic and wrong.
    And irritating, and wrong.

  9. Gary says:

    One of the key objectives of software like WordPress is to try and separate the content from how it looks. This is to enable you to change the theme without having to go back and edit your text to change the layout.

    Pressing the enter key has a very specific meaning. It means start a new paragraph. It does not mean start a new line (that’s what Shift&Enter is for).

    It is the designer of the theme who decides how much spacing there should be between lines and between paragraphs. Not WordPress.

    Always carefully check the text layout when selecting a WordPress theme. If you don’t like your theme’s spacing you can always change it – but unfortunately that requires knowledge of CSS (Cascading Style Sheets). There’s a good introduction to CSS to be found on w3Schools: http://www.w3schools.com/css/default.asp

    You also need to know enough HTML (again lots of information available at w3schools) to be able to identify *what* needs to be changed.

    By the way – The latest versions of the WordPress plug-in Jetpack include a very good CSS editor that checks your CSS as you write it, warning you of possible mistakes and problems.

    There are also lots of very specific HTML tags that you can use to make your text readable – Search Engines love them, so learning what they are and how to use them can be a great help with getting your site higher up the ranking than your competition’s.

    Don’t blame WordPress for the double spacing – it is just implementing the theme’s design.

Comments are closed.