How to Indent the First Line of Your Paragraphs in WordPress 2.5

This is in response to chris­tine, who has asked else­where how to intent the first lines of her para­graphs in Word­Press 2.5; my response in the com­ments there was less than sat­is­fac­to­ry due to the strip­ping of my code exam­ples and so on, so here is a slight­ly more for­mal tutorial.

As you’re read­ing this, notice that (unless I some­time in the future change the style ;-) the para­graphs have no inten­tion on their first lines; open most any book, though, and you’ll see that para­graphs are gen­er­al­ly indent­ed. I’m not entire­ly sure what the typo­graph­i­cal rea­sons behind line indent­ing in aside from sim­ple aes­thet­ics (in oth­er words, it just looks bet­ter), but that isn’t the ques­tion I’m here to answer. So, onward: How can we indent the first lines in WordPress?

Good ques­tion. And it’s one eas­i­ly answered, I think. Actu­al­ly, there are two answers. The first is a stop­gap solu­tion that cer­tain­ly works but it’s less than ide­al for a vari­ety of rea­sons; the biggest of these rea­sons is that the solu­tion involves inline styling, which is just bad seman­tics. The sec­ond solu­tion is a more per­ma­nent, much more flex­i­ble solu­tion which involves adding the inden­tion code to your blog’s design’s style sheet. The big advan­tage of the sec­ond solu­tion over the first is that if you ever want to change the style of the indent­ed para­graphs, you only have to change the code in one place (the style sheet) rather than in every post where­in you used indent­ed paragraphs.

Did you notice the pre­vi­ous para­graph was indent­ed? Thanks to the stop­gap solu­tion, I was able to quick­ly add the indent in to show off what we’re talk­ing about here. Now, what is that solution?

Well, I usu­al­ly write using the “Visu­al” tab of the edi­tor in Word­Press 2.5; to do my text inden­tion, I had to switch over to the “HTML” tab briefly. I had already typed my para­graph, so it was sim­ply a mat­ter of wrap­ping suf­fi­cient­ly styled P tags around it, such that the final result looks like this:

<p style="text-indent: 2em;">Good question. And it's one easily answered, I think. Actually, there are two answers. The first is a stopgap solution that certainly works but it's less than ideal for a variety of reasons; the biggest of these reasons is that the solution involves inline styling, which is just bad semantics. The second solution is a more permanent, much more flexible solution which involves adding the indention code to your blog's design's style sheet. The big advantage of the second solution over the first is that if you ever want to change the style of the indented paragraphs, you only have to change the code in one place (the style sheet) rather than in every post wherein you used indented paragraphs.</p>

That’s all there is to it! Sim­ply encase your para­graphs in styled P tags as I have done above, and your para­graphs will indent on the first lines. Nice and simple!

If, how­ev­er, you want a more per­ma­nent solu­tion, you’ll want to open up your design’s style sheet, usu­al­ly named style.css. Your theme may sup­port a custom.css or some oth­er upgrade-proof style sheet that you can tweak with­out wor­ry­ing about future theme upgrades; if it does, edit it rather than style.css.

Then, on a new line at the bot­tom, insert code sim­i­lar to this — you can for­mat it sim­i­lar­ly to the rest of the code in the file if you so choose:

p {
	text-indent: 2em;
}

After sav­ing that file and refresh­ing your brows­er cache, you should notice that all P tags are now indent­ed on your site. If this caus­es inden­tion in places you don’t want, you’ll want to be more spe­cif­ic in your styling; iso­late the name of the con­tain­er which holds your post con­tent and add it to the style so that only para­graphs with­in post con­tent are styled. For Word­Press’ default Kubrick theme, you could use this code:

.entry p {
	text-indent: 2em;
}

You’re encour­aged to try your own vari­a­tions; if you break the style, all you have to do is remove that bit of styling to revert your changes!

And if any­one needs any more help (espe­cial­ly you, chris­tine), just drop a comment.

17 thoughts on “How to Indent the First Line of Your Paragraphs in WordPress 2.5”

  1. Now how nice of you is this?? Thank you so much. And it worked excellent!

    I tried the p style tag again, and odd­ly it worked fine today. The plan­ets must have been lined up wrong yesterday.

    But if I can just do it in the CSS, it makes more sense. It’s perfect.

    And best of all, I learned some new stuff.

    I’ve read all your tech­nol­o­gy posts. They’re great. Hmmm — you could have peo­ple request a post on a cer­tain top­ic! I have a list about 60 long. You’re a great explain­er and you under­stand WP real­ly well.

    Thanks again. You’ve made my day and reduced my list to 59.

  2. chris­tine: I’m glad you were able to get your para­graph indent­ing to work; hap­py to help!

    And I’d also be more than hap­py to take requests. The hard­est part about blog­ging is com­ing up with some­thing to blog about; ful­fill­ing requests just makes things eas­i­er for me. :)

    So if you have any oth­er blog­ging (Word­Press, design, PHP, etc.) things you want to ask about, feel free! I’ll do my best to get an answer.

  3. Rick! My friend, you may regret your offer. I can feed you top­ics till the prover­bial cows come home. I so want to under­stand design bet­ter. I’m using the Rev­o­lu­tion theme.
    Sor­ry for the delay answer­ing, my com­put­er had a ner­vous break­down with the WP 2.5.1 upgrade. It’ s bet­ter now.
    So here’s one I can­not seem to solve : Gra­vatars, Avatars, MyBLogLog, and Get­ting Your Pic­ture To Show Up.
    The whole top­ic is a blur. The MyA­vatars plu­g­in on my blog is inac­tive because I can’t fig­ure out how to use it, but it seems to require some activ­i­ty at MyBLogLog. I don’t get what MyBLogLog does, but I think it has to do with get­ting your pic­ture to show when you make a com­ment on some­one else’s site, if their theme sup­ports pic­tures in com­ments ? Maybe there’s a plu­g­in that’s better?
    Very inter­est­ed to read your thoughts and advice.
    Thanks much.

  4. chris­tine: Okay, so it prob­a­bly won’t be tonight… Sorry!

    How­ev­er, if you want, send me a copy of your the­me’s comments.php file, and I’ll add the nec­es­sary code to get avatars enabled on your site. ( [email protected] )

    I’ll still post about it, but it’ll get you your solu­tion that much quicker. :)

  5. Thanks. Till now I was forced to fol­low the default para­graph style of with­out any indents. Using this sim­ple method I have been able to indent my para­graphs in my lat­est post . I will not do it for the posts already pub­lished since it involves man­u­al typ­ing. I will use it on all my para­graphs hence­forth. Thanks a lot.

  6. Please tell me how to use “text align: jus­ti­fy” and “text inden­tion” togeth­er. I tried both, but the result just shown only justify. :(

  7. Hey thanks! Great tips. It was nice to final­ly find a place with easy to under­stand sug­ges­tions. One ques­tion though…

    When I do what you sug­gest it auto­mat­i­cal­ly dou­ble spaces everything.

    How can you have the indent and also no extra space before the next line of text?

    Thanks!

  8. I’ve nev­er writ­ten html before. My kids all can.
    I’m a writer with this fresh blog. Believe it or not, they make a writer pay to indent the para­graphs of his short stories!
    Any­way, I fol­lowed your instruc­tions and hit the “pre­view” but­ton, and there it was! Just like you said it would be.
    I thank you and my “old school” read­ers thank you. By the way, I was charged $30.00 for the upgrade.

  9. Thanks for this Rick. Worked liked magic.

    Here’s a top­ic for you. How do I add the “You may also enjoy…” sec­tion to my blog as you have in this post? I pre­sume you are not doing that man­u­al­ly each time?

  10. Hey, so I used this and it’s great. It indents the first line of the entire blog… but that’s about it. I want it to indent after every line­break. How can I make this pos­si­ble? You see, I’m using my blog to house my fic­tion work, and as you know, it’s impor­tant to indent with every line­break, espe­cial­ly with char­ac­ter dia­logue. So how can I code that into my blog?

    Sec­ond ques­tion; Is there a way we can use this set­ting as one of the “head­er” options. For instance, can I for­mat Header6 to just have the exact same styling as a para­graph style, and use indent-after-ever-line­break, so that when­ev­er I want my blog post to have auto­mat­ic indents, all I have to do is select Header6 as its para­graph option?

Leave a Comment

Your email address will not be published.

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

The Orion Oratory