Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Automatic Numbered Headlines/Headings

  • Anonymous
    November 5, 2023 at 10:12 am

    Hi there,

    I know that we can add a Table of Contents with plugins (example: Easy TOC). But what I’m looking for is to get WordPress/GeneratePress to automatically (if possible) add numbers to each Heading (H2: 1, H3: 1.1, H4: 1.1.1, etc.).

    Example: https://rankmath.com/blog/change-the-font-size-in-wordpress/. You can see that each Heading starts with a number. “Subheadings” (such as H3, H4 etc.) adds the corresponding nested numbers. Yes, I could do this manually. But is there any option to do this automatically? Is there any option that would add/remove these numbers automatically each time you add/remove a Heading in posts AND pages (both!)?

    I followed your instructions here https://generatepress.com/forums/topic/numbered-headline/ by adding the CSS code, but this only works in POSTS with H2, not with H3, H4, H5, H6. And it doesn’t work in PAGES. Is there any code to make this work for H2 up to H6 in pages AND posts?

    Thanks in advance.

    Best regards.

    Joon

  • Fernando
    November 5, 2023 at 4:51 pm

    Hi Joon,

    Can you remove the custom code you have for the “numbers” first on the example page? I’ll try to draft a code for that page afterward.

  • Anonymous
    November 5, 2023 at 10:05 pm

    Hi Fernando,

    Thanks for replying. I removed the code. The example page has been moved. See below.

    Thanks again for your time.

    Best.

  • Fernando
    November 5, 2023 at 10:16 pm

    Try adding this through Appearance > Customize > Additional CSS to test:

    .entry-content {
    counter-reset: section-counter;
}

h2::before {
    content: counter(section-counter) ". ";
    counter-increment: section-counter;
}

h3::before {
    content: counter(section-counter) "." counter(sub-section-counter) " ";
    counter-increment: sub-section-counter;
}

h2 {
    counter-reset: sub-section-counter;
}

    This works for h2-h3s. If you want to add h4s , h5s, and h6s, can you add them in the page so I can see live how to code it for your site?

  • Anonymous
    November 6, 2023 at 12:31 am

    Wonderful Fernando, thank you! I just added the rest of the Headings.

    And any chance to get this done with the Ordered List? I would like to achieve:

    1.
    1.1
    1.2

    2.
    2.1
    2.2

    etc.

    Thanks again!

  • Fernando
    November 6, 2023 at 12:41 am

    Do you mean to transform it to an actual

    1. ? If so, that’s not possible without custom Javascript code which would be out of our scope.

      If what I did with CSS is alright, try updating the current code to this:

      .entry-content {
    counter-reset: section-counter sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter;
}

h2::before {
    content: counter(section-counter) ". ";
    counter-increment: section-counter;
}

h3::before {
    content: counter(section-counter) "." counter(sub-section-counter) " ";
    counter-increment: sub-section-counter;
}

h4::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) " ";
    counter-increment: sub-sub-section-counter;
}

h5::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) "." counter(sub-sub-sub-section-counter) " ";
    counter-increment: sub-sub-sub-section-counter;
}

h6::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) "." counter(sub-sub-sub-section-counter) "." counter(sub-sub-sub-sub-section-counter) " ";
    counter-increment: sub-sub-sub-sub-section-counter;
}

/* Reset sub-section-counter for h2 elements */
h2 {
    counter-reset: sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

h3 {
    counter-reset: sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

h4 {
    counter-reset: sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

h5 {
    counter-reset: sub-sub-sub-sub-section-counter;
}
  • Anonymous
    November 6, 2023 at 12:53 am

    Superb! Thanks a million Fernando! Have a good one.

  • Fernando
    November 6, 2023 at 12:57 am

    You’re welcome, Joonchen! Have a good one as well!

    If this would just apply to all posts, you’ll need to modify the code to this:

    .single-post .entry-content {
    counter-reset: section-counter sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter;
}

.single-post h2::before {
    content: counter(section-counter) ". ";
    counter-increment: section-counter;
}

.single-post h3::before {
    content: counter(section-counter) "." counter(sub-section-counter) " ";
    counter-increment: sub-section-counter;
}

.single-post h4::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) " ";
    counter-increment: sub-sub-section-counter;
}

.single-post h5::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) "." counter(sub-sub-sub-section-counter) " ";
    counter-increment: sub-sub-sub-section-counter;
}

.single-post h6::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) "." counter(sub-sub-sub-section-counter) "." counter(sub-sub-sub-sub-section-counter) " ";
    counter-increment: sub-sub-sub-sub-section-counter;
}

/* Reset sub-section-counter for h2 elements */
.single-post h2 {
    counter-reset: sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post h3 {
    counter-reset: sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post h4 {
    counter-reset: sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post h5 {
    counter-reset: sub-sub-sub-sub-section-counter;
}

    If it’s for pages, the code would be different again.

    If it’s for just one specific page or post, the code would be different as well.

    If this is the case, let us know so we can alter the code.

  • Anonymous
    November 6, 2023 at 1:12 am

    Thanks Fernando, this is just what I needed. Olé!

  • Fernando
    November 6, 2023 at 4:03 pm

    You’re welcome, Joonchen!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.