WordPress isn’t intended to be a typesetting program with exact formatting layouts and text displays. Rather, the HTML flows around content and adjusts to varying screen widths depending on certain factors. But many types of writing require specific appearances. Math equations are one example. Another is poems. While not strictly necessary, many people prefer to have poetic language displayed differently compared to prose text. Either all italics, some other font or font size, or centrally aligned or indented. Whatever the reason, here’s how to indent paragraphs in WordPress in an elegant manner.
Keep in mind that for short snippets, you might simply be able to use the <blockquote> tag in the HTML editor or by clicking the quotation marks icon in the visual editor.
Many themes distinguish blockquotes by placing them in an indent and you may find that this does the job nicely. If not, there’s an inbuilt way to create indents and we’ll look at an advanced method as well.
Using the Basic Inbuilt Indent Feature
WordPress already allows you to indent and “outdent” the left edge of paragraphs in incremental steps. In the WordPress visual editor dashboard, simply select the paragraph you want or place the cursor within in and click the indent icon as shown below.
As you can see, this will “push” the paragraph in to the left at a distance of 30px. You can increase this by another 30px by pressing it again. This will only indent the left edge and it only increases it in multiples of 30px on its own. But that doesn’t mean we can’t do it manually! After creating at least one indent, click the “Text” tab in the editor and you’ll be taken to the HTML code.
As shown in the screenshot above, an inline style is added to the paragraph to give it the indent. You can manually change the “30px” to any number you wish!
The default indenting function in the WordPress visual editor works just fine for simple operations. But what if you want some more advanced formatting? Say we require 40 pixels indent on both the left hand and the right hand side? Sure, we can manually enter the styles in-line into the HTML for each paragraph but this can be a tedious process if you have a lot of them and if you regularly require this kind of formatting.
This problem cries out for a CSS solution and here’s how we go about it. To start with, go to the place where you normally create and edit your CSS styles. You can either directly make the changes in style.css in your active theme or you can create a child theme (which is recommended). I personally use the JetPack plug-in which provides me with a way to create my own CSS rules without danger of them being overwritten. Whatever method you choose, open up your editor and type in the following:
Here we create a new class that provides padding on both the left-hand and right-hand sides. Feel free to change the values to whatever you want depending on your formatting requirements. Next, go to your visual editor and open up the HTML code as before and add the “indent-both” class to each paragraph that you want to indent in this manner as shown in the screenshot below:
Once you’ve made the changes, save and preview your blog post and the paragraphs you have marked will be displayed like this:
You can now use the “indent-both” class on any paragraph you want in the future without having to manually style each paragraph with the required values. You can even have classes for different types of indenting with varying values to create a unique look and feel for each type of content.