How to Indent Text in WordPress

August 1, 2017

The indent text function is an important element and allows you the ability improve the appearance of your typography. The default indent in WordPress will shift your text left or right by 30 pixels. Unfortunately, you limited to just that. In this quick guide, we’ll discuss the standard option alongside how to create custom spacing in your indents.

Essentially, there are a couple different methods to choose from if you want to indent text in WordPress. They vary based on preference, as well as skill level, and are as follows: 

  1. You can use the indent function found within WordPress Visual Editor’s toolbar, which is similar to most word processing applications.
  2. Add custom spaced indents by applying the CSS paragraph tag in the text editor (“text” tab found in the WordPress Page or Post Editor).
  3. Indent the first line of text for each paragraph by created a CSS class in the WordPress customizer and manually adding the text-indent tag in the Text Editor
  4. Indent the first line of text for every paragraph in all articles site-wide

The latter three options provide you with the most flexibility since you can specify precisely, in pixels, how far you want to increase the indent and whether it is for the entire paragraph or just the first line (and only when specified or in every article). We discuss each option in great detail below.

Method 1:

Use the Increase/Decrease Indent Text Button in the Visual Editor

The indent function in the visual editor is very straightforward and by far the simplest, most familiar way of indenting text. This process is very similar to how you would indent text in a word processing application, for example, Microsoft Word. Simply place your cursor before the text you want to indent or select the group of text, and then press the increase indent or decrease indent button.

increaseindentwordpress

Of course, you can always increase/decrease one or more paragraphs using the same process.

Before we dive into the more complex methods, let’s quickly discuss how this indent function actually works. Essentially, pressing the indent function button in the toolbar inserts the paragraph CSS style attribute, or tag: “padding-left” with a default spacing of 30 pixels. Each additional time you press the increase/decrease button, an additional 30 pixels is added or removed, respectively. Using the increase/decrease indent feature in WordPress is by far the easiest method; it is done with the single click of a button; however, it does not allow you the ability to control the amount of spacing outside of 30 pixel increments.

Method 2:

Enter Your Own Custom Paragraph Tag to Indent Text in the Text Editor

By manually entering the same CSS style attribute, namely the paragraph tag, into the text editor, you can specify exactly how many pixels you want to indent your text.

Otherwise put, you can increase or decrease the size of the indent and don’t have to settle for just 30 pixel increments (WordPress default when using the indent function). To do this, click on the text tab in the far right corner of your page or post editor to switch to the HTML view.

This isn’t too complicated, all you need to do is insert the following open paragraph tag before the text you want indent:

<p style="padding-left: 20px;">

Note that I specified a value of 20 pixels as the indent value, rather than the aforementioned amount of 30 pixels. Next, enter the text you want to indent followed by the following end paragraph tag:

</p>

Here is an example of a correctly coded indented paragraph using 22 pixels as the indent value:

<p style="padding-left: 22px;">Your content goes here.</p>

Below is an example for reference:

customparagraphtag

Method 3:

Indent the First Line of a Single Paragraph

Indenting just the first line of a single paragraph is slightly more complex, but if you’re still with us up to this point, you should have no problem grasping this process. To do this, you first need to add a custom CSS class to your theme that includes a new custom paragraph tag, then manually add the corresponding tag from within the text editor. Did we lose you? Keep reading…

You can easily add a custom CSS class to your theme through the theme customizer by going to Appearance>Customize from the left-side admin navigation menu.

themecustomizer

Once in the theme customizer, click on the Additional CSS tab. This allows you enter separate, external CSS styles to customize the appearance of your site. Each CSS style that you enter will be saved for each of your themes. For this example, we would add the following CSS code to our theme:

p.text-indent-top {
    text-indent: 50px;
}

In short, this code tells the web browser that if a paragraph has the text-indent class, then it should indent the top line of the paragraph 50 pixels.

Next, we manually enter the CSS class before the paragraph in the text editor using the new tag:

<p class="text-indent-top">test</p>

toplineindent

Method 4:

Indent the First Line of all Paragraphs Sitewide

This aforementioned method only applies the top-line indent to those paragraphs that you apply to the text-indent class to in the text editor. To apply this style to all paragraphs in your pages and posts, that is, without having to manually apply the class to each and every one, then you’ll need to create an article paragraph CSS class, such as:

article p {
    text-indent: 50px;
}
Since the article CSS class is automatically applied to all paragraphs in your written copy, you don’t need to add the subsequent inline CSS class for each WordPress page and/or post.
We hope you found this article on indenting text in WordPress helpful!

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
Help
Leave us a message