AnchorKit Documentation

The official guide to installing, configuring, and extending AnchorKit.

1. What Is AnchorKit?

AnchorKit is a modern, accessible Table of Contents (TOC) plugin for WordPress.

  • Works with the Classic editor, Gutenberg block editor, Elementor, and a sidebar widget.
  • Generates accessible anchors and navigation for long posts and pages.
  • Ships with beautiful presets, smart defaults, and advanced Pro features like sticky TOC, reading‑time per section, ACF integration, AMP support, and schema markup.

You can control AnchorKit globally (via the settings screen) and per‑page/per‑widget (via the Gutenberg block and Elementor widget).

2. Installation & Activation

  1. Install the plugin:
    • From WordPress.org: search for “AnchorKit” in Plugins → Add New.
    • Or upload the ZIP via Plugins → Add New → Upload Plugin.
  2. Activate AnchorKit in Plugins → Installed Plugins.
  3. Go to Settings → AnchorKit to configure global settings.

For Pro features (Elementor widget, sticky TOC, ACF, AMP, etc.) you’ll later connect your license via Freemius. The UI already assumes a Pro mode flag but behaves cleanly when Pro is not active.

3. Quick Start (2‑Minute Setup)

  1. Navigate to Settings → AnchorKit → Quick Start.
  2. Turn “Table of Contents” on using the big toggle in the first card.
  3. In “Where to Show”:
    • Select the post types you want (e.g. Posts, Pages).
    • Leave Automatic Insertion enabled.
    • Choose a position: Before first heading (recommended), After first paragraph, Top of content, or Bottom of content.
  4. Set Minimum Headings (default: 2). The TOC will only appear when the page has at least this many headings.
  5. Choose which heading levels to include (e.g. H2–H4).
  6. Pick a Style Preset (Minimal / Classic / Modern).
  7. Save changes and view a post with several headings. You should see the TOC automatically inserted.

If you prefer manual placement, disable Automatic Insertion and use either the Gutenberg block, Elementor widget, sidebar widget, or shortcode [anchorkit_toc].

4. Global Settings

All global settings live under Settings → AnchorKit. The interface is organized into tabs.

4.1 Quick Start Tab

Activation

  • Table of Contents toggle: Enables or disables the TOC site‑wide. When off, no TOC is rendered anywhere (including block/widget/shortcode), which is useful for debugging.

Where to Show

  • Post Types: Choose which public post types should be eligible for a TOC (e.g. post, page, or custom post types).
  • Automatic Insertion: When enabled, AnchorKit injects the TOC into the main content automatically on eligible post types.
  • Position:
    • Before first heading – Inserts the TOC just before the first matching heading.
    • After first paragraph – Inserts TOC after the first <p>; works with Classic and block content.
    • Top of content – TOC appears at the very top.
    • Bottom of content – TOC appears at the bottom.
  • Minimum Headings: Integer (1–10). If fewer headings than this are found, no TOC is displayed.

What to Include

  • Heading Levels: Choose which heading levels AnchorKit will include (H1–H6). This affects both auto‑insert and shortcode when using global defaults.

Style Preset

  • Minimal, Classic, Modern: Choose the base visual style for the TOC container. All presets are responsive and theme‑aware.

Header Label

  • Show/Hide TOC Title: Toggle the TOC heading (e.g. “Table of Contents”).
  • Title Text: Custom text for the TOC title.

4.2 Appearance & Behavior Tab

This tab controls how the TOC looks and behaves.

Behavior

  • Collapsible TOC: Allows users to collapse/expand the entire TOC.
  • Initial State: Expanded or Collapsed on page load.
  • Smooth Scrolling: Animated scroll when clicking TOC links.
  • Scroll Offset: Pixel offset to account for sticky headers (e.g. 80–100px).
  • Hierarchical View: Indents sub‑headings to reflect document structure.
  • Show Numerals: Enables numbering for TOC items.
  • Numbering Style & Format (Pro):
    • Style: Hierarchical (1.2.3) or Flat (1,2,3,…).
    • Format: decimal, decimal with leading zero, upper/lower Roman, upper/lower alpha.
    • Separator: dot, dash, or middle‑dot.

Styling

  • Custom Styling: Override presets with custom colors, typography, spacing, and borders.
  • Colors (theme‑aware): Background, text, link, link hover, border, bullet, and active link colors for light and dark modes.
  • Typography: Base font family, font size. (Pro: per-level sizes, line-height, letter-spacing, text transform).
  • Spacing & Borders: Container padding, border width, border radius.
  • Width & Float: Width %, Min/max width, Float left/right.

Pro‑Only Enhancements

  • Sticky TOC: Position (Content, Left, Right), offset.
  • Back to Top Link: Inside TOC (when sticky).
  • Entrance Animations: fade, slide, zoom.
  • Scroll Easing & Duration.
  • View More: Show only N headings initially.
  • Reading Time & Word Count: Per-section estimates.

4.3 Structure & SEO Tab

Controls which content becomes part of the TOC and how anchors are generated.

Content Selection

  • Include Headings: Duplicate of Quick Start; defines which heading tags are considered.
  • Exclude Selectors: CSS selectors (e.g. .toc-exclude, #sidebar h2) to skip specific headings.
  • Exclude Keywords (Pro): Comma‑separated keywords to exclude headings containing them.
  • Trim Patterns (Pro): Patterns stripped from beginning of labels (e.g. "Chapter 1:").
  • Heading Depth (Pro): Minimum and maximum heading depth to include.

SEO & Anchors

  • Anchor Format:
    • Auto – slugified heading text (#hello-im-a-heading).
    • Sequential – numeric IDs (#section-1, #section-2).
    • Custom Prefix – prefix + slug.
  • Custom Labels (JSON): Remap TOC labels without changing content headings. 
{
  "Introduction": "Start Here",
  "FAQ": "Questions & Answers"
}

Schema Markup (Pro)

  • Enable Schema.org: Output JSON‑LD markup describing the TOC as an ItemList.
  • Schema Type: Article, BlogPosting, WebPage, HowTo, FAQPage, etc.

4.4 Advanced & Accessibility Tab

  • Hide on Mobile: Completely hide the TOC below a configurable breakpoint.
  • Mobile Breakpoint: Pixel width (default: 782px).
  • ARIA Label: Accessible label for the TOC <nav> element.

4.5 Help & Pro Tabs

Links to documentation, support, developer hooks, and upgrade options.

5. Using AnchorKit in Different Contexts

5.1 Automatic Insertion (Global)

When enabled, AnchorKit parses the content, injects IDs into headings, and inserts the TOC. It will not insert if disabled globally/automatically, if there are fewer headings than minimum, or if a manual TOC (block/shortcode/widget) is present.

5.2 Gutenberg Block

Add the “Table of Contents (AnchorKit)” block. Options set in the block override global settings. Defaults fall back to global settings.

5.3 Elementor Widget (Pro)

Search for “AnchorKit TOC” widget in Elementor. Configure Content, Behavior, Pro Features, and Styles visually. Changing a control overrides the global value for that widget instance.

5.4 Sidebar Widget

Add the “AnchorKit TOC” widget via Appearance → Widgets. Only appears on singular posts/pages.

5.5 Shortcode

Use [anchorkit_toc] anywhere shortcodes are supported.

6. Integrations

6.1 Advanced Custom Fields (ACF) (Pro)

Includes headings from ACF WYSIWYG/text fields. Configure field names in global settings or per-instance.

6.2 AMP Compatibility (Pro)

Detects AMP pages and outputs AMP-safe markup. Custom JavaScript behavior is disabled on AMP.

7. When the TOC Will Not Appear

  1. TOC is disabled globally: Check Quick Start settings.
  2. Post type not allowed: Check "Show on" settings.
  3. Not enough headings: Must meet Minimum Headings count.
  4. Manual TOC present: Auto-insertion is skipped if a block, shortcode, or widget is already used.
  5. Other TOC plugins: Disable Easy TOC or similar plugins.

8. Customizing via Code (Developer Hooks)

8.1 Context Array

[
    'source' => 'auto_insertion' | 'shortcode' | 'widget',
    'post_id' => 123,
    'is_admin' => false,
    'data' => [ /* metadata */ ],
    'render_settings' => [ /* flags */ ],
]

8.2 Modify Headings

add_filter( 'anchorkit_toc_headings', function ( $headings, $context ) {
    return array_values( array_filter( $headings, function ( $h ) {
        return stripos( $h['text'] ?? '', 'sponsored' ) !== 0;
    } ) );
}, 10, 2 );

8.3 Customize Container Classes

add_filter( 'anchorkit_toc_container_classes', function ( $classes, $context ) {
    if ( $context['source'] === 'widget' ) {
        $classes[] = 'toc-widget--sidebar';
    }
    return $classes;
}, 10, 2 );

8.5 Inject Content Before/After

add_action( 'anchorkit_toc_before', function ( $context ) {
    if ( $context['source'] === 'auto_insertion' ) {
        echo '<p class="toc-intro">On this page:</p>';
    }
} );