Example
The TOC-Element in all Tutorials comes from that code. So I didn’t include another one here.
Video Walkthrough
Step-by-step guide
Add a Container
All you need to do is adding a Container and assign a specific ID to it.

Skip Elements
You can exclude elements from the TOC by assigning them a class of .wcd_tableOfContents_skip
. In my Example I don’t want that Heading “Table of Content” be included in the list of Headings because it acts as a Heading for the TOC itself.

Enqueue & Initialize the TOC
That’s it. Now you just need to enqueue the files and set the options to what you need. A list of the available options can be found below:
wp_enqueue_style(‘wcd_toc_css’) is only needed if you don’t want to style the TOC yourself. You can also use the predefined classes. You can look them up in the shipped CSS file!
<?php
wp_enqueue_script('wcd_toc_js');
//CSS is only needed if you don't want to style the TOC yourself!
wp_enqueue_style('wcd_toc_css');
add_action('wp_footer', function() {
?>
<script>
const myTOC = new WCD_toc({
target : '#myTOC',
taglist : [ 'h1', 'h2', 'h3', 'h4' ],
highlight : [ 'h2', 'h3' ],
});
</script>
<?php
}, 99);
?>
Options & Parameter to adapt
Option Name | Type | Default Value | Note |
---|---|---|---|
target | String | - | Pass the ID of your TOC-Container. |
taglist | Array | - | Pass an Array of HTML-Tags you want to show up in the TOC-Element. For Example: |
highlight | Array | - | If you use that option the "scrolltrigger" feature get's activated by default. Pass a List of Tags you want to Highlight, for example: |
Full Source Code
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/toc/wcd_toc.js
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/toc/wcd_toc.css