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?