How to show Table of content in blog post in wordpress?

Question

How to show Table of content in blog post ? and we can scroll to particular heading on click of headings

Answer 1

1. Go to the post or page you want to add the table of contents to.

2. If there are none, create the headings that will be used as the items in the table of contents.

3. Click into the first heading block. A toolbar will appear. Gutenberg block toolbar for an H2 heading

4. Click the More Options button (the three vertical dots icon) and select Edit as HTML. Click Edit as HTML in WordPress editor-1

5. Add a unique ID name to the opening tag of the heading. An ID name is a unique identifier that’s added to the opening tag of an HTML element. Here’s what that looks like for a heading:

Section Name

6. Repeat for the rest of the headings on the page (or only the ones you want to include in the table of contents). For this demo, I'll use the ID names "anchor-1," "anchor-2," "anchor-3," and "anchor-4." Adding ID names to all headings in WordPress post

7. Scroll back to the top of the page. Click the Add Block button in the top toolbar. Add Block button in WordPress Gutenberg editor8. Click the Custom HTML block. This HTML block will allow you to create the table of contents.

Custom HTML block in Gutenberg editor

9. Add the table of contents with your jump links. Jump links are a specific type of hyperlink that readers can click on to "jump" to different sections on the same page. To create the jump links for this demo, I simply filled in the href attribute with a hashtag and the id name of the headings I wrote in the previous step. To create your table of contents, copy and paste the following HTML into the block:

<div class="toc">


<p>Table of contents</p>


<ol>


<li><a rel="noopener" target="_blank" href="#anchor-1">Section 1</a></li>


<li><a rel="noopener" target="_blank" href="#anchor-2">Section 2 </a></li>


<li><a rel="noopener" target="_blank" href="#anchor-3">Section 3 </a></li>


<li><a rel="noopener" target="_blank" href="#anchor-4">Section 4 </a></li>


</ol>


</div>

10. Customize the section names and jump links so that they link to the correct sections.