Table of Contents Plugin

Auto-generated navigation for long-form content

WordPress 5.0+ PHP 7.4+ Version 1.0.0 Feature-Rich

Quick Start (2 Minutes)

Get up and running fast

  1. Download the plugin ZIP from your dashboard
  2. Upload to WordPress (Plugins → Add New → Upload)
  3. Activate plugin
  4. Configure settings (Settings → Table of Contents)
  5. TOC auto-generates on posts with 3+ headings!

Installation

Step 1

Download Plugin

  • Download from your dashboard
  • Do not extract the ZIP file - WordPress needs it in ZIP format
Step 2

Upload & Activate

  1. Go to Plugins → Add New
  2. Click Upload Plugin
  3. Choose the ZIP file and click Install Now
  4. Click Activate Plugin
Step 3

Configure Settings

Go to Settings → Table of Contents and configure:

  • Position:
    • Before Content (default) - Top of post
    • After Content - Bottom of post
    • Floating (Top Right) - Sticky sidebar (converts to inline on mobile)
  • Heading Levels: Select H2, H3, H4, H5, H6 (default: H2-H4)
  • Title Text: Customize TOC title (default: "Table of Contents")
  • Auto-numbering: Hierarchical numbering (1, 1.1, 1.2, etc.)
  • Collapsible: Click title to show/hide TOC
  • Smooth Scrolling: Animated scroll to sections
  • Minimum Headings: Only show if post has 3+ headings
  • Colors: Background, border, and link colors

Features

Auto-Generation

Automatically creates TOC from H2-H6 headings with no manual work

Floating Sidebar

Sticky TOC in top right corner on desktop, converts to inline on mobile

Hierarchical Numbering

Auto-numbered sections (1, 1.1, 1.2, 2, 2.1) or clean unnumbered list

Collapsible

Click title to show/hide TOC, saves screen space on long content

Active Link Highlighting

Current section highlights as you scroll through content

Smooth Scrolling

60fps animated scroll to sections using requestAnimationFrame

Heading Level Selection

Choose which heading levels (H2-H6) to include in TOC

Minimum Threshold

Only show TOC if post has minimum number of headings (prevents TOC on short posts)

Custom Styling

Customize background, border, and link colors to match your brand

Post Type Filtering

Enable on posts, pages, or custom post types

Theme Compatibility

Tested and verified to work with popular themes:

Twenty Twenty-Four
WordPress default theme
Astra
3M+ active installs
Hello Elementor
3M+ active installs
GeneratePress
Performance-focused
OceanWP
800K+ active installs

Note: Floating TOC automatically adjusts for WordPress admin bar (32px desktop, 46px mobile).

Best Use Cases

Perfect For

  • Long-form articles (1500+ words)
  • Tutorials and how-to guides
  • Documentation pages
  • Research articles
  • Ultimate guides and comprehensive posts
  • Review articles with multiple sections

Not Recommended For

  • Short posts (less than 500 words)
  • Posts with very few headings (less than 3)
  • Image galleries or portfolios
  • News articles or brief updates

Troubleshooting

TOC Not Visible
  • Check the post has at least 3 headings (or adjust minimum in settings)
  • Verify post type is enabled in Settings → Table of Contents
  • Ensure heading levels are selected (H2, H3, H4 by default)
  • Try disabling caching plugins temporarily
TOC Links Don't Work
  • Check JavaScript is enabled in browser
  • View page source - headings should have IDs like id="toc-section-name-0"
  • Clear browser cache and hard refresh
  • Check browser console for JavaScript errors
Smooth Scrolling Feels Choppy
  • Disable "Smooth Scrolling" in settings for instant jump
  • This can improve performance on older devices
  • Try reducing TOC size (fewer heading levels)
Collapsible Not Working
  • Verify "Collapsible" is enabled in settings
  • Check JavaScript is loaded (browser console → Network tab)
  • Clear cache and hard refresh page

Frequently Asked Questions

Can I customize which headings appear?
Yes! Select any combination of H2-H6 in Settings → Table of Contents. The default is H2, H3, and H4 which works well for most posts.
Does it work with page builders?
Yes! Works seamlessly with Elementor, Gutenberg, Classic Editor, Divi, and Beaver Builder. The plugin uses standard WordPress hooks and detects headings regardless of how they were created.
Will it slow down my site?
No! The plugin is highly optimized with less than 8KB total size (CSS + JS). It uses vanilla JavaScript (no jQuery), requestAnimationFrame for 60fps scrolling, and throttled scroll events for excellent performance.
Does it work on mobile?
Yes! Fully responsive design. Floating TOCs automatically convert to inline position on mobile/tablet (screens less than 1024px wide) for the best user experience.
What if I have duplicate heading text?
No problem! The plugin automatically adds unique IDs to all headings (e.g., heading-0, heading-1) so duplicate text won't cause issues with navigation.

Need Help?

Email: support@blogutils.com

Links: