Title: Joli Table Of Contents Author: WPJoli Published: September 25, 2019 Last modified: April 10, 2026 --- Search plugins ![](https://ps.w.org/joli-table-of-contents/assets/banner-772x250.jpg?rev=3512625) ![](https://ps.w.org/joli-table-of-contents/assets/icon-256x256.png?rev=3487088) # Joli Table Of Contents By [WPJoli](https://profiles.wordpress.org/wpjoli/) [Download](https://downloads.wordpress.org/plugin/joli-table-of-contents.3.0.2.zip) * [Details](https://wordpress.org/plugins/joli-table-of-contents/#description) * [Reviews](https://wordpress.org/plugins/joli-table-of-contents/#reviews) * [Installation](https://wordpress.org/plugins/joli-table-of-contents/#installation) * [Development](https://wordpress.org/plugins/joli-table-of-contents/#developers) [Support](https://wordpress.org/support/plugin/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](https://wpjoli.com/docs/joli-table-of-contents/) | [⭐ Get PRO](https://wpjoli.com/joli-table-of-contents/) ### 🚀 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 * `` multi-page support * RTL support* WPML compatible * No jQuery * Developer hooks ([see full list](https://wpjoli.com/docs/joli-table-of-contents/developer-hooks/)) ### ⭐ 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 **](https://wpjoli.com/joli-table-of-contents/) **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 ](https://wpjoli.com/docs/joli-table-of-contents/developer-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](https://wordpress.org/plugins/smart-auto-featured-image/) * [ZenForm](https://wordpress.org/plugins/zenform/) * [Joli FAQ SEO](https://wordpress.org/plugins/joli-faq-seo/) * [Joli CLEAR Lightbox](https://wordpress.org/plugins/joli-clear-lightbox/) ## Screenshots [⌊Themes overview⌉⌊Themes overview⌉[ Themes overview [⌊Color Palette — Example 1 (custom accent color)⌉⌊Color Palette — Example 1 (custom accent color)⌉[ Color Palette — Example 1 (custom accent color) [⌊Color Palette — Example 2 (custom colors)⌉⌊Color Palette — Example 2 (custom colors )⌉[ Color Palette — Example 2 (custom colors) [⌊Gutenberg Block — Example 1⌉⌊Gutenberg Block — Example 1⌉[ Gutenberg Block — Example 1 [⌊Onboarding Wizard — Intro⌉⌊Onboarding Wizard — Intro⌉[ Onboarding Wizard — Intro [⌊Onboarding Wizard — Colors & Live Preview⌉⌊Onboarding Wizard — Colors & Live Preview⌉[ Onboarding Wizard — Colors & Live Preview [⌊Settings Page — Quick Settings⌉⌊Settings Page — Quick Settings⌉[ Settings Page — Quick Settings [⌊Settings Page — General⌉⌊Settings Page — General⌉[ Settings Page — General [⌊Settings Page — Headings⌉⌊Settings Page — Headings⌉[ Settings Page — Headings [⌊Settings Page — Theme & Colors⌉⌊Settings Page — Theme & Colors⌉[ Settings Page — Theme & Colors [⌊Demo 1⌉⌊Demo 1⌉[ Demo 1 [⌊Demo 2⌉⌊Demo 2⌉[ Demo 2 [⌊Demo 3⌉⌊Demo 3⌉[ Demo 3 [⌊Demo 4⌉⌊Demo 4⌉[ Demo 4 [⌊Demo 5⌉⌊Demo 5⌉[ Demo 5 [⌊Demo 6⌉⌊Demo 6⌉[ Demo 6 [⌊Demo 7⌉⌊Demo 7⌉[ Demo 7 [⌊Demo 8⌉⌊Demo 8⌉[ Demo 8 [⌊Demo 9⌉⌊Demo 9⌉[ Demo 9 [⌊Demo 10⌉⌊Demo 10⌉[ Demo 10 [⌊Demo 11⌉⌊Demo 11⌉[ Demo 11 [⌊Demo 12⌉⌊Demo 12⌉[ Demo 12 [⌊Demo 13⌉⌊Demo 13⌉[ Demo 13 [⌊Demo 14⌉⌊Demo 14⌉[ Demo 14 [⌊Demo 15⌉⌊Demo 15⌉[ Demo 15 [⌊Demo 16⌉⌊Demo 16⌉[ Demo 16 [⌊Demo 17⌉⌊Demo 17⌉[ Demo 17 [⌊Demo 18⌉⌊Demo 18⌉[ Demo 18 [⌊Demo 19⌉⌊Demo 19⌉[ Demo 19 [⌊Demo 20⌉⌊Demo 20⌉[ Demo 20 [⌊Demo 21⌉⌊Demo 21⌉[ Demo 21 [⌊Demo 22⌉⌊Demo 22⌉[ Demo 22 [⌊Demo 23⌉⌊Demo 23⌉[ Demo 23 [⌊Demo 24⌉⌊Demo 24⌉[ Demo 24 [⌊Demo 25⌉⌊Demo 25⌉[ Demo 25 [⌊Demo 26⌉⌊Demo 26⌉[ Demo 26 [⌊Demo 27⌉⌊Demo 27⌉[ Demo 27 [⌊Demo 28⌉⌊Demo 28⌉[ Demo 28 [⌊Demo 29⌉⌊Demo 29⌉[ Demo 29 ## Blocks This plugin provides 1 block. * Joli Table of Contents Table of contents ## Installation #### Installing from the WordPress Admin 1. Go to **Plugins > Add New**. 2. Search for **“Joli Table Of Contents”**. 3. Click **Install Now**, then **Activate**. 4. Follow the **Onboarding Wizard** to get set up in minutes. #### Installing via ZIP archive 1. Go to **Plugins > Add New > Upload Plugin**. 2. Upload the plugin ZIP file and click **Install Now**. 3. Click **Activate Plugin**. #### Manual Installation 1. Upload the `joli-table-of-contents` folder to `/wp-content/plugins/`. 2. Go to **Plugins** in your WordPress admin and activate it. #### After Activation The **Onboarding Wizard** will guide you through the setup. You can also go directly to **Joli TOC** in your admin menu. You have 3 ways to display the TOC: 1. **Auto-insert** — go to Settings > Auto-Insert and select your post types 2. **Gutenberg Block** — insert the Joli TOC block inside any post or page 3. **Shortcode** — add `[joli-toc]` anywhere in your content 📖 [Getting Started Guide](https://wpjoli.com/docs/joli-table-of-contents/getting-started/) ## FAQ ### What should I do right after installing the plugin? The **Onboarding Wizard** will launch automatically and walk you through the key settings step by step. You can also check the [Getting Started guide](https://wpjoli.com/docs/joli-table-of-contents/getting-started/) and [How to Insert a Table of Contents](https://wpjoli.com/docs/joli-table-of-contents/inserting-a-table-of-contents/). ### Can I migrate from Easy Table of Contents or LuckyWP without changing my shortcodes? Yes. Use the `jolitoc_shortcode_tag` filter to map Joli TOC to your existing tag. For example, to keep using `[toc]`: ``` add_filter('jolitoc_shortcode_tag', function(){ return 'toc'; }); ``` Add that line to your theme’s `functions.php` and your existing shortcodes will keep working with no content edits needed. ### How does the Color Palette work? The Color Palette lets you define a set of reusable colors for your TOC. The most impactful one is the **Accent color** — setting it alone styles approximately 90% of the TOC automatically. You can then fine-tune individual elements as needed. ### What’s the difference between “Content” and “Extended” heading scope? **Content** scope (default in v3) only detects headings inside your main post content, which prevents accidental headings from sidebars or other blocks from appearing in your TOC. **Extended** scope (the behavior in v1 and v2) also picks up headings from third-party shortcodes and blocks rendered outside the content area. You can switch between them in the Headings settings. ### Is Joli Table Of Contents responsive? Yes, fully responsive. Touch events on mobile work in place of hover events. ### The title, headings, or toggle button won’t show — what’s wrong? Your theme may apply a text color that matches the TOC background. Go to **Settings > Appearance** and manually set a color for the relevant element. ### Can I use this plugin on custom post types? Custom post type support is available in the **PRO** version, including the ability to define different settings per post type. ### How do I display the TOC only on certain posts? Use the **Auto-insert** rules (PRO) to filter by post ID, post title, or post type. Alternatively, use the Gutenberg block or shortcode to insert the TOC manually on specific posts only. ### What changed in v3? v3 brings a redesigned admin interface with live preview, an onboarding wizard, a color palette system, new themes with dark mode, an upgraded numbering system, TOC alignment controls, reading time estimates, and many new PRO features including the Timeline TOC mode. See the full changelog below. ### What happened to hexadecimal and binary numbering? These two numbering types have been removed in v3 as they had very limited practical use. All other numbering types remain available, and regional numbering formats have been added. ## Reviews ![](https://secure.gravatar.com/avatar/7e4efcc3e16e9126e1fd031944cf7890b97e56fd7be5fff531312d9dae75c46a? s=60&d=retro&r=g) ### 󠀁[Shortcode Doesn’t Work – Wasted 20 Minutes on Basic Functionality](https://wordpress.org/support/topic/shortcode-doesnt-work-wasted-20-minutes-on-basic-functionality/)󠁿 [laclac1](https://profiles.wordpress.org/laclac1/) May 4, 2026 1 reply I installed the plugin “Easy Table of Contents”, added their shortcode, and it worked immediately. Then I installed the plugin “Joli Table Of Contents”, filled out their settings page, added their shortcode… nothing. After 20 minutes of tweaking settings and trying to find the cause, still nothing shows up. I just wasted 20 minutes of my life for nothing, on something very basic in WordPress (processing a shortcode). I’m not giving 0 stars because this plugin seems to work for most people, but it’s not normal for a plugin to just not work and make users lose time. ![](https://secure.gravatar.com/avatar/0cfb95a27079c0c63bafc9bd20e6d1f64ae845dcd8882d7b5424c71474a283b9? s=60&d=retro&r=g) ### 󠀁[The best TOC plugin](https://wordpress.org/support/topic/the-best-toc-plugin-4/)󠁿 [cangowordp](https://profiles.wordpress.org/cangowordp/) April 20, 2026 1 reply The best TOC plugin ![](https://secure.gravatar.com/avatar/b57c3034cf3dc57ac2d9066b4fbb42f00a265b679e0436062089e9f4ca2d4336? s=60&d=retro&r=g) ### 󠀁[Can customize the appearance in detail using CSS](https://wordpress.org/support/topic/can-customize-the-appearance-in-detail-using-css/)󠁿 [Seiko Kuchida](https://profiles.wordpress.org/webbingstudio/) March 21, 2026 日本語のウェブサイトでも美しく表示されます。専用の設定画面でCSSを記述することで、 外観も細かくカスタマイズできます。 It displays beautifully even on Japanese websites. Can also customize the appearance in detail by writing CSS in the dedicated settings screen. ![](https://secure.gravatar.com/avatar/e5aec0ece4684a3edb9b96ce21ad79e5afa981d8d397ed61f9a94843063d67a1? s=60&d=retro&r=g) ### 󠀁[Works perfectly and has lots of customizability](https://wordpress.org/support/topic/works-perfectly-and-has-lots-of-customizability/)󠁿 [shelfgamer](https://profiles.wordpress.org/shelfgamer/) March 7, 2026 1 reply This plugin is full of features and works really well out of the box. When I spotted an error and submitted a ticket, the dev responded within 24 hours, got it fixed within 72 hours, and scheduled an update for 2 weeks. Great experience so far. ![](https://secure.gravatar.com/avatar/f0962e5e0e305f131253485e3f60e6ee927024bb8891d296f63845fb2151c9da? s=60&d=retro&r=g) ### 󠀁[Great plugin and good support](https://wordpress.org/support/topic/great-plugin-and-good-support-63/)󠁿 [kierenwindsor](https://profiles.wordpress.org/kierenwindsor/) October 8, 2025 1 reply Plugin works as expected – one of the better options for floating TOC. The support was great when I needed help migrating from old TOC plugin. ![](https://secure.gravatar.com/avatar/94985294124b45683f4e7ab1f4290f76067fc8ab25b2c6884ecb3d3f7853edea? s=60&d=retro&r=g) ### 󠀁[Fantastic support](https://wordpress.org/support/topic/fantastic-support-606/)󠁿 [AlwaysEnthusiast](https://profiles.wordpress.org/alwaysenthusiast/) September 26, 2025 1 reply Works as intended. More options for settings than any other table of content plugin I have seen or tested. Very quick and thorough support! I am a very pleased customer. [ Read all 43 reviews ](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/) ## Contributors & Developers “Joli Table Of Contents” is open source software. The following people have contributed to this plugin. Contributors * [ WPJoli ](https://profiles.wordpress.org/wpjoli/) [Translate “Joli Table Of Contents” into your language.](https://translate.wordpress.org/projects/wp-plugins/joli-table-of-contents) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/joli-table-of-contents/), check out the [SVN repository](https://plugins.svn.wordpress.org/joli-table-of-contents/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/joli-table-of-contents/) by [RSS](https://plugins.trac.wordpress.org/log/joli-table-of-contents/?limit=100&mode=stop_on_copy&format=rss). ## Meta * Version **3.0.2** * Last updated **4 months ago** * Active installations **7,000+** * WordPress version ** 5.0 or higher ** * Tested up to **6.9.5** * PHP version ** 7.0 or higher ** * Tags * [Gutenberg block](https://wordpress.org/plugins/tags/gutenberg-block/)[navigation](https://wordpress.org/plugins/tags/navigation/) [table of contents](https://wordpress.org/plugins/tags/table-of-contents/)[toc](https://wordpress.org/plugins/tags/toc/) * [Advanced View](https://wordpress.org/plugins/joli-table-of-contents/advanced/) ## Ratings 4.9 out of 5 stars. * [ 40 5-star reviews ](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/?filter=5) * [ 1 4-star review ](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/?filter=4) * [ 1 3-star review ](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/?filter=3) * [ 1 2-star review ](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/joli-table-of-contents/reviews/) ## Contributors * [ WPJoli ](https://profiles.wordpress.org/wpjoli/) ## Support Issues resolved in last two months: 0 out of 1 [View support forum](https://wordpress.org/support/plugin/joli-table-of-contents/)