✨ Features ⚙️ How It Works 🧪 Live Demo 📍 Placement 📦 Installation ❓ FAQ
Free on WordPress.org — v1.13

A Table of Contents that
actually matches your theme.

Auto-detects your post's headings and builds a clean, accessible Table of Contents — no font clash, no color mismatch, no manual setup. Works in light mode, dark mode, and every toggle in between.

✓ Free Plugin ✓ Zero Config ✓ SEO Ready ✓ WP 5.6+ ✓ PHP 7.4+ ✓ GPLv2

No premium tier. No paywalled core features. Just a plugin that works.

📑
UTS Sites Table of Contents
v1.13.5 · by UTS Sites · GPLv2
Active
<nav class="uts-toc-container">
  <span class="uts-toc-title">Table of Contents</span>
  <ol>
    <li><a href="#h1">1. What is a TOC?</a></li>
    <li><a href="#h2">2. Getting Started</a></li>
  </ol>
</nav>
H2–H6Levels Scanned
0Dependencies
100%Free
5
Heading Levels (H2–H6)
2
Files Loaded — CSS + JS
0
External Dependencies
100%
Free, Every Feature
✨ Plugin Features

Everything you need for a
Table of Contents that belongs

Every default is chosen so it looks right the moment you activate — everything below is there if you ever want to change something.

🔎

Automatic Heading Detection

Scans H2–H6 in your post content and builds a nested, correctly-ordered outline — no shortcode required unless you want manual placement.
Core Feature
🌗

True Automatic Day/Night Mode

Reads the page's actual rendered background color — not a guessed theme class — so it matches any theme's light/dark toggle, live.
Unique

Per-Post Overrides

Set a global position and behavior once, then override position, scroll offset, or disable the TOC entirely for any single post.
Per-Post
📐

Scroll Offset for Sticky Headers

If your theme has a sticky header, clicking a TOC link would normally hide the heading behind it. Set an offset once and it never happens again.
Settings
🔢

Numbered or Bulleted

Flip between a clean numbered outline and simple dot markers — spacing and layout stay pixel-identical either way.
Style
🎨

Colors & Typography, Optional

Defaults are chosen to be readable on any theme. Want your brand colors or a different font-size scale per heading level? It's one click away.
Customizable
🏗️

Real SEO Signals

Stable, crawlable anchor IDs on every heading, a semantic <nav> landmark with proper ARIA labelling, and optional JSON-LD ItemList schema.
SEO

Heading Structure Checker

The post editor flags multiple H1s and skipped heading levels (H2 straight to H4) right where you're writing, before you hit publish.
Editor Tool
🪶

Zero Bloat

No jQuery, no external libraries, no tracking. One small CSS file and one small JS file, loaded only on pages that actually have a TOC.
Performance
🎯 See It In Action

Every Feature — Visualized

Click any tab below to explore each feature with a live screenshot preview.

⚙️ WordPress Admin Panel

Powerful Settings,
Zero Complexity

Full control at Settings → UTS TOC. Every option is organized into Placement, Colors, Typography, and SEO tabs.

📍
Default position controlBefore content, after content, after Nth paragraph, or manual shortcode
🔢
Numbered / bulleted toggleSwitch list style instantly, layout stays identical
🎨
Colors & Typography tabsOverride any color or per-level font size, with one-click reset
🌗 Zero Guesswork

Reads the Real
Background Color

Most TOC plugins guess a theme's dark-mode class name. This one reads the actual rendered pixel color behind the box, live.

Works with any theme's toggleNo configuration, no theme-specific class list to maintain
Updates instantly on switchMutationObserver catches the change the moment it happens
📝 Per-Post Editor Control

Override Per Post,
Not Global

Every post gets a sidebar meta box. Disable the TOC, change its position, or set a custom scroll offset — without touching global settings.

🚫
Disable on specific postsOne click toggle — does not affect any other page
Heading structure checkFlags skipped levels and multiple H1s right in the editor
🏗️ Optional Structured Data

Real JSON-LD,
Not Just Markup

When enabled, the TOC's headings are also output as an ItemList schema block, giving search engines an extra structural signal.

📋
Toggle on/off anytimeOff by default; enable in Settings → SEO
Stable anchor IDs everywhereEvery heading gets a crawlable, linkable id — with or without schema on
/wp-admin/options-general.php?page=uts-sites-toc
📑
UTS Sites Table of Contents
v1.13.5 · by UTS Sites
● Active
Default Position
Before content
Collapsible box
Numbered list
Scroll offset (px)
80
JSON-LD schema
yoursite.com/blog-post
/wp-admin/post.php?post=42&action=edit
📑 UTS Sites TOC
Disable on this post
Position override
Use default
Scroll offset override
Use default
✓ No heading-structure issues found
Schema Output — page <head>
"@context": "https://schema.org",
"@type": "ItemList",
"itemListElement": [
  { "name": "Getting started", "url": "#getting-started" },
  { "name": "Configuration options", "url": "#configuration-options" }
]
⚙️ Process

How It Works — Step by Step

Install and activate — the plugin handles everything else automatically, every time a visitor loads your page.

1

Visitor Opens a Post

The plugin hooks into the_content and checks the position setting for this post.

2

Headings Are Scanned

Every H2–H6 in the post is detected, in order, and given a stable, unique anchor ID.

3

TOC Built Server-Side, in PHP

Numbering, nesting, and marker generation all happen in PHP — not fragile CSS counters — so it's always correct.

4

Colors Match the Page, Live

JS reads the page's actual rendered background and applies the right color set — no theme class guessing.

5

Rendered as Semantic HTML

Wrapped in a <nav> landmark with ARIA labelling — accessible and crawlable by default.

6

Optional Schema Injected

If enabled, a matching ItemList JSON-LD block is added to <head> for search engines.

Generated Output — post content
<!-- UTS Sites Table of Contents -->

<nav class="uts-toc-container" role="doc-toc" aria-label="Table of Contents">
  <ol>
    <li><a href="#getting-started">Getting started</a></li>
    <li><a href="#configuration-options">Configuration options</a></li>
  </ol>
</nav>
🧪 Not a Screenshot

This is the real plugin, running live.

The box below uses the plugin's actual CSS and JavaScript, copied exactly. Click the toggle to switch modes, or the arrow to collapse it.

yoursite.com/google-ads-beginners-guide
A Beginner's Guide to Google Ads
1. What Are Google Ads?

Google Ads is a pay-per-click advertising platform that lets you show up right when people are searching for what you sell...

2. How Google Ads Can Boost Your Visibility

From brand awareness to measurable ROI, here's how a well-run campaign compounds over time...

📍 Placement Control

Three ways to place the Table of Contents

Set a global default, then override it per post whenever you need to.

Global Default

Choose Where It Appears, Once

Pick a default position in Settings: before the content, after the content, after the Nth paragraph, or manually via the [uts_toc] shortcode.

This default applies to every post and page unless overridden.

4 position modes✓ Default: before content
Settings → Placement
Active
📍 Position
Before the first heading
⬇ Applied automatically
position: "before_content"
✨ Sticky-Header Fix

No More Hidden Headings

If your theme has a sticky header, clicking a TOC link normally scrolls the heading right behind it. Set an offset once — global or per-post — and it's fixed forever.

Pixel-based offsetGlobal + per-post
Click Behavior
Fixed
📐 Scroll Offset
80px — matches sticky header height
⬇ Heading lands below the header
scrollOffset: 80
Editor Sidebar

Override Any Single Post

Every post editor has a "UTS Sites TOC" meta box — change position, scroll offset, or disable the TOC entirely for that post only, without touching the global setting.

No global impact✓ One click
Post Editor Sidebar
Per-Post
📝 This Post Only
Position override: After content · Scroll offset: 120px
⬇ Applies to this post only
post_meta: { "position": "after_content", "offset": 120 }
⚙️ Settings Panel

Full Control in WordPress Admin

Settings → UTS TOC. Sensible defaults mean it works perfectly with zero configuration.

📑
UTS Sites TOC
📍 Placement
🎨 Colors
🔤 Typography
🏗️ SEO
Before content
After content
After Nth paragraph
Manual shortcode

For sticky headers.

Posts
Pages
Collapsible boxAdds a click-to-collapse arrow
Numbered listSwitch from bullets to numbers
JSON-LD schemaAdds an ItemList structured-data block
📸 Screenshots

See the Plugin In Action

Real visual representations of the plugin interface.

Table of Contents
  1. 1.Introduction
  2. 2.Setup Guide
Screenshot 01

Light mode, numbered list

Clean, minimal box that inherits your theme's font and spacing conventions.
Table of Contents
  1. Introduction
  2. Setup Guide
Screenshot 02

Dark mode, bullet list

Same page, same box — colors adapt automatically based on the actual rendered background.
📝 Post Editor Sidebar
Disable on this post
Custom scroll offset
120px
Screenshot 03

Per-post meta box

Every post editor gets a dedicated sidebar panel for overriding global defaults.
"@type": "ItemList",
"itemListElement": [
 { "name": "Introduction" }
]
Screenshot 04

Optional JSON-LD output

An ItemList structured-data block, generated only when SEO schema is switched on.
📦 Installation

Up and Running in Under 2 Minutes

Two installation methods — the plugin works automatically after activation, zero configuration required.

1
Download the Plugin ZIP

Click "Download Free" and save the zip to your computer.

2
Go to Plugins → Add New Plugin

In your WordPress admin sidebar, click PluginsAdd New Plugin.

3
Click "Upload Plugin" → Choose File

Select the downloaded zip and click Install Now.

4
Activate Plugin

Click Activate Plugin — the TOC is now live on every post automatically.

❓ FAQ

Frequently Asked Questions

Will it clash with my theme's fonts or colors?
+
The font-family always matches your theme — no override for that. Link and marker colors default to a neutral, readable value that works on both light and dark backgrounds, and you can pick your own colors and font sizes any time in Settings.
Does it slow my site down?
+
No. One small CSS file and one small JS file, only loaded on pages that actually render a TOC — nothing on the rest of your site, no external requests, no jQuery.
Can I turn it off for just one post?
+
Yes. Every post editor has a "UTS Sites TOC" box in the sidebar where you can disable it, change position, or set a custom scroll offset for that post only.
Is the numbered list real, or just CSS?
+
It's generated server-side in PHP, per actual heading level, so numbering is always correct even with deeply nested or irregular heading structures — not relying on fragile CSS counters.
How does the day/night detection actually work?
+
JavaScript reads the actual rendered background color behind the TOC box and picks the readable color set for it — it doesn't guess a theme's toggle class name, so it works with any theme.
Is this really free, with no premium version?
+
Free, full stop. Every feature described on this page — colors, typography, scroll offset, and JSON-LD schema — ships in the free WordPress.org version.
Does it work with Gutenberg, Elementor, and page builders?
+
Yes. It hooks into WordPress's native the_content filter, which all major builders pass through — Gutenberg, Elementor, Divi, and others.
What WordPress and PHP versions are required?
+
WordPress 5.6 or higher and PHP 7.4 or higher. Works on all standard hosting environments including shared hosting, VPS, and managed WordPress hosts.

Give your posts a Table
of Contents they deserve.

Free, lightweight, and it actually looks like it belongs on your site.

GPLv2 · Free Forever · WordPress 5.6+ · PHP 7.4+ · No External Dependencies