How to Add Automatic Heading Numbers in WordPress Using CSS

---

---

[Introduction]
Are you manually adding numbers like "1." or "1.1" to your headings when using the "Table of Contents Plus (TOC+)" plugin in WordPress?

If you do this, rearranging your headings later becomes a headache because you have to rewrite every single number.

In this article, I will show you how to automatically number your headings (h2 and h3) in the post body using CSS. This code is fully optimized for the popular WordPress theme "Lightning."

Configure the Plugin Settings

First, enable the automatic numbering feature on the plugin side.

• Go to your WordPress Dashboard and navigate to [Settings] > [TOC+].
• Check the box for "Number headings" and save the changes.

Add the CSS Code

Next, add the code to automatically display numbers before your headings.

• Navigate to [Appearance] > [Customize] > [Additional CSS].
• Copy and paste the following code, then click "Publish."

css

/* Reset counters for the Lightning post body area */
.entry-body, .vk-post-body {
  counter-reset: lightning-h2;
}

/* Styling for h2 headings */
.entry-body h2, .vk-post-body h2 {
  counter-increment: lightning-h2;
  counter-reset: lightning-h3;
}
.entry-body h2::before, .vk-post-body h2::before {
  content: counter(lightning-h2) ". ";
}

/* Styling for h3 headings */
.entry-body h3, .vk-post-body h3 {
  counter-increment: lightning-h3;
}
.entry-body h3::before, .vk-post-body h3::before {
  content: counter(lightning-h2) "." counter(lightning-h3) " ";
}

コードは注意してご使用ください。

Conclusion

Once you apply this setting, all you need to do is type the text for your headings. The system will automatically display them as "1. Heading" or "1.1 Subheading."

Even if you reorder your headings, the numbers will adjust themselves automatically, making your writing workflow much faster and more efficient!

---