Automatic Table of Content (TOC)

Block

This WordPress plugin creates a table of contents (TOC) from all headings in a post or page. The plugin provides a Gutenberg block, shortcode and a widget that can be used to display the TOC in different places on the website. The TOC is built by extracting headings from the post/page content, generating anchor links for each heading, and creating a nested list structure based on the heading levels.

Shortcode

Add the shortcode anywhere you want to display table of contents.

[toc]

Output:

Widget

Add the TOC widget anywhere you want to display table of contents.

Output:

Exclude Headings

To exclude headings from the TOC shortcode use the “exclude” attribute in the shortcode, for example:

[toc exclude="On this page, Comments"]

Output:

Styles

Currently the TOC can for now only be styled using custom CSS, like this:

/* Toc */
.toc{
	border-style:solid;
	z-index:99;
	position:fixed;
	background-color:#ffffff;
	transform:translatex(0px) translatey(0px);
	right:5%;
	top:20%;
	display:inline-block;
	
}

/* List */
.toc > ul, .toc > ul > ul{
	margin-left:0px;
	margin-bottom:0px;
}

/* List */
.toc > ul > ul > ul{
	margin-left:25px;
	margin-right:25px;
	margin-top:25px;
}

/* List */
.toc ul ul ul ul{
	margin-left:35px;
	margin-bottom:0px;
}

WPXSS.COM Blog: How to Add Custom CSS Code to WordPress

We are working on creating Themes that can easily be enabled with a few clicks.