How2: Insert Space Between Paragraphs in WordPress (without using and Tags)

in Blogging, How2: Tutorials, Tips, WordPress

Here’s a quick tip! WordPress has this frustrating habit of stripping extra and tags out of your posts once you publish them. This is particularly annoying because the tags stay in when you preview, and aren’t stripped until you actually publish.

Instead of using or tags in your post (which isn’t really kosher anyway), try using this:

This should give you that extra space that you’re looking for. If you need even more space, change the 4em (to 5 or 6em, etc.) until you get the amount of space you’re looking for.

Also, if you’re ever trying to post code like I did above you’ll need to use “& l t ;” in place of the “< " and “& g t ;” in place of “>” (remember to remove the spaces and don’t include the quotes). Otherwise the browser will recognize the code you’ve typed, and format accordingly.

Hope that helps!

Popularity: 100% [?]

by Tyler | January 23rd, 2009

« How2: Change the Title from Lowercase to Uppercase in the “Clean Machine” WordPress Template

Is Amazon Cheating Me out of 25% of My Associates Earnings? Could Amazon Be Stealing? »

30 USER COMMENTED IN THIS POST

Subscribes to the post Comment Rss or Leave A Trackback

svorass said,

in February 19th, 2009 at 7:33 pm

cool - thanks!

WPuser said,

in March 1st, 2009 at 7:43 pm

Worked perfectly! Thanks!!

admin said,

in March 1st, 2009 at 11:21 pm

No problem. Glad the fix worked for both of you!

jypsy said,

in March 8th, 2009 at 9:06 am

I still can’t get this to work. I even changed the height to 10 instead of 4 and still no luck. Is this supposed to work for the most recent version of wordpress? The code I’m using is:

Have you found anything else that might work?
Thank you!

jypsy said,

in March 8th, 2009 at 9:07 am

haha… well the code worked above. But still can’t get it to work on my wordpress blog. Any help is appreciated. Thanks!

Pressure Wash News said,

in March 8th, 2009 at 10:43 pm

Put this code where.. directly into the code editor? This did nothing for me. I am at wit’s end trying to figure out what is causing the paragraph formatting issue.

admin said,

in March 8th, 2009 at 10:55 pm

Jypsy and Pressure Wash, what version of WP are you using? I’ve personally tested this and I know that it works on WP 2.7 - are you using the brand new 2.7.1 version?

As far as where to put the code, you need to put it in the HTML code editor, not in the visual editor.

Does that help?

jypsy said,

in March 9th, 2009 at 9:53 pm

just wanted to follow up. i’m using wordpress 2.7.1 and finally found something that worked for adding space between paragraphs (i put it in quotes so it wouldn’t dissapear:

“ ”

i also realize that when i tried to follow the above How2 recommendation i missed the last step:
use “& l t ;” in place of the “”

so that may have had something to do with ty’s suggestion not working for me. regardless i know the above works as well.

jypsy said,

in March 9th, 2009 at 9:54 pm

hmmm… not sure how to post it without it dissapearing. any suggestions?

admin said,

in March 9th, 2009 at 10:03 pm

Hey Jypsy,

I assume you’re talking about the “& n b s p ;” trick. I’ve inserted extra space so it won’t disappear on me too.

I’m glad it worked for you, but I’m bummed you went through all that trouble. But the fact that you’re using WP 2.7.1 is good to know. I’ll need to look into it to see if my trick is broken for the newest version of WP. I hope not.

Thanks for stopping back by to let everyone know what finally worked for you.

Tyler

jypsy said,

in March 9th, 2009 at 10:20 pm

yep, that’s the one. thanks!

Jeff said,

in March 20th, 2009 at 4:11 pm

The only way I am able to get the paragraphs breaks to remain is to write my post in an HTML editor (like Dreamweaver) My actual paragraph remains in tags and I have to add a “ ” between each real paragraph. For example,

This is the first paragraph This is the second paragraph Very sloppy I know, but it works.

Jeff said,

in March 20th, 2009 at 4:13 pm

sorry, lost the actual code… here’s the repost.

The only way I am able to get the paragraphs breaks to remain is to write my post in an HTML editor (like Dreamweaver) My actual paragraph remains in tags and I have to add a “ & n b s p ; ” between each real paragraph. For example,

This is the first paragraph & n b s p ; This is the second paragraph Very sloppy I know, but it works.

Internet Marketing Tips said,

in March 23rd, 2009 at 3:06 pm

Here is a really bad hack, but it seems to work in 2.7.1. Use a transparent 1×1 png or gif and set its height to however much space you want. for instance: <img src=”spacer.png” width=”1″ height=”100″ />
Your image has to be an actual image or wordpress will ignore it.

Another thing i noticed is that when you add spaces in the WYSIWYG editor, it adds this in the HTML editor:

I tried using those but it only worked some of the time.

I am hoping I won’t need to revert back to tables. Hopefully wordpress will get this worked out soon, or someone will come up with a plugin that works for 2.7.1. I think I have tried them all and none of them have worked.

Jack said,

in April 15th, 2009 at 9:44 am

Hello. This is good stuff, thanks. I’ve also found out an outstanding solution here: http://www.picker.it/tricks/space-between-paragraphs-in-wordpress.html

I think it brings a plus because you don’t need to use any code (after you’ve made a simple change to your CSS file): just press Enter in the visual view, and you’re done.

videos said,

in April 24th, 2009 at 1:51 pm

THANK YOU SO MUCH

BestHelen said,

in June 5th, 2009 at 4:54 pm

I have found what i was looking for !!! thx )

Akis said,

in July 8th, 2009 at 9:31 am

cool,thanks alot

Herrin said,

in November 10th, 2009 at 10:34 pm

This is a hack and you’re much better off editing the CSS so that you don’t ever have to do this at all.

in your source code, find the class surrounding each post. To find this accurately you may have to use Firebug addon for Firefox. hover over the text on a paragraph on your siteto find the exact class to edit.

Add this to style.css:

(example only)

.entry p {padding:0 0 10px 0;}

Change the 10px amount in there to whatever.

if you want extra on a specific post then try this:

This CSS solution creates consistency and saves you doing all this crazy editing every time you write a post.

This is what CSS is for!

Hope this helps.

Tyler said,

in November 11th, 2009 at 5:55 am

Hack: Definition (Dictionary.com)

(Computers) to devise or modify (a computer program), usually skillfully.

Thanks for the compliment!

However, (and I should have made this clear), I wouldn’t expect anyone to use this approach to format their entire site. I was expecting people to reach for this approach when they occasionally needed extra space between objects or paragraphs in their site where they aren’t normally in need of extra space. In which case CSS would be less useful, unless you wanted to write code specifically for that paragraph or object.

However, can you provide specific examples of where the “hack” suggested above might cause problems (for instance, older browsers) so everyone can learn from your experience? I think that would be helpful, especially to those who are new to the web.

Thanks!

Quincy said,

in December 2nd, 2009 at 1:59 pm

Great post! worked like a charm.

Katrina said,

in January 4th, 2010 at 8:01 am

Thanks…that was driving me crazy! Good work!

Mary Beth said,

in February 16th, 2010 at 9:10 pm

Thank you! I was about to lose my mind. Wish space was easier to create.

Tyler said,

in February 17th, 2010 at 9:42 am

Hi Mary Beth, Glad I could help!

APT said,

in April 10th, 2010 at 9:17 am

I finally found something that works! I just couldn’t get a white space to hold after hitting the update button in my post. Thanks a million for this tip!! Works perfect.

rodlie said,

in April 13th, 2010 at 8:10 pm

I don’t understand where I’m supposed to put this code? In between the paragraphs in the html mode? Where?

Social Media Master said,

in May 6th, 2010 at 3:21 pm

Thank you so much! I have been searching for a wp plugin or something for days, because my current theme doesnt give me spacing at all! This helps soooo much!

Ajit said,

in May 21st, 2010 at 12:50 am

Wow! Excellent tip. It worked well.

Lou said,

in May 25th, 2010 at 5:20 pm

Wow..super thanks. It worked on 2.9