Smart TOC Pro Docs

📦 Installation

System Requirements

• WordPress: 5.0 or higher (tested up to 6.9)
• PHP: 7.2 or higher
• Browser: Modern browsers (Chrome, Firefox, Safari, Edge)

Installation Steps

1. Purchase and download Smart TOC Pro from CodeCanyon or SmallSEOEngine
2. WordPress Dashboard → Plugins → Add New
3. Click Upload Plugin and select the downloaded ZIP file
4. Click Install Now, then Activate
5. Navigate to Settings → Smart TOC Pro to configure

🔑 License Activation

Smart TOC Pro supports two license types:

1. Envato / CodeCanyon License

1. Settings → Smart TOC Pro → License
2. Enter your Envato Purchase Code (36-character code)
3. Click Activate License

2. SmallSEOEngine License

1. Settings → Smart TOC Pro → License
2. Enter your SmallSEOEngine license key (SSE-XXXX-XXXX format)
3. Click Activate License

Finding Your Envato Purchase Code

1. Log in to your Envato Market account
2. Go to your Downloads page
3. Click Download next to Smart TOC Pro
4. Select License Certificate or Text format
5. Your purchase code is a 36-character string (e.g., xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)

⚙️ Settings Overview

Smart TOC Pro settings are organised into intuitive tabs:

• General: Post types, heading levels, minimum headings, exclusions
• Display: Position, title, collapsible settings, numbering
• Appearance: Themes, colours, typography, dark mode
• Sticky: Sticky TOC, offset, width, active indicator
• Floating: Floating button, panel settings, auto-close
• Progress: Reading progress bar, back-to-top button
• Mobile: Mobile-specific options, floating button, modal
• SEO: Schema markup, performance settings
• Advanced: Custom CSS, export/import, uninstall options
• License: Activate/deactivate your license

📐 Display Options

Auto-Insert Position

• Before first heading: TOC appears above the first H2/H3
• After first paragraph: TOC appears after the first <p> tag
• Top of content: TOC appears at the very beginning
• Manual only: Use shortcode or block to place TOC

Post Types

Enable Smart TOC Pro on specific post types: Posts, Pages, or any custom post type registered on your site (WooCommerce products, portfolio, etc.).

Heading Configuration

• Minimum Headings: Set minimum headings required (default: 3)
• Heading Levels: Choose which levels to include (H2–H6)
• Exclude by Class: Skip headings with a specific CSS class
• Truncate Length: Shorten long heading titles in the TOC

🎨 Styling & Themes

Smart TOC Pro includes 6 beautifully pre-designed themes:

• Default: Clean design with accent colour highlights
• Light: Clean white background with subtle borders
• Dark: Dark background, perfect for dark themes
• Minimal: Ultra-clean with no borders or background
• Glassmorphism: Modern frosted glass effect
• Gradient: Beautiful gradient background

Auto Dark Mode

Smart TOC Pro automatically detects your visitor's system dark mode preference using prefers-color-scheme and switches the TOC theme accordingly. No page reload required.

Custom Toggle Icons

Choose from 4 toggle icon styles for collapsible sections:

• Chevron: Right/Down arrow (›)
• Arrow: Traditional arrow (→)
• Plus/Minus: Plus when collapsed, minus when expanded (+/−)
• Caret: Triangle caret (▶)

Custom Colours

Override theme colours with custom values for:

• Theme/Primary colour
• Background colour
• Border colour
• Title colour
• Link colour
• Active link colour

📍 Sticky TOC

The sticky TOC feature keeps the table of contents visible as users scroll through your content.

Settings

• Enable Sticky: Turn sticky behaviour on/off
• Sticky Offset: Distance from top when sticky (for fixed headers)
• Sticky Width: Width of sticky TOC (200–500px)
• Max Height: Maximum height before internal scrolling activates
• Sticky Position: Left or right side of content

Active Heading Indicator

When the sticky TOC is collapsed, it shows the current section name in the header bar so readers always know where they are in the article.

🎈 Floating TOC

The floating TOC displays as a fixed button that expands into a full navigation panel.

Button Settings

• Enable Floating: Turn floating TOC on/off
• Position: Bottom-left, bottom-right, top-left, or top-right
• Button Style: Icon only, Icon + Text, or Icon + Counter
• Button Colour: Match your brand colours

Panel Settings

• Panel Width: Customise width (280–450px)
• Theme Colours: Panel header uses gradient styling
• Progress Bar: Show reading progress in panel
• Auto-Close: Close panel after clicking a link
• Default Expanded: Open panel automatically on page load

Floating TOC Dismiss v2.3.0+

Users can hide the floating button by hovering over it to reveal a close option. The button stays hidden until the page is refreshed.

🔗 Copy Anchor Link v2.3.0+

Each TOC item displays a copy button that lets users copy the direct URL to that heading with one click.

Features

• One-click copy heading URL to clipboard
• Visual feedback with checkmark icon on success
• Works in all TOC display modes (inline, sticky, floating, mobile)
• Perfect for sharing specific sections of articles

How to Enable

1. Settings → Smart TOC Pro → Display
2. Enable "Show Copy Anchor Link Button"
3. Save settings

📊 Reading Progress & Back-to-Top

Reading Progress Bar

• Enable Progress Bar: Turn on/off
• Position: Top or bottom of viewport
• Bar Height: Thickness of the progress bar (default 3px)
• Bar Colour: Customise progress bar colour
• Background Colour: Track background colour

Back-to-Top Button

• Enable Button: Show/hide back-to-top button
• Button Colour: Customise button colour
• Position: Bottom-left or bottom-right

Progress Ring v2.3.0+

The back-to-top button now features a circular SVG progress ring that shows scroll progress around the button, providing a visual cue of how much content remains.

🌍 RTL Support v2.3.0+

Smart TOC Pro provides complete right-to-left (RTL) language support:

• Arabic: Full support for Arabic content
• Hebrew: Full support for Hebrew content
• Persian (Farsi): Full support for Persian content
• Urdu: Full support for Urdu content

RTL Features

• Automatic direction detection based on WordPress locale
• Mirrored layouts for floating buttons and panels
• Proper text alignment and indentation
• RTL-compatible icons and toggle buttons

⚡ Performance Optimisation

Smart TOC Pro v2.3.0+ includes major performance improvements:

Minified Assets

• JavaScript: 65% smaller (62KB → 21KB)
• CSS: 30% smaller
• Automatic detection of SCRIPT_DEBUG mode

Conditional Loading

Assets only load on pages that actually display a TOC, reducing unnecessary HTTP requests on all other pages.

Defer JavaScript

Non-blocking script loading improves Core Web Vitals scores by not blocking page rendering.

Lazy Load TOC

Uses the Intersection Observer API to defer TOC initialisation until the TOC element enters the viewport, improving initial page load time.

Print Stylesheet

Optimised @media print styles ensure clean TOC display when users print your pages.

📱 Mobile Options

Display Settings

• Mobile Hide: Completely hide TOC on mobile devices
• Mobile Collapse: Auto-collapse inline TOC on mobile
• Mobile Floating Button: Show floating button on mobile

Mobile Modal v2.3.0+

• Redesigned Header: Cleaner header with title and close button
• Better TOC Layout: Optimised for touch interaction
• Copy Link at End: Copy anchor link appears at end of each item
• Swipe-to-Close: Touch gesture to dismiss modal

Mobile Button Behaviour

• Scroll Trigger: Button appears only after scrolling past inline TOC
• Clean Icon Design: Menu icon with theme colour (no background)
• Safe Areas: iPhone notch and home indicator support via CSS env()

[ ] Shortcode Reference

Insert the TOC anywhere using the shortcode:

[smart_toc]

Shortcode with Parameters

[smart_toc
  title="Table of Contents"
  headings="h2,h3,h4"
  collapsible="true"
  collapsed="false"
  exclude_class="no-toc"
]

Available Parameters

• title: Custom title for this TOC instance
• headings: Comma-separated heading levels (h2,h3,h4,h5,h6)
• collapsible: Enable collapsible sections (true/false)
• collapsed: Start collapsed (true/false)
• exclude_class: CSS class to exclude headings

🧩 Gutenberg Block

Use the native WordPress block editor to insert Smart TOC Pro:

1. In the block editor, click the + button to add a new block
2. Search for "Smart TOC"
3. Click to insert the block
4. Configure settings in the block sidebar panel

Block Settings

• Custom title
• Heading levels to include
• Collapsible sections toggle
• Default expanded/collapsed state
• Theme selector

🎨 Elementor Widget

Smart TOC Pro includes a native Elementor widget for seamless page builder integration:

1. Open a page in Elementor editor
2. Search for "Smart TOC" in the widget panel
3. Drag the widget to your desired location
4. Configure all TOC settings directly in the Elementor sidebar

🔲 Sidebar Widget

Add Smart TOC Pro to your sidebar using the WordPress widget:

1. Appearance → Widgets
2. Find "Smart TOC" widget
3. Drag to your desired widget area (sidebar, footer, etc.)
4. Configure title and settings

Widget Features

• Responsive layout for narrow sidebars
• Custom title support
• Works with block-based widget editor

🧑‍💻 Developer Hooks

Smart TOC Pro provides hooks for developers to customise behaviour:

PHP Filters

// Modify TOC HTML output
add_filter('smart_toc_output', function($html, $headings) {
    return $html;
}, 10, 2);

// Modify heading list
add_filter('smart_toc_headings', function($headings, $content) {
    return $headings;
}, 10, 2);

// Modify TOC title
add_filter('smart_toc_title', function($title) {
    return $title;
});

// Control TOC display per post
add_filter('smart_toc_show', function($show, $post_id) {
    return $show;
}, 10, 2);

PHP Actions

// Before TOC renders
add_action('smart_toc_before', function() {
    // Your code here
});

// After TOC renders
add_action('smart_toc_after', function() {
    // Your code here
});

// When TOC JS is initialised
add_action('smart_toc_init', function() {
    // Your code here
});

JavaScript API

// Manually refresh TOC (useful after dynamic content loads)
window.smartTOC.refresh();

// Destroy TOC instance
window.smartTOC.destroy();

// Re-initialise
window.smartTOC.init();

// Listen to scroll-spy events
document.addEventListener('smart_toc_active', (e) => {
    console.log('Active section:', e.detail.sectionId);
});

❓ Frequently Asked Questions