# Automatic Numbering for Headings (1, 1.1, 1.2...)

> Numbers the H2 and H3 headings inside any block with the class "wpide-numbered-headings" (1., 1.1, 1.2, 2.), ideal for guides, documentation and terms pages.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: headings, numbering, documentation, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-numbered-headings/

## Code

```css
.wpide-numbered-headings {
    counter-reset: wpide-h2;
}

.wpide-numbered-headings h2 {
    counter-increment: wpide-h2;
    counter-reset: wpide-h3;
}

.wpide-numbered-headings h2::before {
    content: counter(wpide-h2) ". ";
    opacity: 0.6;
}

.wpide-numbered-headings h3 {
    counter-increment: wpide-h3;
}

.wpide-numbered-headings h3::before {
    content: counter(wpide-h2) "." counter(wpide-h3) " ";
    opacity: 0.6;
}
```

## Notes

Add wpide-numbered-headings to the Post Content block (block themes) or to a Group that wraps your text.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Automatic Numbering for Headings (1, 1.1, 1.2...)" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/