Add a Table of Contents to a blog post with the Block Editor
Edit a post, page or single post type, click the Plus icon from the top left corner, search for Table of Contents and click on it to insert it into your post content.
Customize the design of the Table of Contents block
TOC Title
Just click on the title to edit it to something different than “Table of Contents”.
You can also change some settings like the HTML tag used (p, h2, div etc.) from its toolbar.
Styles
Click on the TOC block, then from the right panel, go to Styles tab.
Then edit every desired property to apply a custom design.
OL/UL
To convert the list from ordered to unordered, go to the Settings of the TOC block, and click “Display as unordered list” option.
Include / exclude Headings
Still from the Settings tab, you can also include / exclude specific headings by checking the desired ones.
Hide a specific heading from the Table of Contents block
Select the heading to hide (H1 to H6) from the post content.
From the right panel, add this CSS class from the Advanced section, Additional CSS class field:
seopress-toc-hidden
Save the post and clear your cache if necessary.
Add automatically a Table of Contents to each singular post / page or post type with the Full Site Editing
To avoid manually adding a table of contents block to each blog post for example, you can use FSE to add it only once.
Go to Appearance, Editor, Templates, and choose Single Posts template.
Add as usual the TOC block where you want it to be display.
We recommend to group it, then select the TOC block, and from its toolbar, click Align and choose “None” or “Wide Width“.
Save the template.
Test a blog post to see in live action!
