Chap WordPress theme
Chap

Table of contents

Wrapping your post content in toc shortcode will create an automatic Table of Contents menu based on the headers with ID attributes contained in the content. The ID-s should be unique to make the menu functional.
The menu supports 2 levels of hierarchy: parent and children. Hierarchy can be indicated by using tag names h1-h5 or size classes: huge, large, (medium), small, tiny.

Toc shortcode arguments
titleTitle above TOC menu (default: "Table of contents").
headerCustom classes for the title header (default: "small center aligned").
classesCustom classes for the menu (default: "vertical").
containerCustom classes for the menu container segment (default: "basic padded right floated").
smoothSmooth scrolling to anchor links (default: "true").
Table of contents

The first header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

The second header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

The third header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

The fourth header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

[toc]
  [header id="first"]The first header[/header]
  ...
  [header id="second"]The second header[/header]
  ...
  [header id="third"]The third header[/header]
  ...
  [header]The fourth header[/header]
  ...
[/toc]

Notes

Notice the header without an ID attribute is not included.
Hierarchy

H1 Parent

H2 Child

H3 Child

H2 Child

Huge Parent

Large Child

Medium Child

Small Child

H2 Child

H1 Parent

H2 Child

[toc]
  [header tag="h1" id="demo"]H1 Parent[/header]
  [header tag="h2" id="demo"]H2 Child[/header]
  [header tag="h3" id="demo"]H3 Child[/header]
  [header tag="h2" id="demo"]H2 Child[/header]
  [header huge id="demo"]Huge Parent[/header]
  [header large id="demo"]Large Child[/header]
  [header id="demo"]Medium Child[/header]
  [header small id="demo"]Small Child[/header]
  [header tag="h2" id="demo"]H2 Child[/header]
  [header small tag="h1" id="demo"]H1 Parent[/header]
  [header huge tag="h2" id="demo"]H2 Child[/header]
[/toc]

Notes

H1 is equal to 'huge', tag name takes priority.
Styling

Table of contents

Header

Header

Header

[toc small vertical secondary pointing]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
[/toc]

Notes

Add menu classes directly to toc.
Shortcode demo

Table of contents

Header

Header

Header

[toc horizontal header="left aligned dividing" container="basic"]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
[/toc]
Shortcode demo

Header

Header

Header

[toc horizontal three item stackable title="" container="basic text container"]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
[/toc]
Shortcode demo
Article contents

Header

Header

Header

[toc vertical inverted text title="Article contents" header="tiny left aligned" container="small left floated inverted"]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
[/toc]
Shortcode demo

Table of contents

Header

Header

Header

Header

Header

[toc vertical bottom attached header="top attached block" container="basic right floated very padded"]
  [header id="demo"]Header[/header]
  [header small id="demo"]Header[/header]
  [header small id="demo"]Header[/header]
  [header id="demo"]Header[/header]
  [header id="demo"]Header[/header]
[/toc]