pavlobondarchuk

<p>Simple Sticky TOC automatically generates a sticky table of contents for single posts or pages by parsing <code><h2></code>, <code><h3></code>, and <code><h4></code> tags. It is lightweight, mobile-friendly, and works without jQuery.</p>
<p><strong>Features:</strong><br />
– Automatically detects and anchors h2–h4 headings<br />
– Sticky TOC with vertical layout on desktop<br />
– Sticky toggleable TOC on mobile<br />
– Built-in RTL support (positioning + layout)<br />
– Option to disable TOC on individual posts<br />
– Option to customize TOC layout from your theme<br />
– Auto-generated anchor IDs for headings<br />
– Clean CSS, pure JavaScript, no jQuery</p>
<h3>Theme Override Support</h3>
<p>To override the default markup or styles:</p>
<ol>
<li>
<p>Copy the default template files from the plugin:</p>
<ul>
<li><code>frontend/partials/toc-template.php</code></li>
<li><code>assets/css/toc.css</code></li>
<li><code>assets/js/toc.js</code></li>
</ul>
</li>
<li>
<p>Paste them into your theme inside the following folder:</p>
<ul>
<li><code>your-theme/simple-sticky-toc/</code></li>
</ul>
</li>
</ol>
<p>Supported override files:</p>
<ul>
<li><code>simple-sticky-toc/toc-template.php</code> – custom TOC markup</li>
<li><code>simple-sticky-toc/toc.css</code> – custom styles</li>
<li><code>simple-sticky-toc/toc.js</code> – custom JS behavior</li>
</ul>


Simple Sticky TOC

Lightweight sticky table of contents for mobile and desktop. Automatically generates anchor links for h2–h4 headings. No jQuery.

suppress

<p>Add the <strong>Table of Contents Block</strong> anywhere in your Gutenberg editor. It scans H2–H6 headings in the post content and builds a nested, clickable table of contents. Links automatically work by adding IDs to headings.</p>
<p>No configuration needed. Works on single posts and pages (not archives or category listings).</p>
<ul>
<li>No theme editing required<br />
You can activate the plugin on any site.</li>
<li>Compatible with Gutenberg / Classic Editor<br />
It processes the final rendered HTML.</li>
<li>SEO-friendly<br />
IDs are based on sanitize_title(), the same function WP uses for slugs.</li>
<li>Works with headings that already have IDs<br />
It does not overwrite existing IDs.</li>
</ul>
<p><strong>Example:</strong><br />
– Structure Your Content – Write your post or page using semantic headings (H2, H3, etc.)—just like you normally would.<br />
– Insert the Table of Contents Block – Add the “Table of Contents Block” anywhere in your editor (e.g., right after the introduction).<br />
– Let It Work Automatically – The plugin scans your headings, builds a hierarchical, scroll-linked table of contents in real time, and updates dynamically as you edit.</p>
<h3>Key Features</h3>
<ul>
<li>Server-side generated Table of Contents</li>
<li>Automatically detects H2–H6 headings</li>
<li>Generates nested lists based on heading hierarchy</li>
<li>Automatically adds IDs to headings when missing</li>
<li>Lightweight and simple</li>
<li>Useful for:
<ul>
<li>Adding a Table of Contents to a post or page</li>
<li>Generating heading IDs</li>
<li>Linking to sections within content</li>
</ul>
</li>
</ul>
<h3>Why use this plugin?</h3>
<ul>
<li>Smart Parsing: Supports H2 through H6 headings</li>
<li>Clean Output: Uses standard HTML lists for maximum theme compatibility</li>
<li>Non-intrusive: Does not modify existing heading IDs</li>
<li>Lightweight & Fast</li>
</ul>


Supplyist TOC Block

A simple Gutenberg block that automatically generates a nested table of contents from post headings.

Simple Sticky TOC vs Supplyist TOC Block