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

This is in response to christine, who has asked elsewhere how to intent the first lines of her paragraphs in WordPress 2.5; my response in the comments there was less than satisfactory due to the stripping of my code examples and so on, so here is a slightly more formal tutorial.

As you’re reading this, notice that (unless I sometime in the future change the style ;-) the paragraphs have no intention on their first lines; open most any book, though, and you’ll see that paragraphs are generally indented. I’m not entirely sure what the typographical reasons behind line indenting in aside from simple aesthetics (in other words, it just looks better), but that isn’t the question I’m here to answer. So, onward: How can we indent the first lines in WordPress?

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.

Did you notice the previous paragraph was indented? Thanks to the stopgap solution, I was able to quickly add the indent in to show off what we’re talking about here. Now, what is that solution?

Well, I usually write using the “Visual” tab of the editor in WordPress 2.5; to do my text indention, I had to switch over to the “HTML” tab briefly. I had already typed my paragraph, so it was simply a matter of wrapping sufficiently 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! Simply encase your paragraphs in styled P tags as I have done above, and your paragraphs will indent on the first lines. Nice and simple!

If, however, you want a more permanent solution, you’ll want to open up your design’s style sheet, usually named style.css. Your theme may support a custom.css or some other upgrade-proof style sheet that you can tweak without worrying about future theme upgrades; if it does, edit it rather than style.css.

Then, on a new line at the bottom, insert code similar to this — you can format it similarly to the rest of the code in the file if you so choose:

p {
	text-indent: 2em;
}

After saving that file and refreshing your browser cache, you should notice that all P tags are now indented on your site. If this causes indention in places you don’t want, you’ll want to be more specific in your styling; isolate the name of the container which holds your post content and add it to the style so that only paragraphs within post content are styled. For WordPress’ default Kubrick theme, you could use this code:

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

You’re encouraged to try your own variations; if you break the style, all you have to do is remove that bit of styling to revert your changes!

And if anyone needs any more help (especially you, christine), 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 oddly it worked fine today. The planets 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 technology posts. They’re great. Hmmm – you could have people request a post on a certain topic! I have a list about 60 long. You’re a great explainer and you understand WP really well.

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

  2. christine: I’m glad you were able to get your paragraph indenting to work; happy to help!

    And I’d also be more than happy to take requests. The hardest part about blogging is coming up with something to blog about; fulfilling requests just makes things easier for me. :)

    So if you have any other blogging (WordPress, 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 topics till the proverbial cows come home. I so want to understand design better. I’m using the Revolution theme.
    Sorry for the delay answering, my computer had a nervous breakdown with the WP 2.5.1 upgrade. It’ s better now.
    So here’s one I cannot seem to solve : Gravatars, Avatars, MyBLogLog, and Getting Your Picture To Show Up.
    The whole topic is a blur. The MyAvatars plugin on my blog is inactive because I can’t figure out how to use it, but it seems to require some activity at MyBLogLog. I don’t get what MyBLogLog does, but I think it has to do with getting your picture to show when you make a comment on someone else’s site, if their theme supports pictures in comments ? Maybe there’s a plugin that’s better?
    Very interested to read your thoughts and advice.
    Thanks much.

  4. Thanks. Till now I was forced to follow the default paragraph style of without any indents. Using this simple method I have been able to indent my paragraphs in my latest post . I will not do it for the posts already published since it involves manual typing. I will use it on all my paragraphs henceforth. Thanks a lot.

  5. Please tell me how to use “text align: justify” and “text inden­tion” together. I tried both, but the result just shown only justify. :(

  6. Hey thanks! Great tips. It was nice to finally find a place with easy to understand suggestions. One question though…

    When I do what you suggest it automatically double spaces everything.

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

    Thanks!

  7. I’ve never written 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 paragraphs of his short stories!
    Anyway, I followed your instructions and hit the “preview” button, and there it was! Just like you said it would be.
    I thank you and my “old school” readers thank you. By the way, I was charged $30.00 for the upgrade.

  8. Thanks for this Rick. Worked liked magic.

    Here’s a topic for you. How do I add the “You may also enjoy…” section to my blog as you have in this post? I presume you are not doing that manually each time?

  9. 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 linebreak. How can I make this possible? You see, I’m using my blog to house my fiction work, and as you know, it’s important to indent with every linebreak, especially with character dialogue. So how can I code that into my blog?

    Second question; Is there a way we can use this setting as one of the “header” options. For instance, can I format Header6 to just have the exact same styling as a paragraph style, and use indent-after-ever-linebreak, so that whenever I want my blog post to have automatic indents, all I have to do is select Header6 as its paragraph option?

Join the Discussion

Your email address will not be published. Required fields are marked *

Comments are welcomed and should be posted in accordance with the comment policy.