WordPress Tutorial Videos by WP101®

175+ WordPress tutorial videos for non-techies.

  • About Us
    • Top WordPress Products
    • Testimonials
  • WordPress Tutorials
    • Intro to WordPress
    • WordPress 101
    • AIOSEO 101
    • WP Mail SMTP 101
    • Easy Digital Downloads 101
    • WPCode 101
    • WP Simple Pay 101
    • RafflePress 101
    • Elementor 101
    • WPForms 101
    • Spectra 101
    • How to Blog Better
    • WooCommerce 101
    • Beaver Builder 101
    • Ninja Forms 101
    • WP Rocket 101
  • Help Forum
    • Hire a WordPress Expert
  • Blog
  • Contact
  • Sign In

How to create hanging indents in WordPress?

Get answers to your WordPress questions!

Tired of wasting time scouring Google for answers to your WordPress questions? Since 2008, we've helped countless WordPress site owners just like you get unstuck. Get answers to your WordPress questions — plus unlimited access to our entire library of 150+ WordPress tutorial videos. Why not join us today?

View Membership Options
WordPress Questions and Answers › How to create hanging indents in WordPress?
0 Vote Up Vote Down
C
Cary Northwest
asked 5 years ago

I need to do hanging indents for a reference page done in APA style. How do I do this? I am using the Pure & Simple theme.

1 Answers
0 Vote Up Vote Down
Shawn Hesketh answered 5 years ago

Hi Cary,

As you've no doubt discovered by now, there is no method in WordPress for creating hanging indents. To add hanging indents, you'll need to edit the underlying CSS (Cascading Style Sheet) that determines the look and layout of objects on your site.

The CSS will be something like this, though you can adjust the values to your needs:

style="margin-left:.5in; text-indent:-.5in"

But, the tricky bit is where to apply that CSS. This varies, depending on the theme you're using.

You said you're using the Pure & Simple theme. In that theme (and many others), the paragraphs on both pages and posts are wrapped in a section with the class of: .entry-content

So, you could go to: Appearance > Customize > Additional CSS and add the following:

.entry-content p { margin-left:.5in; text-indent:-.5in }

When you save your changes, that would apply a hanging indent to every single paragraph on every page or post on your site. That's not what you want. You probably want to only apply the hanging indent to certain paragraphs, or only on that one page.

To apply the CSS to only that one page, open the page in your browser and right-click, then select “Inspect Element” (or whatever your browser calls this function). That will open the underlying source code for the page.

Near the top, just underneath the <head></head> section, look for the <body class="page-id-1234">, where “1234” represents the unique page ID for that particular page.

With that variable, we can return to: Appearance > Customize > Additional CSS and add something like the following:

.page-id-1234 .entry-content p { margin-left:.5in; text-indent:-.5in }

That code will only affect paragraphs within the .entry-content section, and only on the page with the ID of: 1234

But what if you only want to apply the hanging indent to individual paragraphs?

In that case, instead of the CSS above, you can create a new, custom class like the following:

.hanging-indent { margin-left:.5in; text-indent:-.5in }

Be sure to save your changes.

Then, when you're creating a page or post, you can apply that special class to just the paragraph(s) you choose. In the Block Editor (Gutenberg), you'll first type your paragraph content. Then, in the Tools on the right-hand side, under the “Advanced” section, you'll find a field in which you can enter “Additional CSS class(es)”.

In that field, enter: hanging-indent (Or whatever name you chose for your custom class.)

Then, your custom CSS styling will be applied to that paragraph. Repeat this process for any additional paragraphs to which you wish to apply your custom, hanging-indent style.

Whew. That's a lot to take in.

I hope this helps!

Please login or register to join the conversation!

Share this with someone?

FacebookTweetLinkedIn

Most Recent Questions

  • I took the Sprectra 101 course. Now I’m building my won web site but I still have the Specra Style Guide and I think it’s causing an issue with Sprectra One. How do I get rid of the Style guide? asked by Mallis01, 1 year ago
  • Can you offer any tips, or best practices, on how to redesign and upgrade an old website? asked by FSAuthor, 1 year ago
  • How to create a blog in Spectra? asked by TJ, 1 year ago
  • How do I make all the words show Uppercase? asked by iLoveToLiveWell.com, 1 year ago
  • Why does my right side dashboard top look different than course. asked by Blues1947, 2 years ago

Site Links

  • About Us
  • Your Account
  • Products We ❤️
  • Affiliates
  • Testimonials
  • Blog
  • Contact Us

Courses

  • WordPress 101
  • WooCommerce
  • Elementor
  • Spectra
  • WPForms
  • Ninja Forms
  • View All →

Products

  • WP101.com
  • WP101 Plugin
  • Embed our videos on your site!

Recent Posts

  • How to Learn WordPress: The RIGHT Way! (2025 Roadmap + Tutorials)
  • Why Your WordPress Clients Keep Asking the Same Questions (And How to Fix It)
  • Best Online WordPress Courses 2025: Learn WordPress from Scratch
  • Best WordPress Order Form Plugins 2025 – Expert Review & Comparison
  • Find Your Ideal Domain Name: Best Registrars in 2025

Connect with Us

  • Email
  • Facebook
  • Twitter

WordPress Tutorials by WP101© 2008-2025 WP101® LLC. All rights reserved.
WP101® is a registered trademark with the U.S. Patent and Trademark Office.
WP101® is hosted by SiteGround.
Privacy Policy | Terms of Use | Disclosure | WP101 Coupon