Joli Table Of Contents Pro: WordPress Table of Contents

Build a table of contents from your headings

Joli Table Of Contents Pro detects headings in WordPress content, including headings rendered by third-party blocks and shortcodes. Choose Content scope to scan the main content, or Extended scope for advanced cases. Set the heading depth from H2 through H6 to pick which levels appear. The Onboarding Wizard guides the initial setup.

Choose how the table appears

Add a table automatically, place it with the Gutenberg Block, or use the [joli-toc] shortcode. The Block supports inline editing, so you can conceal or edit specific headings without opening another settings page.

Pro adds display choices for various reading contexts:

• Premium themes and a Timeline TOC with proportionally spaced side markers.
• A Floating TOC that follows the reader and indicates the active section.
• A fixed Slide-Out TOC panel or a Sticky Sidebar TOC that stays visible while scrolling.
• A Progress Bar Widget that shows reading progress at the top of the page.

Additional controls include collapsible headings, a View More button for partially folded lists, independent styling for top-level headings, separators between top-level headings, multi-column mode, visibility by device, and fading for past headings.

Set placement and targeting rules

Automatic insertion can be set by post type and position: before or after the content, before or after H1, before or after the first H2, or after the first paragraph. Pro filters can target post type, title, or ID, and can exclude posts by title or ID. Assign different settings to different post types, including custom post types, to control where each table appears.

Adjust the styling

The plugin includes themes, dark mode support for v3 themes, a Color Palette system, custom CSS support, CSS variables, and a custom theme engine. Settings cover spacing, borders, fonts, colors, icons, numbering, alignment, and toggle button styles. Align the TOC left, center, or right, and display a reading-time estimate in its header.

Use developer hooks and shortcode migration

Action and filter hooks let developers disable automatic insertion, JavaScript, or styles, and personalize the TOC title dynamically. To migrate shortcode use from Easy Table of Contents, LuckyWP Table of Contents, or another add-on, map an existing shortcode tag with the jolitoc_shortcode_tag filter.

Set up the plugin

1. Install and activate Joli Table Of Contents Pro.
2. Follow the Onboarding Wizard through the main settings.
3. Choose automatic insertion, the Gutenberg Block, or the shortcode.
4. Adjust the theme, layout, heading scope, and Pro settings for your content.

After setup, review insertion rules and post type settings to confirm where each table of contents appears.