Build a table of contents from WordPress headings

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

Choose where the TOC appears

Automatic insertion can be configured 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 adds filters by post type, post title, or post ID, plus exclusions by title or ID. Assign various settings to different post types, including custom post types.

For manual placement, use the Gutenberg Block or the [joli-toc] shortcode. The block supports inline editing, so you can hide or edit specific headings without opening a separate settings page.

Select a show format

• Premium themes provide additional theme options.
• Timeline TOC presents the table as a visual timeline with proportionally spaced side markers.
• Floating TOC follows the reader and shows the active section.
• Slide-Out TOC shows a fixed panel at the side of the page.
• Sticky Sidebar TOC keeps a sidebar table visible while scrolling.
• Progress Bar Widget displays a reading progress indicator at the top of the page.

Other Pro controls include collapsible headings, a View More button for partial folding, independent styling for top-level headings, separators between top-level headings, multi-column mode, per-device visibility, and fading for past headings.

Adjust the styling and developer controls

Design options include themes, dark mode support for v3 themes, a Color Palette system, custom CSS, CSS variables, and a custom theme engine. Adjust padding, margins, 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.

Developers can use action and filter hooks to disable automatic insertion, disable JavaScript or styles, or personalize the TOC title dynamically. To migrate shortcodes from Easy Table of Contents, LuckyWP Table of Contents, or other extensions, map an existing shortcode tag with the jolitoc_shortcode_tag filter.

Installation

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 options for your content.

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