{"id":21022,"date":"2021-03-03T15:00:24","date_gmt":"2021-03-03T14:00:24","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21022"},"modified":"2021-03-03T11:14:23","modified_gmt":"2021-03-03T10:14:23","slug":"how-to-indent-paragraphs-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-indent-paragraphs-in-wordpress\/","title":{"rendered":"How to Indent Paragraphs in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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 <strong>paragraph indent for the Gutenberg block editor<\/strong>, and, while it is often requested, does not come by default as a feature of the paragraph block. This doesn\u2019t mean that WordPress sites made with Gutenberg cannot have indented paragraphs: it is just a matter of knowing one\u2019s way around Gutenberg\u2019s options. Fortunately, you have us to help you with that.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The Classic Editor, on the other hand, makes it easy for the user to <strong>change paragraph indentation<\/strong>, 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-change-font-size-in-wordpress\/\">changing font size<\/a> or <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-change-text-color\/\">changing text color<\/a>, as in the example below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"490\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph.jpg\" class=\"attachment-full size-full\" alt=\"Paragraph\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#indent-paragraphs-in-gutenberg\">How to Indent Paragraphs in Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#indent-paragraphs-in-classic-editor\">How to Indent Paragraphs in the Classic Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#indent-paragraphs-using-html-tags\">How to Indent Paragraphs Using HTML Tags<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#indent-single-line\">How to Indent a Single Line<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"indent-paragraphs-in-gutenberg\"><\/a>How to Indent Paragraphs in Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]It is a little surprising that Gutenberg\u2019s 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a classic block to your WordPress post, click the <strong>plus<\/strong> sign and find the classic block in the menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Block-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Add Block Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Block-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Block-Gutenberg-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Block-Gutenberg-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Block-Gutenberg-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have populated the block with placeholder text \u2013 Lorem Ipsum. Here\u2019s what it looks like in the preview:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"490\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Gutenberg-Text-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Text Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Gutenberg-Text-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Gutenberg-Text-Preview-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Gutenberg-Text-Preview-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Gutenberg-Text-Preview-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the classic block has some text formatting controls above the text. In order to increase and decrease indent, use the <em>increase\/decrease indent buttons<\/em> in the bottom row of the toolbar. We have increased the indent twice.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease.jpg\" class=\"attachment-full size-full\" alt=\"Increase Decrease\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And this is how your text will behave in a post.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"490\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Increase Decrease Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-Preview-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-Preview-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Increase-Decrease-Preview-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the classic block behaves a little differently to the paragraph block: the <em>Enter<\/em> <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-keyboard-shortcuts\/#block-shortcuts\">keyboard shortcut<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"indent-paragraphs-in-classic-editor\"><\/a>How to Indent Paragraphs in the Classic Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Classic editor, luckily, has the in-built option for paragraph indentation. Gutenberg\u2019s classic block, in fact, simulates the classic editor. You can find the indent controls in the toolbar above the text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Indent\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This is what the text looks like after three instances of indent increase.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Backend-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Indent Backend Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Backend-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Backend-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Backend-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Backend-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And this is what your post will look like to your visitors: exactly the same as with a Gutenberg classic block.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Indent Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Preview-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Preview-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Classic-Editor-Indent-Preview-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"indent-paragraphs-using-html-tags\"><\/a>How to Indent Paragraphs Using HTML Tags<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will start with three paragraphs in text mode. The paragraph styling function you want is the <strong>padding-left<\/strong> function. In order to set indent for a paragraph, you need to preface the text with this HTML tag:<em> &lt;p style=&#8221;padding-left: XXXpx;&#8221;&gt;<\/em>, 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: <em>&lt;\/p&gt;<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragrpah-Tags.jpg\" class=\"attachment-full size-full\" alt=\"Paragraph Tags\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragrpah-Tags.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragrpah-Tags-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragrpah-Tags-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragrpah-Tags-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And this cascading effect will be clearly visible in your text.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"487\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Tags-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Tags Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Tags-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Tags-Preview-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Tags-Preview-768x386.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Tags-Preview-620x312.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, you can also format Gutenberg\u2019s classic block in the same fashion. Simply access the block settings (\u00b7\u00b7\u00b7) and select <strong>Edit as HTML<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Edit-as-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Edit as HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Edit-as-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Edit-as-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Edit-as-HTML-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Edit-as-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now add your styling parameter to the paragraph tag. We have gone with a 60 pixel indentation (<em>style=&#8221;padding-left: 60px;&#8221;<\/em>).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-Add-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Paragraph Add HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-Add-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-Add-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-Add-HTML-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Paragraph-Add-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your paragraph will now be indented as you have specified.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"490\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Padding-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Padding Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Padding-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Padding-Preview-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Padding-Preview-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Padding-Preview-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"indent-single-line\"><\/a>How to Indent a Single Line<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019s CSS.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do that, you need to navigate to the WordPress theme customizer. You will find it by selecting<strong> Appearance&gt;Customize<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will then need to add <strong>Additional CSS<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To indent the first line of all paragraphs by, say, 40 pixels, add the following code to your theme\u2019s custom CSS:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">article p {\r\ntext-indent:40px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click <strong>Publish<\/strong> to apply your changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-Added.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS Added\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-Added.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-Added-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-Added-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Additional-CSS-Added-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And now, the first line in each of your paragraphs will be indented by 40 pixels.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"484\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Indent-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Indent Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Indent-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Indent-Preview-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Indent-Preview-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Indent-Preview-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019t. All you need to do is add this code to your theme\u2019s additional CSS:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">p.custom-indent {\r\ntext-indent:40px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you need to click <strong>Publish<\/strong> to apply your changes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And then you need to add the <em>class=&#8221;custom-indent&#8221;<\/em> to your paragraph tag, like so:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Class.jpg\" class=\"attachment-full size-full\" alt=\"Add Class\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Class.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Class-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Class-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Class-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, as we have only added the custom indent class to the second paragraph, only the second paragraph has the first line indented.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s money for a premium solution. Here, it\u2019s time spent formatting.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, it only takes a little work to introduce paragraph indentation to your website text, whether you\u2019re 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?<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking for an easy way to indent paragraphs in your WordPress text? Our easy how-to has you covered.<\/p>\n","protected":false},"author":16990,"featured_media":21073,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,14,72,22,4,13],"class_list":["post-21022","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-core","tag-gutenberg","tag-html","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21022"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21022\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21073"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}