How to Add a Table of Contents in WordPress Block Editor

The first time I added a wordpress table of contents to a long post, it felt like putting street signs on a winding road. Readers stopped getting lost, and I stopped getting “Where do I find the part about…?” emails.

If you publish tutorials, pillar posts, or service pages, a table of contents (TOC) helps people skim, jump to what they need, and understand your structure fast. In February 2026, you’ve got three solid ways to do it in the WordPress Block Editor: a built-in TOC block (if it shows up on your site), a plugin, or a manual setup with anchors.

Here’s a quick way to pick your path:

Method	Best for	Tradeoffs
Block Editor TOC block	Simple TOC, minimal setup	Fewer styling and behavior options
TOC plugin	Sticky TOC, smooth scroll, advanced controls	Adds plugin weight and settings to maintain
Manual anchors (no plugin)	Total control, zero plugin	Takes more time, easier to break links

Method 1: Add a Table of Contents using the Block Editor TOC block

On many sites, I can add a TOC without installing anything. If you don’t see a Table of Contents block, update WordPress first. If it still doesn’t appear, installing the Gutenberg plugin sometimes makes newer blocks available earlier.

1. Add real headings first
   In the editor, make sure your sections use Heading blocks, not bold paragraphs. I stick to H2 for main sections and H3 for sub-sections.
2. Insert the Table of Contents block
   Click the + inserter, search “Table of Contents”, then add the block where you want it (usually under the intro).
3. Choose which heading levels to include
   In the block settings sidebar, limit the depth. For most posts, I include H2 and H3 only. This keeps the TOC readable, especially on phones.
4. Turn on indentation (if available)
   If the block offers indentation or nested display, enable it. It makes H3 items look like sub-points under their H2 parent.
5. Set expectations for smooth scrolling
   Some TOC solutions include a smooth scroll toggle, some don’t. If the TOC block is just jump links, scrolling style depends on your theme and browser. If smooth scroll matters to you, the plugin method below is usually better.
6. Update and refresh when headings change
   The TOC usually updates as you edit. If it doesn’t, I save the draft, click back into the TOC block, and reload the editor. That fixes most “why didn’t my new heading appear?” moments.

If you want a deeper look at how Gutenberg behaves as an editor (and where a few formatting options hide), I’ve also used this guide on SmartWP about underline text in WordPress block editor as a quick reference for editor quirks.

Method 2: Add a Table of Contents with a plugin (more control, better UX)

When I want a collapsible TOC, smooth scrolling, or an offset for sticky headers, I go with a plugin. The trick is picking one that plays nicely with the Block Editor and doesn’t fight your theme.

Before you choose, it helps to skim a neutral overview like Hostinger’s WordPress table of contents guide so you know what features are common across tools.

1. Pick a reputable TOC plugin that supports Gutenberg I look for:

   • Recent updates and solid reviews
   • Clear Gutenberg support (block or shortcode)
   • Controls for heading levels, exclusions, and scroll offset

   If you’re comparing block-focused add-ons, pages like Essential Blocks’ TOC overview can help you see what a modern TOC block typically offers.

2. Install and activate In WordPress, go to Plugins → Add New, search the plugin name, then Install and Activate.

3. Insert the TOC in the editor Depending on the plugin, you’ll either:

   • Add a TOC block (best option), or
   • Paste a shortcode into a Shortcode block

4. Configure the key settings These are the settings I check first:

   • Heading levels: I usually include H2 and H3, rarely deeper.
   • Exclude headings: handy for sections like “Resources” that don’t need a jump link.
   • Scroll offset: required if you have a sticky header (more on that below).
   • Collapsible on mobile: ideal for long TOCs that push content down.

5. Test the jump links on the front end I click every TOC item on desktop and then on my phone. Editor previews can lie, your real theme can change spacing.

If your theme has a sticky header, a TOC link can land “too high,” hiding the heading under the header. Set a scroll offset in the plugin (or adjust your theme) so the heading stays visible.

If you’re using a block theme, many plugins can also auto-insert a TOC across posts. Docs like Nexter WP’s guide to adding a table of contents can give you an idea of how TOC blocks behave in Full Site Editing setups.

Method 3: Create a manual TOC (no plugin) using anchors in Gutenberg

Manual TOCs are old-school, but I still use them on lightweight sites where I want zero plugin overhead. WordPress makes this easier than it sounds.

1. Use a clean heading structure Keep one H1 (your post title), then use H2 for top sections and H3 for sub-sections. Consistency matters because your TOC is basically a map.
2. Add anchors (IDs) to each heading Click a Heading block, open the settings sidebar, then go to Advanced → HTML anchor. Add a short ID like:
   • getting-started
   • plugin-method
   • manual-toc
3. Write your TOC as a bulleted list Near the top of the post, add a List block. Type your section names.
4. Link each list item to its anchor Highlight a list item, click the link icon, and link to #your-anchor.

Here’s a simple example I’ve used:

• Getting started
• Block Editor TOC block
• Plugin method
• Manual anchors

And the links would point to:

• #getting-started
• #block-editor-toc
• #plugin-method
• #manual-anchors

5. Keep anchors stable Once the post is live, I avoid changing anchors unless I have to. External sites might link to those sections, and changing IDs breaks those links.

Full Site Editing, sticky headers, and mobile behavior (plus my best practices)

If you use a Full Site Editing theme, you can place a TOC inside a template (like Single Post) so it appears everywhere. Just remember that TOCs only work when the content actually has headings, so posts without headings can look odd. In that case, I prefer inserting the TOC per post, not globally.

Sticky headers cause the most “my TOC is broken” reports. Sometimes it’s the WordPress admin bar too, but only logged-in users see that. Either way, the fix is the same: add a scroll offset (plugin setting), or adjust your theme so anchored scrolling leaves room.

On mobile, TOCs can get huge fast. My favorite simple fix is to keep the TOC shallow (H2 and H3), or make it collapsible (many plugins support this). If you’re going manual, you can also place the TOC inside a Details block so it expands only when a reader wants it.

Best practice I stick to: a TOC should feel like a helpful index, not a second page of content. Limit depth, keep headings short, and don’t repeat yourself.

Before you publish, I run this quick checklist:

• Headings use H2/H3, not bold text.
• Only one H1 exists (the title).
• TOC includes only the levels I want (usually H2 and H3).
• Every TOC link scrolls to the right spot (desktop and mobile).
• Sticky header offset is set (or tested) so headings aren’t hidden.
• Headings are consistent and scannable, because the TOC mirrors them.

Once you set up a wordpress table of contents you like, your long posts start feeling lighter to read. That’s the goal. Readers get control, and you get fewer bounces.