https://www.youtube.com/watch?v=TXfJ4SnsNUA
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 !
⭐ CHECK OUR OTHER PLUGINS
⭐HIGHLIGHTS
🆕 GUTENBERG BLOCK
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.
🚀 PERFORMANCE ORIENTED
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.
🧠 SUPERIOR HEADING PROCESSING
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 !
🖌 THE MOST CUSTOMIZABLE TABLE OF CONTENTS PLUGIN
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...
🔽 ICON OR TEXT TOGGLE
Choose between a
Text toggle for a more classic look OR an
Icon toggle for a more modern approach.
📐 CUSTOM THEME READY
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.
🚀 SHOW ONLY A FEW HEADINGS UPON PAGE LOAD (PARTIAL FOLD) [PRO]
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.
📑 ADVANCED AUTO-INSERT RULES [PRO]
Auto-insert supports multiple additional rules:
* Post type
* Post title
* Post ID
You can also EXCLUDE specific posts by Post title or Post ID
🎛 DIFFERENT SETTINGS PER POST TYPE [PRO]
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.
✅ FLOATING TABLE OF CONTENTS [PRO]
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 !
✅ SLIDE OUT TABLE OF CONTENTS [PRO]
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.
✅ PROGRESS BAR WIDGET [PRO]
This new widget shows a fixed progress bar over the content and indicates the percentage of advancement throughout the reading.
✅ STICKY SIDEBAR TABLE OF CONTENTS [PRO]
Use the table of contents in a sidebar widget and have it sticky as the page gets scrolled.
📃 Main Features
- Customizable Bullet points (since v2.4.0).
- Page break
<!--nextpage-->
support (since v2.3.0).
- Auto-insert table of contents (select post types and position in the content).
- Manual insert table of contents by block or shortcode.
- Hide specific headings (block)
- Edit specific headings (block)
- Folding/unfolding animation
- Customizable Table of Contents Title.
- Show headings by custom depth (From H2 to H6).
- Customizable CSS Icons for expand/collapse buttons (4 free icons, 20 in pro version)
- Show TOC only if a minimum of headings has been found in the content (Optional).
- Disable headings per text/class
- Hierarchical (amount of empty space customizable) or Flat View.
- Multiple numeration options (ex: 1. Title 1; 1.2. Subtitle 2, etc...).
- Pretty hash in the actual URL (ex: mysite.com/my-article/#subtitle-2
- Latin & non-latin characters support for hash [since 1.3.2]
- Multilanguage hash transliteration available (e.g. #История => #istoriya) [since 1.3.3]
- Customizable numeration Separator (Ex: "." => "1.1.2"; "-" => "1-1-2").
- Customizable numeration Suffix (Ex: )." => "1.1.2)"; "/" => "1.1.2/").
- Customizable Padding, Margin, Borders, etc...
- 6 Auto-insert positions available (See below for details).
- Auto-insert to posts and/or pages.
- Fully responsive.
- Hide or Show Overflowing Headings when viewport cannot fit the whole title length.
- Smooth scrolling available.
- Customizable TOC Title alignment (left, center, right).
- Customizable TOC Toggle button position (left, right) (when folded).
- Customizable TOC Toggle button: Text/HTML/Custom icons (open & close states).
- Themes included.
- Themes settings can be overriden (Colors, size, etc).
- Customizable Width: Min/Max Width or 100% Width.
- Customizable Font Size, Font Weight.
- Optional Shadow.
- Colors fully customizable (Table of Contents, Title, Headings, Shadow, Numeration).
- Custom CSS available.
- Import / Export settings
- Developer-friendly. Many hooks provided. (See below for details).
🚀 Joli Table of contents Pro Features include:
Get Joli Table Of Contents Pro
- All of the free features.
- Custom Post Type Support.
- Custom Post Type Settings.
- Exclusive Floating Widget that shows the current section.
- Slide-out Widget that shows a fixed table of contents on the side of the screen.
- Additional exclusive themes
- Force Enable/Disable TOC per post settings.
- Customizable Floating Position ( Top or Bottom ).
- Customizable Floating Offset (Horizontally & Vertically).
- Expands on Hover or Click.
- Collapses on Leave hover or Click away.
- Multi-columns mode (since 1.1.0).
- Customizable CSS Icons for expand/collapse buttons (choose from 20 icons)
Auto-insert
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
Shortcode
Use the following shortcode within your content to have the table of contents display where you wish to:
[joli-toc]
🎣 Hooks
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.
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; });
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; });
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.
- Upload the plugin files to the
/wp-content/plugins/plugin-name
directory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin through the 'Plugins' screen in WordPress
- Use the Settings->Plugin Name screen to configure the plugin
- (Make your instructions match the desired user flow for activating and installing your plugin. Include any steps that might be needed for explanatory purposes)
INSTALLING FROM THE WORDPRESS ADMIN
- Go to the “Plugins > Add New” page.
- Type “Joli Table Of Contents” in the search field
- Look for the “Joli Table Of Contents” plugin in the search result and click on the “Install Now” button, the installation process of plugin will begin.
- Click “Activate” when the installation is complete.
INSTALLING WITH THE ARCHIVE
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.
MANUAL INSTALLATION
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”.
HOW TO DISPLAY THE TABLE OF CONTENTS ON MY WEBSITE ?
Once you've installed Joli Table Of Contents, go to the Settings page under the Menu "Joli TOC".
Then You have 3 choices:
- Under Auto-insert, select the post types you would like to have to TOC to display
- Use the Joli Table of contents Block in the Gutenberg editor.
- Use the [joli-toc] shortcode directly inside your content.
WHAT TO DO AFTER ACTIVATION ?
Please check our
Getting started guide.