Generate a lightweight table of contents plugin
A good table of contents improves both UX (readers jump to what they want) and SEO (Google often shows TOC anchors as jump links in the result snippet). Most TOC plugins are free, but they tend to be 50KB-200KB of assets for what should be 2KB of markup.
A custom TOC plugin parses your headings at render time, renders a list with anchor links, highlights the active section on scroll, and weighs almost nothing.
Why generate it instead of installing an existing plugin?
Rank Math and Yoast both suggest adding a TOC and Easy Table of Contents is the go-to. Works fine. Ships JS you may not need, and its CSS tries to be generic which means you still end up overriding it.
A generated plugin produces clean markup that inherits your theme styles. The script that handles active-section highlighting is ~1KB minified. Auto-insert above the first H2 or via [acme_toc] shortcode, whichever you prefer.
Because it is yours, small preferences are one-line changes: include H4, exclude specific heading slugs, collapsible on mobile, sticky on desktop.
Example prompt
This is the kind of description that generates this plugin. You can start from it and tweak whatever you need before hitting generate.
Plugin name: Acme TOC
On post render (the_content filter):
- Parse H2 and H3 from the content.
- Give each an id slug (dashed, lowercase, deduplicated).
- Build a nested <ul> TOC with anchor links.
- Insert it right after the first paragraph of the post, wrapped in <nav class="acme-toc">.
Post types: post, acme_case. Skip posts with shortcode [no-toc] present.
Minimum 3 headings to render; otherwise skip.
Frontend JS (2KB) adds:
- IntersectionObserver to highlight current section in the TOC.
- Smooth scroll on click with 60px offset for sticky headers.
- On mobile <= 768px, collapsible (closed by default, summary "On this page").
Stylesheet scoped to .acme-toc, inherits theme typography.What the generated plugin typically includes
- the_content filter parsing H2/H3 and injecting anchors + TOC
- Deduplicated id slugs for headings
- Tiny vanilla JS with IntersectionObserver for active highlight
- Collapsible behavior on mobile, sticky option for desktop
- Per-post shortcode to disable
- No global enqueue on posts without a TOC
Heading levels, minimum heading count, post types and mobile behavior are set in the prompt. If the theme already adds anchors, the plugin reuses them instead of creating duplicates.
Frequently asked questions
Does it work with AMP?
The HTML is standard; IntersectionObserver is supported in AMP-lite. Full AMP mode (amp=1) falls back to a static TOC without active highlight.
SEO impact?
The anchor ids are what Google uses for "jump to" snippets. With clean, stable ids you give the crawler what it wants.