Table of Contents

Build a clickable heading outline for long content and control where it appears, how it looks, and how individual posts handle it.

Overview

Table of Contents creates a clickable list of headings from your content. It is designed for long posts, tutorials, guides, and documentation pages where readers need quick section-level navigation.

Admin path: Airygen SEO -> Settings -> Table of Contents

The module supports automatic insertion, manual placement, per-post control, styling presets, and a preview area for checking the overall result before you publish.

Settings

The page is divided into Settings, Layout, and Preview.

Settings tab

Use this tab to control output methods, scope, structure, behavior, and anchor rules.

Manual output

  • Enable manual TOC output allows the TOC to be placed with a template function, shortcode, or block.
  • Template function is useful when you want the TOC inside a theme template.
  • Shortcode is useful when you want the TOC inside content or a shortcode block.
  • Block is useful when you want visual placement in the block editor.

Template function:

<?php if ( function_exists( 'airygen_the_toc' ) ) { airygen_the_toc(); } ?>

Shortcode:

[airygen_toc]

Block:

<!-- wp:airygen/toc /-->

Automatic injection

  • Enable automatic TOC injection inserts the TOC into eligible posts automatically.
  • Insert position supports Before content and After first paragraph.

Section title

  • Title controls whether the TOC shows a visible heading.
  • The title text field changes the wording shown above the list.
  • The title level field changes the HTML heading level used for that title.

Scope

  • Post types to include decides which content types are eligible for TOC output.

Structure

  • Minimum headings hides the TOC until a post has enough headings.
  • Heading levels lets you include H2, H3, and H4 in the TOC list.

Behavior

  • Smooth scroll animates movement when readers click a TOC link.
  • Add numbering turns the list into a numbered outline.
  • Collapse on load starts the TOC in a collapsed state.

Anchors

  • Anchor prefix adds a prefix to generated heading IDs to avoid clashes.
  • Exclude headings skips headings that match the comma-separated phrases you enter.

Layout tab

Use this tab to change the visual style of the TOC.

Themes

  • Snow Slate gives the TOC a neutral white and slate style.
  • Honey Paper gives the TOC a warm parchment-style look.
  • Sky Breeze gives the TOC a light blue appearance.
  • Mint Calm gives the TOC a soft green appearance.
  • Rose Blush gives the TOC a softer pink appearance.
  • Lavender Mist gives the TOC a light violet appearance.

Style

  • Header controls let you change the title container border widths, border style, border radius, border color, padding, margins, background color, title color, title font size, and title font style.
  • Body controls let you change the TOC container border widths, border style, border radius, border color, padding, margins, and background color.
  • Link controls let you change the TOC link color, font size, and bold, italic, or underline styling.
  • List controls let you change the inner indentation used by the TOC list.

Preview tab

Use this tab to review the TOC on Laptop, Tablet, and Cellphone previews.

  • The preview is intentionally simple.
  • Your theme can still affect the final frontend output.
  • The screen also shows generated HTML and CSS samples.

Editor Panel

In the block editor, the TOC panel lets you control the feature for one post without changing the global defaults.

  • TOC display mode supports Auto, Manual, and Disabled.
  • When the mode is Manual, the panel shows Insert TOC buttons for Block and Shortcode.

How to Use

  1. Open Airygen SEO -> Settings -> Table of Contents.
  2. In the Settings tab, decide whether you want to use Enable manual TOC output, Enable automatic TOC injection, or only one method.
  3. If you want manual placement, turn on manual output and copy the Template function, Shortcode, or Block snippet that fits your workflow.
  4. If you want automatic placement, turn on automatic injection and choose an Insert position of Before content or After first paragraph.
  5. Turn on the TOC title if you want a visible heading, then set the title text and heading level.
  6. In Scope, choose which post types can show a TOC.
  7. In Structure, set Minimum headings and choose the heading levels that should be included.
  8. In Behavior, decide whether smooth scrolling, numbering, and collapsed mode should be enabled.
  9. In Anchors, set an Anchor prefix and list any headings you want excluded.
  10. Open Layout, choose a preset theme, and fine-tune the title area, body container, links, and list spacing.
  11. If needed, open a specific post in the editor and use TOC display mode to switch that post to Auto, Manual, or Disabled.
  12. Save the settings, review the Preview tab, and then check a live article with enough headings to confirm the final result.

Check these items after saving:

  • The TOC appears only on posts that meet your minimum heading requirement.
  • Clicking a TOC link moves the reader to the correct section.
  • The per-post TOC display mode matches the method you chose for that article.
  • The live page still looks correct after your theme CSS is applied.

SEO Benefits

A good table of contents makes long content easier to scan and easier to navigate. That helps readers reach the section they want faster and gives your long-form pages a clearer structure.

User Cases

Long tutorial articles

Before: A setup guide has many sections, but readers have to scroll through everything to find the exact step they need.

After: Table of Contents turns those headings into a clickable outline, so readers can jump directly to installation, examples, or troubleshooting.

Documentation and knowledge base pages

Before: Support docs already use clean headings, but the page still feels heavy for beginners who are opening it for the first time.

After: The TOC makes the structure visible immediately and helps readers understand the shape of the page before they start reading in detail.

FAQ

Why does the TOC not appear on some posts?

Check the Minimum headings value, the selected Heading levels, the allowed Post types, and the per-post TOC display mode.

Should I use automatic injection or manual placement?

Use automatic injection when you want the TOC added across many posts with minimal work. Use manual placement when you need exact control over where it appears.

Why can the preview differ from the live page?

The preview is a simplified reference. Your theme and the real post content still influence the final frontend result, so always confirm the live page.