Adding a table of contents in WordPress is easy with the dedicated Gutenberg block packed with Getwid WordPress blocks.
The table of contents WordPress block will help you add quick page jumps to the page sections based on the headings, including built-in H2-H6 heading styles.
The Purpose of the Table of Contents Gutenberg Block
The long wall of text is potentially off-putting for the readers so you can try to improve a post’s navigation by including a table of contents. It will bring the reader to the desirable page part in a click.
How it works
The block will generate a table of contents based on the headings presented on the page. It works very similarly to the Google docs table of contents, that’s why you firstly need to create a post with any type of headings. After that, insert the Table of Contents Getwid block:
You can surely insert a block in any part of a page – but usually it comes at the beginning. Note: you can add it just once to a page, that is, there can’t be several tables of contents on the same page.
The settings panel is modest – you can select which headings to show/hide and change the list styling.
The table of contents will show hierarchical headings and subheadings according to your post.
Note: you can use both the core Heading Gutenberg blocks as well as Advanced Headings by Getwid.
You can change the default table of contents styling options opting for ordered or unordered lists.
When you add new heading-separated content, don’t forget to click Update for the new items to appear in the table:
Your theme dictates styles (primarily colors and font settings) to your table of contents. We use Getwid Base (the starter Getwid theme) for the post examples.
To slightly highlight the section with the table of contents, you can use the Section block to create a fancier background, apply animation effects, or add more decorative elements to the block.
Download a Free Starter WordPress Theme for Getwid
As you see, you don’t need to install one more plugin to integrate this simple functionality that improves the navigation of the page.
Start building in Gutenberg with our custom-crafted theme and enjoy truly seamless customization experiences.
Check out Getwid Demo
Download Getwid Gutenberg Blocks Free
Install Getwid Base Starter Theme for Gutenberg