Joli Table Of Contents
Themes overview
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.
🚀 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.
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’; });