Smart TOC Pro Documentation

1. Purchase and download Smart TOC Pro from CodeCanyon
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

After installation, you need to activate your license to receive updates and support:

1. Go to Settings → Smart TOC Pro → License
2. Enter your Envato Purchase Code (found in your CodeCanyon download page)
3. Click Activate License

Finding Your 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 tabs:

• General: Basic settings like post types, heading levels, minimum headings
• Display: Position, title, collapsible settings
• Appearance: Themes, colors, typography
• Advanced: Sticky TOC, floating TOC, reading progress bar
• License: Activate/deactivate your license

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 TOC on specific post types: Posts, Pages, or any custom post type registered on your site.

Minimum Headings

Set the minimum number of headings required before a TOC is displayed. Default is 3.

Smart TOC Pro includes 6 beautiful pre-designed themes:

• Light: Clean white background with subtle borders
• Dark: Dark background, perfect for dark themes
• Modern: Contemporary design with gradient accents
• Minimal: Ultra-clean with no borders
• Classic: Traditional serif-inspired design
• Colored: Vibrant color scheme

Custom Colors

Override theme colors with custom values:

• Background color
• Border color
• Title color
• Link color
• Active link color

The sticky TOC feature keeps the table of contents 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)
• Max Height: Maximum height before scrolling within TOC
• Sticky Position: Stick to left or right side of content

The floating TOC displays as a button that expands into a full table of contents overlay.

Settings

• Enable Floating: Turn floating TOC on/off
• Position: Bottom-left, bottom-right, top-left, or top-right
• Button Icon: Choose from list, menu, or table icon
• Button Color: Match your brand colors
• Show on Mobile: Enable/disable for mobile devices

Display a progress bar showing how far users have scrolled through your content.

Settings

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

Insert the TOC anywhere using the shortcode:

[smart_toc]

Shortcode Parameters

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

Use the native WordPress block editor to insert TOC:

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

Add TOC to your sidebar using the widget:

1. Go to Appearance → Widgets
2. Find "Smart TOC" widget
3. Drag to your desired widget area
4. Configure title and settings

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;
});

Actions

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

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