Table Of Contents In | Clean WordPress Jump Links

Long posts can still feel easy to read today when people can see the shape of the page. That’s what a table of contents does. It turns your headings into a set of jump links, so readers can move around without endless scrolling.

You don’t need a fancy theme trick to pull this off. WordPress can do it with a block, a plugin, or a simple manual setup. The best pick depends on how much control you want, how often you edit older posts, and whether you publish in the block editor, the Classic Editor, or a page builder.

This article walks you through the options, shows how to keep links from breaking, and gives you a quick pre-publish checklist. Along the way, you’ll also tighten your heading structure, which makes your posts easier to scan for humans and clearer for assistive tech.

Quick method picker for a table of contents

Situation	Best approach	Why it fits
You use the block editor and want a fast setup	Core Table of Contents block	Auto-builds links from Heading blocks
You publish with the Classic Editor	Plugin with shortcode	Can scan headings without blocks
You need full control over which headings appear	Manual anchors + hand-written list	You pick each item and wording
You want nested sections (H2, H3, H4)	Plugin with heading levels	Auto-indents based on heading level
You often rename headings after publishing	Manual anchors or a block that preserves anchors	Stable IDs keep old links working
You run a page builder with custom heading widgets	Plugin built for your builder	TOC needs to “see” builder headings
You want zero extra plugins	Core block or manual anchors	No plugin updates to manage
You plan to reuse the same TOC style site-wide	Plugin with design controls	One set of settings across posts
You care most about clean HTML semantics	Manual TOC wrapped in a nav element	Clear navigation pattern for browsers

What makes a table of contents worth adding

A table of contents is more than decoration. It solves a few real problems at once:

• Skimmers get a map. People can jump to the section they want, then circle back for the rest.
• Readers feel less lost. When a post looks long, a TOC shrinks it into bite-size chunks.
• Headings stay honest. Building a TOC forces you to use headings for structure, not styling.

On WordPress, a TOC links to anchors on the same page. Each anchor is an ID on a heading, like #shipping-rules.

Table Of Contents In WordPress posts with the block editor

If you write in the block editor (Gutenberg), start with the core Table of Contents block. It reads the Heading blocks on your page and generates jump links automatically. WordPress documents the block behavior and how it builds heading links in the Table of Contents block guide.

Add the block in under a minute

1. Open your post in the editor.
2. Place your cursor where you want the TOC, often after the intro.
3. Click the plus icon, search for “Table of Contents,” then insert it.
4. Check that your headings are set with Heading blocks, not bold text.
5. Preview the post and click a few TOC items to confirm the jumps.

Keep the heading levels clean

The block can only work with what you give it. If your headings skip around, the TOC will feel weird. A simple pattern is:

• Use H2 for the big sections.
• Use H3 for subsections inside an H2.
• Use H4 only when an H3 needs sub-points.

Make anchors stable before you publish

In WordPress, headings often create an anchor slug from the heading text. If you change the heading later, the slug can change too, and old jump links may break.

Two simple habits reduce that risk:

• Write headings you can live with. Rename for clarity before you publish, not after.
• Set a custom HTML anchor when you can. In many editors, the settings panel lets you set an anchor ID that won’t shift when you tweak the wording.

Add a WordPress TOC with a plugin

Plugins are handy when you’re not fully in the block editor, or when you want deeper controls like collapsible lists, specific heading ranges, or automatic numbering. Many TOC plugins can scan headings in Classic Editor content, page builders, and custom post types.

If you have a backlog, adding a table of contents in older posts can improve navigation without rewriting the whole piece.

Pick plugins by behavior, not by design screenshots

Before you install anything, decide what you need. A lot of TOC plugins share the same surface features, yet differ in the details that matter day to day.

• Heading detection: Can it read the heading source you use (blocks, Classic Editor, builder widgets)?
• Anchor rules: Can you keep existing anchors, or does it rewrite them?
• Exclusions: Can you skip a heading without breaking the outline?
• Levels: Can you show H2 only, or include H3 and H4?

Safe setup steps after install

1. Install the plugin from your WordPress dashboard and activate it.
2. Open the plugin settings and choose your heading range (common: H2–H3).
3. Set an anchor format you can keep consistent, like lowercase with hyphens.
4. Insert the TOC with the plugin’s block or shortcode in one test post first.
5. Preview on mobile and desktop, then publish.

Manual table of contents with clean HTML anchors

If you want total control, manual anchors still win. You decide exactly what shows in the TOC, how it’s worded, and which headings get a jump target.

Use the nav element for a TOC block

On the web, tables of contents are a type of navigation. MDN describes the nav element as a section intended for navigation links, including a table of contents.

In WordPress, you can build this with a Group block (or Custom HTML block) and an unordered list. A simple pattern:

• Create a heading like “On this page.”
• Add a list of links that point to your anchors.
• Add anchors to the matching section headings.

Choose anchor names that won’t bite you later

Good anchors are short, predictable, and stable. A practical format:

• Lowercase letters
• Hyphens instead of spaces
• No punctuation
• Keep it under 40 characters when you can

Anchor examples that age well: getting-started, pricing, troubleshooting. If you work with long headings, don’t turn the whole sentence into the anchor. Use a compact label.

Don’t let a manual TOC turn into busywork

Manual means you keep links in sync. Use anchors based on the topic so they can stay stable while wording changes.

Design choices that make TOCs feel good to use

A TOC works best when it’s easy to scan. These choices keep it tidy:

• Keep TOC items short. A list of long sentences feels heavy.
• Use nesting on purpose. Show H2 only, or show H2–H3 with clear indentation.
• Don’t over-link. A TOC with 30 items looks like a wall. Merge tiny sections, or tighten headings.
• Place it early. After the intro is often a sweet spot, so readers see it before they scroll.

Fixes when your TOC links don’t jump right

When a TOC misbehaves, it’s usually one of a few repeat offenders. Here’s how to track them down.

Two headings share the same anchor

If you have repeated headings like “Step 1” in several places, WordPress or your plugin may generate duplicate IDs. Fix it by giving each section a distinct anchor, like step-1-install and step-1-settings.

The editor uses bold text instead of heading blocks

TOC tools pull from real headings. If your “headings” are just bold paragraphs, they won’t show up. Convert them to Heading blocks (or real H2/H3 tags in Classic Editor) and refresh the TOC.

The sticky header hides the target

Many sites use a fixed header. When you click a jump link, the browser scrolls the heading to the top, then the header hides it. Two fixes usually work:

• Add top padding to headings and a negative anchor offset via CSS.
• Use a plugin option that applies an offset for sticky headers.

The page builder blocks the plugin from seeing headings

Some builders output headings in a way that a TOC plugin can’t detect. If your TOC is empty, test a builder-friendly TOC plugin, or use manual anchors.

The slug changes after edits

This is the classic “it worked yesterday” problem. If your link target is based on the heading text, editing the heading can change the ID. If you see that pattern, switch to custom anchors for your main sections so the TOC stays stable across revisions.

Accessibility and mobile checks

A table of contents is navigation. Treat it like navigation and it becomes easier for more people to use.

Make the TOC label clear

A short label above the TOC helps screen reader users. “On this page” works well. If you use a block that auto-adds a title, keep it concise.

Keep tap targets comfortable

On phones, tiny links are a pain. Use enough line height in the TOC list, and avoid putting links too close together. Test the TOC with your thumb, not your mouse.

Use headings that describe the section

Headings like “Step 3” or “More” don’t say much. A TOC made from vague headings is vague too. Google’s own style notes also points out that descriptive headings help readers jump between sections.

Pre-publish checklist for a TOC that stays solid

Check	Why it matters	Quick fix
Headings use real H2/H3 blocks or tags	TOC tools can only detect true headings	Convert bold text to Heading blocks
Heading levels don’t skip around	Nesting reads clean and scan patterns stay clear	Keep H2 as section starts, then H3 inside
Anchors are distinct	Duplicate IDs send clicks to the wrong place	Rename anchors or adjust heading text
Main section anchors are stable	Edits after publishing can break old links	Set custom anchors for core sections
Sticky header offset is tested	Headings can land under a fixed header	Add offset CSS or plugin header offset
TOC looks good on a phone	Most readers tap, not click	Increase spacing and line height in the list
TOC item text is short and clear	A dense TOC feels like work	Tighten headings and merge tiny sections
Links jump to the right spot in preview	Broken jumps tank trust fast	Click each item once before publishing

Once your links jump, you can style the box later. The win is a clear outline and headings that match what each section delivers.

Before you hit publish, click each item in the TOC on desktop and on a phone view. If each tap lands in the right spot, your table of contents in WordPress is doing its job.