SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30
SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30 SPECIAL OFFER Get 30% OFF on All Qode Plugins Discount code: WOOCOMMERCE30
BACK TO TOP

How to Indent Paragraphs in WordPress

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.

Paragraph

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:

How to Indent Paragraphs in Gutenberg

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.

Add Block Gutenberg

We have populated the block with placeholder text – Lorem Ipsum. Here’s what it looks like in the preview:

Gutenberg Text 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.

Increase Decrease

And this is how your text will behave in a post.

Increase Decrease Preview

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
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

How to Indent Paragraphs in the Classic Editor

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.

Classic Editor Indent

This is what the text looks like after three instances of indent increase.

Classic Editor Indent Backend Preview

And this is what your post will look like to your visitors: exactly the same as with a Gutenberg classic block.

Classic Editor Indent Preview

How to Indent Paragraphs Using HTML Tags

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>.

Paragraph Tags

And this cascading effect will be clearly visible in your text.

Tags Preview

Now, you can also format Gutenberg’s classic block in the same fashion. Simply access the block settings (···) and select Edit as HTML.

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;”).

Paragraph Add HTML

And your paragraph will now be indented as you have specified.

Padding Preview

How to Indent a Single Line

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.

Appearance Customize

You will then need to add Additional CSS.

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.

Additional CSS Added

And now, the first line in each of your paragraphs will be indented by 40 pixels.

Indent Preview

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:

Add Class

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?

Post your comment

Comments0