Joli Table Of Contents

Description

Joli Table Of Contents is the most customizable and performance-focused table of contents plugin for WordPress. It works out of the box for beginners — thanks to a built-in Onboarding Wizard — and offers deep control for advanced users and developers.

Easily insert a table of contents into all your posts with either the Auto-insert, the Gutenberg Block, or the Shortcode.

📖 Documentation | ⭐ Get PRO

🚀 Why Joli Table Of Contents?

✅ Beginner-Friendly Onboarding Wizard

After activation, a step-by-step setup wizard walks you through the most important settings — no configuration headaches, no reading documentation. You’ll have a working, good-looking TOC in minutes.

🎨 Instant Customization with the Color Palette System

The new Color Palette makes customization effortless. Set just the Accent color and it automatically propagates across your entire TOC — that’s 90% of the visual work done in a single click. Fine-tune everything else at your own pace.

🧠 Smart Heading Detection

Joli Table Of Contents accurately detects headings from third-party shortcodes and blocks that don’t appear directly in the editor but are rendered on the front end. Since v3, you can now choose between Content scope (default — prevents unwanted headings from appearing) and Extended scope for advanced use cases.

🆕 Gutenberg Block with Inline Editing

Use the dedicated Gutenberg Block to insert a table of contents anywhere in your post. The block lets you hide or edit specific headings inline — no settings page needed.

⚡ Performance First

No jQuery dependency. Minified CSS and JavaScript. Conditional style loading based on active settings — only the code you need is loaded. Built for fast websites.

🔁 Migrate from Another TOC Plugin — Without Touching Your Content

Already using Easy Table of Contents, LuckyWP Table of Contents, or another plugin? You can switch to Joli TOC without updating a single shortcode across your posts.

Use the built-in filter to map Joli TOC to your existing shortcode tag:

add_filter('jolitoc_shortcode_tag', function(){ return 'toc'; });

This works with any custom tag, so your existing [toc] (or any other) shortcodes continue to work immediately after switching.

✨ Key Features

Design & Themes:
* Professional looking themes (Default, Original, Hero, + all legacy themes)
* Dark mode support for v3 themes
* Color Palette system — set one color, style the whole TOC
* Fully customizable: padding, margin, borders, fonts, colors, icons
* Custom CSS support
* CSS variable architecture for deep theming
* Custom theme engine (create your own theme)

Insertion methods:
* Auto-insert (by post type and position)
* Gutenberg Block
* Shortcode [joli-toc]

Auto-insert positions:
* Before/After the content
* Before/After H1
* Before first H2 / After first H2
* After first paragraph

Headings & Detection:
* Detect headings from third-party blocks and shortcodes
* Heading scope: Content (default) or Extended
* Show headings by custom depth (H2 to H6)
* Hide or edit specific headings via the block
* Disable headings by text or CSS class

Navigation & UX:
* Reading time estimate (new in v3)
* Hierarchical or Flat view
* Multiple numbering styles (with regional number support)
* Customizable numbering separator and suffix
* Smooth scrolling
* Folding/unfolding with animation
* Pretty URL hash (e.g. mysite.com/article/#section-title)
* Latin & non-latin character support
* Multilingual hash transliteration
* Responsive — hover events work as touch on mobile

Other:
* Import / Export settings
* Import presets for quick setup
* Custom CSS section
* Fully responsive
* <!--nextpage--> multi-page support
* RTL support
* WPML compatible
* No jQuery
* Developer hooks (see full list)

⭐ What’s New in v3

🧙 Onboarding Wizard

New users are greeted with a step-by-step onboarding wizard that configures the most important settings for their site — without needing to touch advanced options.

🎨 Color Palette System

A brand-new reusable color palette makes customization fast and consistent. Define your Accent color once and watch it style your entire TOC automatically.

🖼 New & Updated Themes

v3 ships with new and upgraded themes: Default (replaces Basic Light/Dark), Original, and Hero — all with dark mode support and theme-specific style variants.

🎛 Redesigned Settings Page

The admin interface has been fully redesigned with:
* A search bar to quickly find any setting
* A Live Preview panel — see your changes in real time
* A Quick Settings Panel for the most common options
* Better color pickers with palette support
* Session checker to prevent lost changes

📐 New Style Options

New styling controls include: header border style/width/radius/color, numbering badge colors, base font size, and toggle button styles.

🔢 Improved Numbering System

The numbering engine has been upgraded to behave like a proper list — including support for regional numbering formats. Hexadecimal and binary modes have been removed.

📍 TOC Alignment

Choose between left, center, and right alignment for the entire TOC block.

📖 Reading Time Estimate

Automatically display an estimated reading time inside the TOC header.

🔒 PRO Features

Get Joli Table Of Contents Pro →

Premium Themes:

Widgets:
* 🆕 Timeline TOC — display the TOC as a visual timeline on the side of the screen, with proportionally spaced markers
* ✅ Floating TOC Widget — follows the user as they scroll, shows the active section
* ✅ Slide-Out TOC Widget — fixed panel on the side of the screen
* ✅ Sticky Sidebar TOC — TOC in a sidebar widget that sticks while scrolling
* ✅ Progress Bar Widget — reading progress indicator at the top of the page

PRO-only customization:
* ⭐ Collapsible headings
* ⭐ View more button (Partial fold)
* ⭐ Independent top-level heading styling
* Separator between top-level headings
* Multi-columns mode
* Per-device TOC visibility (in-content vs. sidebar)
* Fade past headings

Advanced auto-insert rules:
* Filter by post type, post title, or post ID
* Exclude specific posts by title or ID
* Different settings per post type (theme, layout, everything)

Custom Post Type support with per-post-type settings.

🔧 Shortcode

Insert the TOC anywhere using the shortcode:

[joli-toc]

Migrating from another plugin? Keep your existing shortcode tag without updating any content:

add_filter('jolitoc_shortcode_tag', function(){ return 'toc'; });

This is compatible with shortcode tags used by Easy Table of Contents, LuckyWP Table of Contents, and others.

🎣 Developer Hooks

Joli Table Of Contents provides a full set of action and filter hooks for developers.

View all available hooks →

Common examples (add to your theme’s functions.php):

Disable auto-insert globally:
add_filter(‘joli_toc_disable_autoinsert’, function(){ return true; });

Disable JS or CSS:
add_filter(‘joli_toc_disable_js’, function(){ return true; });
add_filter(‘joli_toc_disable_styles’, function(){ return true; });

Customize the TOC title dynamically:
add_filter(‘joli_toc_toc_title’, function( $title ){ return ‘My Custom Title’; });

🔌 More Plugins by WPJoli

• Smart Auto Featured Image
• ZenForm
• Joli FAQ SEO
• Joli CLEAR Lightbox