Joli Table Of Contents Wordpress Plugin - Rating, Reviews, Demo & Download

Joli Table Of Contents Preview Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

Plugin Description

Adds a SEO-friendly Table of Contents to your posts/pages. Makes your website look more valuable for both your visitors and Google.

Performance friendly: Styles/Scripts DO NOT load if the Table Of Contents is not supposed to display.

Features

  • Auto-insert table of contents (select post types and position in the content).
  • Manual insert table of contents by shortcode.
  • Customizable Table of Contents Title.
  • Show headings by custom depth (From H2 to H6).
  • Show TOC only if a minimum of headings has been found in the content (Optional).
  • Hierarchical (amount of empty space customizable) or Flat View.
  • Optional Numbering Prefix (ex: 1. Title 1; 1.2. Subtitle 2, etc…).
  • Pretty hash in the actual URL (ex: mysite.com/my-article/#subtitle-2
  • Customizable Numbering Prefix Separator (Ex: “.” => “1.1.2”; “-” => “1-1-2”).
  • Customizable Numbering Prefix Suffix (Ex: ).” => “1.1.2)”; “/” => “1.1.2/”).
  • Customizable Padding.
  • Customizable Headings Height (makes the TOC look more or less dense).
  • 6 Auto-insert positions available (See below for details).
  • Auto-insert to posts and/or pages.
  • Fully responsive.
  • 2 Visibility Options on page load (Unfolded, Folded (unfoldable)).
  • 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).
  • 2 Themes included (Default & Classic).
  • 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, Prefix).
  • Custom CSS available.
  • Developer-friendly. Many hooks provided. (See below for details).

Pro Features

Get Joli Table Of Contents Pro

  • All of the free features.
  • Custom Post Type Support.
  • Exclusive Floating Widget that shows the current section ( see details below ).
  • 5 Visibility Options on page load (Unfolded, Folded (unfoldable)).
  • Additional Themes (Default, Dark, Classic, Classic Dark, Wikipedia-like).
  • 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.
  • Optional Expanding Animation.

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 only)

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

Visibility Options

  1. Invisible, floating on scroll (Pro only)

Table Of Contents is invisible after page is loaded. It only shows on scroll through a floating widget

  1. Unfolded, in-content

Table Of Contents is unfolded after page is loaded. It remains in its position and no widget shows on scroll.

  1. Unfolded, folded & floating on scroll (Pro only)

Table Of Contents is unfolded after page is loaded. It also shows on scroll through a floating widget.

  1. Folded, in-content

Table Of Contents is folded after page is loaded. It can be unfolded at will. It remains in its position and no widget shows on scroll.

  1. Folded, folded & floating on scroll (Pro only)

Table Of Contents is folded after page is loaded. It can be unfolded at will. It also shows on scroll through a floating widget.

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.

How to use ?

Copy & paste the code examples below into your theme’s functions.php file:

Filters

  • joli_toc_disable_autoinsert

Globally disables Joli Table Of Contents site-wide.

add_filter('joli_toc_disable_autoinsert', 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';});
  • joli_toc_expand_str

Customizes the toggle button (expand).

//Using Text
add_filter('joli_toc_expand_str', function(){ return '>';});

//Using Font Awesome
add_filter('joli_toc_expand_str', function(){ return '<i class="fa fa-caret-down"></i>';});
  • joli_toc_collapse_str

Customizes the toggle button (collapse).

add_filter('joli_toc_collapse_str', function(){ return '˅';});

Actions

joli_toc_before_table_of_contents
joli_toc_before_title
joli_toc_after_title
joli_toc_after_headings
joli_toc_after_table_of_contents

Example: adding a horizontal bar after the title

Copy & paste the following code into your theme’s functions.php file:

add_action( 'joli_toc_after_title', 'echo_hr' );

function echo_hr(){
    echo <hr class="joli-div">;
}

Screenshots

  1. General settings

    General settings

  2. Auto-insert settings

    Auto-insert settings

  3. Behviour settings

    Behviour settings

  4. Appearance settings

    Appearance settings

  5. Documentation

    Documentation

  6. Default theme demo with shadow option

    Default theme demo with shadow option

  7. Classic theme demo

    Classic theme demo

  8. Font awesome toggle icon example 1

    Font awesome toggle icon example 1

  9. Font awesome toggle icon example 2

    Font awesome toggle icon example 2


Reviews & Comments