SEO-friendly Table of Contents. Gutenberg Block, no jQuery. Fast & Highly customizable. Auto or manual insert.
Joli Table of Contents is the best SEO-friendly Table of Contents for WordPress. It is both performance friendly & user friendly and provides plenty of options for customization so that it can match your website’s look. It also performs really fast without jQuery and minified CSS/JS. Enhance your website and make it look more valuable for both your visitors and Google !
Since v2, you can now use the block to insert a table of contents.
The block lets you easily HIDE or EDIT specific headings.
In addition, the block picks up on headings that would be generated by a third party shortcode or block but invisible in the actual editor.
In the PRO version, you can override any setting for a specific block from the block settings panel.
Joli Table of contents uses a combination of minified CSS and Javascript to run at maximum speed.
It also does not depend on jQuery to improve performance.
Unlike its competitors, Joli Table of Content picks up on headings hidden behind third-party shortcodes and blocks. This means that it will show the headings that do not directly appear in the editor, but are still present in the front-end !
Joli table of contents has been designed to really match your expectations.
Every single part of the table of contents is highly customizable, and uses a CSS variable approach to make it even more customizable.
You can adjust a large array of settings including:
* Margin
* Padding
* Border radius
* Border
* Colors
* Fonts
* and more…
Choose between a Text toggle for a more classic look OR an Icon toggle for a more modern approach.
Joli Table of contents now bundles a custom theme engine, that lets you create your own theme.
There is a lot of CSS variables that you can override or/and create more complex styles.
Improve your page UX with the Partial Fold on load option.
Only show the first few headings upon page load with a “View more” button to expand the table of contents fully.
Auto-insert supports multiple additional rules:
* Post type
* Post title
* Post ID
You can also EXCLUDE specific posts by Post title or Post ID
Create different settings per post type for maximum flexibility.
For example you can use Theme 1 for “post” post type, and use Theme 2 for the “page” post types.
Good news is every single setting can be set differently per post type, not just themes !
This also works with custom post types.
The floating table of contents widget is optionally displayed as the user scrolls the page. It remains hover your content and now features optional navigation buttons and advanced customization !
The slide out table of contents widget brings more value to your page and makes it more readable. It shows the table of contents in a fixed position on the side of the screen.
This new widget shows a fixed progress bar over the content and indicates the percentage of advancement throughout the reading.
Use the table of contents in a sidebar widget and have it sticky as the page gets scrolled.
<!--nextpage-->
support (since v2.3.0).Get Joli Table Of Contents Pro
The Auto-insert feature is optional and allows to automatically insert the Table of Contents to your content with the following options.
Supported post types:
* Post
* Pages
* Custom Post Type [PRO]
Auto-insert positions:
* Before the content
* After the content
* Before H1
* After H1
* Before first H2
* After first paragraph
Use the following shortcode within your content to have the table of contents display where you wish to:
[joli-toc]
You can use any of the hooks provided to add custom content to the actual Table Of Contents.
List of [all the hooks available here](https://wpjoli.com/docs/joli-table-of-contents/developer-hooks/”Joli Table Of Contents Hooks”).
Examples & How to use ?
Copy & paste the code examples below into your theme’s functions.php file:
joli_toc_disable_autoinsert
Globally disables Joli Table Of Contents site-wide.
add_filter('joli_toc_disable_autoinsert', function(){ return true; });
joli_toc_disable_js
For some reason if you do not want the js/css/inline styles to load (could break functionnalities).
//disables js add_filter('joli_toc_disable_js', function(){ return true; }); //disables css add_filter('joli_toc_disable_styles', function(){ return true; });
jolitoc_shortcode_tag
Customizes the shortcode tag ( Useful if you were using a different plugin before ).
add_filter('jolitoc_shortcode_tag', function(){ return 'custom-tag';});
Customizes the title (collapse).
add_filter('joli_toc_toc_title', 'my_custom_title', 10, 1); function my_custom_title( $title ){ if ($a == $b){ $title = "My Custom TOC Title"; }else{ $title = "My Alternate TOC Title"; } return $title; }
This section describes how to install the plugin and get it working.
e.g.
/wp-content/plugins/plugin-name
directory, or install the plugin through the WordPress plugins screen directly.Go to the page “Plugins > Add New” on the WordPress control panel
Click on the “Upload Plugin” button, the form to upload the archive will be opened.
Select the archive with the plugin and click “Install Now”.
Click on the “Activate Plugin” button when the installation is complete.
Upload the folder joli-table-of-contents to your site’s plugin folder, usually it is /wp-content/plugins/.
Go to the page “Plugins > Add New” on the WordPress control panel
Look for “Joli Table Of Contents” in the plugins list and click “Activate”.
Once you’ve installed Joli Table Of Contents, go to the Settings page under the Menu “Joli TOC”.
Then You have 3 choices:
1. Under Auto-insert, select the post types you would like to have to TOC to display
2. Use the Joli Table of contents Block in the Gutenberg editor.
3. Use the [joli-toc] shortcode directly inside your content.
Please check our Getting started guide.
Joli Table of contents Block
Block being edited
Heading being edited in the block
Front-end view with modifications from the block
Free Themes overview
Settings page - GENERAL
Settings page - HEADINGS
Settings page - AUTO-INSERT
Settings page - WIDGET SUPPORT
Settings page - THEME
Settings page - STYLES
Settings page - FLOATING TABLE OF CONTENTS
Settings page - SLIDE-OUT TABLE OF CONTENTS
Settings page - PROGRESS BAR
Please refer to our Getting started page for first time use and also How to insert a table of contents ?.
Joli Table of contents has been entirely redesigned from the ground up since v2. This new version brings a brand new Block for Gutenberg, more performance, gets rid of jQuery, and the architecture of the actual TOC has been rethought to make it more flexible in terms of custom design. Themes are now built around CSS variables.
If you have been using the v1 until now, all of your custom CSS will not work on v2. Some hooks have also been deprecated.
The “Visibility” option has been deprecated, and is now replaced by multiple, simpler options (such as “fold on load”)
After you update to v2, you will see a WARNING notice in your WordPress dashboard, inviting you to switch to v2. Since the v2 has gone through a complete redesign, there are some breaking changes and to make the switch easier, Joli Table of contents provides a mechanism to switch between v1 & v2 until you are comfortable with the v2.
The v1 support will be definitely dropped on Jul 31st, 2024 (extended from Jan 31st 2024).
Once you’ve installed Joli Table Of Contents, go to the Settings page under the Menu “Joli TOC”.
Then You have 3 choices:
1. Under Auto-insert, select the post types you would like to have to TOC to display
2. Use the Joli Table of contents Block in the Gutenberg editor.
3. Use the [joli-toc] shortcode directly inside your content.
Yes, it is fully responsive and hover events work as touch actions on mobile.
Depending on your theme, text color may have the same color as the TOC background color as they are inherited by default.
In order to change the color, go to the Settings, then under the Appearance tab, change any color.
= 2.2.1
* Fixed PHP warnings