How to Indent Paragraphs in WordPress
WordPress prides itself on being user friendly, and with good reason: its capabilities are practically innumerable, its interface intuitive and easy to understand even for users without a strong technical background. There are a few effects that may require some little effort to achieve, though, depending on the editor you are using. One of them is paragraph indent for the Gutenberg block editor, and, while it is often requested, does not come by default as a feature of the paragraph block. This doesn’t mean that WordPress sites made with Gutenberg cannot have indented paragraphs: it is just a matter of knowing one’s way around Gutenberg’s options. Fortunately, you have us to help you with that.
The Classic Editor, on the other hand, makes it easy for the user to change paragraph indentation, on top of other features which you can use to your advantage (and limitations which can easily be overcome). We will cover all of that in this article as well.
Paragraph indentation can enhance reader experience, making the rows shorter, and can provide an aesthetic value, depending on the style and layout of your website. You can also use indentation to emphasize certain paragraphs, perhaps as an alternative to changing font size or changing text color, as in the example below.
This apparently overlooked bit of text formatting is exactly what we want to talk about in this tutorial. We will show you how to indent paragraphs in WordPress in several different ways:
It is a little surprising that Gutenberg’s paragraph block does not have the indent functionality by default. There is, however, a workaround, and that consists of not using a paragraph block for text: the block you need is the classic block.
To add a classic block to your WordPress post, click the plus sign and find the classic block in the menu.
We have populated the block with placeholder text – Lorem Ipsum. Here’s what it looks like in the preview:
Now, the classic block has some text formatting controls above the text. In order to increase and decrease indent, use the increase/decrease indent buttons in the bottom row of the toolbar. We have increased the indent twice.
And this is how your text will behave in a post.
Now, the classic block behaves a little differently to the paragraph block: the Enter keyboard shortcut will not create a new block. It will simply add a new row to your text. This way, you could format a long text as a single Gutenberg classic block with the same indentation.
Qode Themes: Top Picks
View Collection
The Classic editor, luckily, has the in-built option for paragraph indentation. Gutenberg’s classic block, in fact, simulates the classic editor. You can find the indent controls in the toolbar above the text.
This is what the text looks like after three instances of indent increase.
And this is what your post will look like to your visitors: exactly the same as with a Gutenberg classic block.
Using the increase indent command will indent your paragraph by a set increment. You can do the same with HTML tags in the text mode of the classic editor, but you can also do more: you can indent your paragraphs by however many pixels you want.
We will start with three paragraphs in text mode. The paragraph styling function you want is the padding-left function. In order to set indent for a paragraph, you need to preface the text with this HTML tag: <p style=”padding-left: XXXpx;”>, where, of course, you will swap the placeholder XXX with the number of pixels. You will, of course, need to close the tag, too, by ending the paragraph with: </p>.
And this cascading effect will be clearly visible in your text.
Now, you can also format Gutenberg’s classic block in the same fashion. Simply access the block settings (···) and select Edit as HTML.
You can now add your styling parameter to the paragraph tag. We have gone with a 60 pixel indentation (style=”padding-left: 60px;”).
And your paragraph will now be indented as you have specified.
But what if you want to indent the first line of a paragraph, not the entire thing? There is a way to do that, too, but that requires some little fiddling with your theme’s CSS.
To do that, you need to navigate to the WordPress theme customizer. You will find it by selecting Appearance>Customize from your WordPress dashboard.
You will then need to add Additional CSS.
To indent the first line of all paragraphs by, say, 40 pixels, add the following code to your theme’s custom CSS:
article p {
text-indent:40px;
}
Click Publish to apply your changes.
And now, the first line in each of your paragraphs will be indented by 40 pixels.
You can also indent the first line only for selected paragraphs, if you want. To do that, you need to create a special class of paragraph which has the requisite indent, and assign it to the paragraphs you choose. Sounds complicated, but really isn’t. All you need to do is add this code to your theme’s additional CSS:
p.custom-indent {
text-indent:40px;
}
Of course, you need to click Publish to apply your changes.
And then you need to add the class=”custom-indent” to your paragraph tag, like so:
And, as we have only added the custom indent class to the second paragraph, only the second paragraph has the first line indented.
Of course, this method may be time-consuming, but getting exactly the look you want may, and often does, require an investment on your part. Sometimes it’s money for a premium solution. Here, it’s time spent formatting.
In Conclusion
As you have seen, it only takes a little work to introduce paragraph indentation to your website text, whether you’re thinking of whole paragraphs or just the first line, for a more traditional look. If you feel like your website could benefit from this sort of text formatting and paragraph styling, why not try it?
