Smart Table of Contents Pro Documentation

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. Go to 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

Smart TOC Pro supports two license types:

1. Envato/CodeCanyon License

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

2. SmallSEOEngine License

1. Go to 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 the Download button 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)

Smart TOC Pro settings are organized into intuitive tabs:

• General: Post types, heading levels, minimum headings, exclusions
• Display: Position, title, collapsible settings, numbering
• Appearance: Themes, colors, 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

Auto-Insert Position

• Before first heading: Smart Table of Contents 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 specific CSS class
• Truncate Length: Shorten long heading titles

Smart TOC Pro includes 6 beautiful pre-designed themes:

• Default: Clean design with accent color 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 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 Colors

Override theme colors with custom values:

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

The sticky Smart Table of Contents feature keeps the TOC visible as users scroll through your content.

Settings

• Enable Sticky: Turn sticky behavior 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
• 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.

The floating Smart Table of Contents displays as a 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 Color: Match your brand colors

Panel Settings

• Panel Width: Customize width (280-450px)
• Theme Colors: 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.

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. Go to Settings → Smart TOC Pro → Display
2. Enable "Show Copy Anchor Link Button"
3. Save settings

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 Color: Customize progress bar color
• Background Color: Track background color

Back-to-Top Button

• Enable Button: Show/hide back-to-top button
• Button Color: Customize button color
• Position: Bottom-left or bottom-right

Progress Ring (v2.3.0+)

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

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

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 Smart Table of Contents, reducing unnecessary HTTP requests on other pages.

Defer JavaScript

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

Lazy Load TOC

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

Print Stylesheet

Optimized print styles ensure clean TOC display when users print your pages, with proper formatting and no unnecessary UI elements.

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: Optimized 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 Behavior

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

Insert the Smart Table of Contents anywhere using the shortcode:

[smart_toc]

Shortcode 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

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

Block Settings

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

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

Add the Smart Table of Contents to your sidebar using the widget:

1. Go to 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

Smart TOC Pro provides hooks for developers to customize behavior:

Filters

// Modify TOC 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
add_filter('smart_toc_show', function($show, $post_id) {
    return $show;
}, 10, 2);

Actions

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

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

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