How to Build a Smart Table of Contents in WordPress (No Plugins)

In the world of SEO, structure is key. When you write a “mega-post” or a long-form guide, you aren’t just writing for humans; you are writing for Google’s crawlers. If your content is organized, Google sometimes rewards you with Site Links—those helpful jump-links that appear directly in search results, allowing users to skip to the exact section they need.

However, many WordPress users rely on code-heavy plugins for making Table of Contents (ToC) blocks. These plugins often load large, unnecessary CSS files and tracking scripts on every single page of your site, even the ones where a ToC isn’t present.

Today, we are going to build a Smart Table of Contents. This tool automatically “scrapes” your article for <h2> headings, generates an amazing navigation menu, and inserts it exactly where you want it. It’s lightweight, fast, and 100% free.

Why Your Long-Form Content Needs a ToC

Beyond the SEO benefits, a Table of Contents is an important User Experience (UX) feature.

1. Reduced Bounce Rates: If a user lands on your page looking for a specific answer, a ToC lets them find what they are looking fir in seconds rather than scrolling for minutes.
2. Increased Accessibility: Screen readers and assistive technologies use jump links to help users navigate big documents.
3. Visual Professionalism: High-authority sites like Wikipedia and Forbes use Table of Contents to show that their content is exhaustive and well-researched.

The Code

Use our interactive tool below to choose your design style. This code is unique because it automatically finds your headings—you don’t have to manually link anything.

<!-- START TABLE OF CONTENTS -->
<div id="toc-wrapper">
    <div id="toc-title">Table of Contents</div>
    <ul id="toc-list"></ul>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const tocWrapper = document.getElementById("toc-wrapper");
    const tocList = document.getElementById("toc-list");
    const headings = document.querySelectorAll(".entry-content h2, .post-content h2, article h2, main h2");

    if (headings.length > 0) {
        headings.forEach((heading, index) => {
            const id = heading.id || "section-" + index;
            heading.id = id;
            const li = document.createElement("li");
            const a = document.createElement("a");
            a.textContent = heading.textContent;
            a.href = "#" + id;
            li.appendChild(a);
            tocList.appendChild(li);
        });
    } else {
        if (tocWrapper) tocWrapper.style.display = "none";
    }
});
</script>

<style>
    #toc-wrapper { margin: 30px 0; padding: 25px; border-radius: 8px; font-family: sans-serif; transition: 0.3s; background: #fdfdfd; border: 1px solid #e2e8f0; }
    #toc-title { font-weight: 700; font-size: 20px; margin-bottom: 15px; color: #1e293b; }
    #toc-list { list-style: none; padding: 0; margin: 0; }
    #toc-list li { margin-bottom: 12px; padding-left: 20px; position: relative; }
    #toc-list li::before { content: "•"; position: absolute; left: 0; color: #000; font-weight: bold; }
    #toc-list a { text-decoration: none; transition: 0.2s; font-size: 16px; color: #475569; }
    #toc-list a:hover { color: #2563eb; }
    html { scroll-behavior: smooth; }
</style>
<!-- END TABLE OF CONTENTS -->

How to Set It Up

1. Placement: Open your post editor and insert a Custom HTML block at the beginning of your article (usually after the introduction).
2. The Magic: The JavaScript in this code automatically looks for any <h2> tag inside your post content. It then extracts the text and creates a clickable link.
3. Automatic IDs: You don’t need to manually add “anchors” or “IDs” to your headers. The script does it for you.

Final Thoughts

Adding a Table of Contents is one of the easiest ways to improve your WordPress SEO and user engagement. By using this custom script, you keep your site lean, avoid large plugins that slow down your site, and provide your readers with a world-class navigation experience.