{"id":6272,"date":"2026-11-02T13:30:46","date_gmt":"2026-11-02T04:30:46","guid":{"rendered":"https:\/\/the-world-star.com\/?p=6272"},"modified":"2026-11-02T13:30:46","modified_gmt":"2026-11-02T04:30:46","slug":"post-73","status":"publish","type":"post","link":"https:\/\/the-world-star.com\/en\/server\/post-73-6272\/","title":{"rendered":"How to Add Automatic Heading Numbers in WordPress Using CSS"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>[Introduction]<\/strong><br>Are you manually adding numbers like \"1.\" or \"1.1\" to your headings when using the \"Table of Contents Plus (TOC+)\" plugin in WordPress?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you do this, rearranging your headings later becomes a headache because you have to rewrite every single number.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.\"<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configure the Plugin Settings<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First, enable the automatic numbering feature on the plugin side.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your WordPress Dashboard and navigate to <strong>[Settings] > [TOC+]<\/strong>.<\/li>\n\n\n\n<li>Check the box for <strong>\"Number headings\"<\/strong> and save the changes.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add the CSS Code<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next, add the code to automatically display numbers before your headings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>[Appearance] > [Customize] > [Additional CSS]<\/strong>.<\/li>\n\n\n\n<li>Copy and paste the following code, then click <strong>\"Publish.\"<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Reset counters for the Lightning post body area *\/\n.entry-body, .vk-post-body {\n  counter-reset: lightning-h2;\n}\n\n\/* Styling for h2 headings *\/\n.entry-body h2, .vk-post-body h2 {\n  counter-increment: lightning-h2;\n  counter-reset: lightning-h3;\n}\n.entry-body h2::before, .vk-post-body h2::before {\n  content: counter(lightning-h2) \". \";\n}\n\n\/* Styling for h3 headings *\/\n.entry-body h3, .vk-post-body h3 {\n  counter-increment: lightning-h3;\n}\n.entry-body h3::before, .vk-post-body h3::before {\n  content: counter(lightning-h2) \".\" counter(lightning-h3) \" \";\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b3\u30fc\u30c9\u306f\u6ce8\u610f\u3057\u3066\u3054\u4f7f\u7528\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.\"<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Even if you reorder your headings, the numbers will adjust themselves automatically, making your writing workflow much faster and more efficient!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>[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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2606,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_forum_subforum_count":0,"wpai_generated_summary":"","_locale":"en_US","_original_post":"https:\/\/the-world-star.com\/?p=6270","_lightning_design_setting":[],"wpai_meta_description":"","footnotes":""},"categories":[3],"tags":[789,790,81,783,787,788],"class_list":["post-6272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-automatic-table-of-contents","tag-heading-numbering","tag-lightning","tag-table-of-contents-plus","tag-css","tag-wordpress-customization","en-US"],"_links":{"self":[{"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/posts\/6272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/comments?post=6272"}],"version-history":[{"count":1,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/posts\/6272\/revisions"}],"predecessor-version":[{"id":6273,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/posts\/6272\/revisions\/6273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/media\/2606"}],"wp:attachment":[{"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/media?parent=6272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/categories?post=6272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the-world-star.com\/wp-json\/wp\/v2\/tags?post=6272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}