How to Add a Table of Contents to WordPress Without Using Plugins [Full ChatGPT Prompt + Guide]

In this article, I want to share how I built a custom, dynamic Table of Contents for my WordPress blog without installing a single plugin. With the help of ChatGPT, I was able to develop a fully personalized TOC solution that’s both lightweight and functional. If you’re a blogger or content creator looking to improve your blog, avoid plugin bloat, and gain full control over the design of your TOC, this guide will walk you through my exact process – from concept to execution. Yes, I’m talking full ChatGPT prompt plus a kinda step-by-step guide 😉

How a Table of Contents Improves Blog SEO?

Buy first, let’s see why your blog needs a table of contents (TOC) in the first place?

First, incorporating a table of contents into your blog articles improves user experience. From a usability perspective, the TOC helps readers navigate long-form content more easily, allowing them to jump to the sections they are most interested in.

Besides user experience, adding a Table of Contents to your blog can play a role in improving SEO. For example, a TOC creates internal anchor links, which search engines can crawl and index. This structured layout signals to search engines that your content is well-organized, which can contribute to higher rankings and improved visibility. If you’re writing in-depth guides or multi-section articles, a TOC is a small tweak that can lead to better search results, or can even result in rich snippets showing up in Google’s search results. This not only increases your visibility but also improves your click-through rates.

Finally, a TOC encourages users to interact more with your content. When visitors can quickly find and jump to sections they care about, it reduces bounce rate and increases time spent on page – two behavioral signals that we know Google uses to evaluate content quality.

So, a well-implemented TOC isn’t just helpful for readers and user experience – it’s a strategy for improving search rankings as well!

Why use ChatGPT over a regular WordPress plugin for your TOC

Now, let me explain why I ended up using ChatGPT, not a regular WordPress plugin, for my TOC.

If you’ve ever considered adding a Table of Contents to a WordPress blog, you’ve probably discovered that many plugins can do this. Indeed, most people immediately look for a plugin. Some of the most popular TOC plugins for WordPress are:

• All in One SEO (AIOSEO)
• Table of Contents Plus
• Heroic Table of Contents
• Easy Table of Contents

Most of these plugins are great and very convenient, but they come with some downsides:

• Limited customization – Many free TOC plugins don’t allow full design control unless you pay.
• Extra load on the site – Every additional plugin increases website bloat and can slow down performance.
• Possible compatibility issues – Some TOC plugins may not work well with certain themes or page builders.

What I Wanted to Achieve: A Fully Functional TOC Without a Plugin

In my case, I needed a TOC that’s totally customizable, super lightweight, and of course, free too. I wanted to create a one-size-fits-all plugin without extra junk that I can fine-tune to suit my needs.

So, instead of sticking with traditional plugins, I decided to ask ChatGPT to “code” a one-size-fits-all, free plugin for me. This approach gave me complete control over the TOC’s design, functionality, and behavior while keeping my WordPress site lightweight and optimized.

This article is a messy journal of what I did, covering the ChatGPT prompt I fed it, the code it spat out, and the hurdles I hit while trying to get the plugin to work with my current WordPress theme.

How to Code a Table of Contents (TOC) that Works on Any Website?

As explained, my goal was to create a Table of Contents that behaves like a premium TOC plugin. So, I started by listing the main functionalities I wanted this “plugin” to have and how I wanted it to behave.

Here’s what I wanted the “plugin” to do:

✔ Automatically extracts H2 headings from a blog post.
✔ Generates a clickable TOC that smoothly scrolls to each section.
✔ Displays in a floating sidebar that stays visible while scrolling.
✔ Highlights the active heading dynamically as the user scrolls.
✔ Uses my site’s font and styles (Karla font, 17px size, color #178E79).
✔ Remains sticky in the sidebar until the user reaches the bottom of the article.

So instead of relying on a plugin, I asked ChatGPT to write the code for me.

The Exact Prompt I Used to Get ChatGPT’s Help

Below, I’m sharing the exact prompt I used to get ChatGPT to write the initial code. If my prompt doesn’t fit your exact needs, you can easily adjust it to kick things off:

Write an HTML code snippet for a Table of Contents (TOC) that I will place in the sidebar on my WordPress blog. Your code should automatically extract H2 headings from a blog post and display them in the sidebar dynamically.

The TOC should always stay floating (sticky) in the sidebar until the user scrolls to the end of the blog post container.

The TOC should:
- Select all H2 headings in the article.
- Generate a clickable TOC that scrolls smoothly to each section.
- Display in a floating sidebar that always stays visible until the end of the article.
- Highlight the TOC link corresponding to the active H2 (bold and underlined).
- Update dynamically as the user scrolls.

**Design Requirements:**
- No background color (to integrate with the sidebar).
- Font: Karla, Size: 17px, Weight: 300, Color: #178E79.

Of course, the design requirements I specified at the end of the prompt are strictly individual and based on my WordPress theme and typography. You’ll need to adapt those to your website design:

• Background color: specify the exact color you want (or no background color),
• Font: Karla, Size: 17px, Weight: 300,
• Font color: #178E79 (again, specify the exact color you want).

ChatGPT’s Initial Code for the TOC

ChatGPT then generated the following mix of HTML, CSS, and JavaScript to create the TOC:

<style>
  #toc-container {
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: #178E79;
    position: sticky;
    top: 20px;
    max-height: 80vh;
    overflow-y: auto;
  }

  #toc-container a {
    display: block;
    text-decoration: none;
    color: #178E79;
    padding: 5px 0;
  }

  #toc-container a:hover,
  #toc-container a.active {
    font-weight: bold;
    text-decoration: underline;
  }
</style>

<div id="toc-container">
  <strong>Table of Contents</strong>
  <nav id="toc"></nav>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const article = document.querySelector("article");
  const tocContainer = document.getElementById("toc");

  if (!article || !tocContainer) return;

  const headings = article.querySelectorAll("h2");
  if (!headings.length) return;

  let tocList = document.createElement("ul");

  headings.forEach((heading, index) => {
    const id = "section-" + (index + 1);
    heading.id = id;

    let listItem = document.createElement("li");
    let link = document.createElement("a");
    link.href = "#" + id;
    link.textContent = heading.textContent;
    link.addEventListener("click", function(event) {
      event.preventDefault();
      document.getElementById(id).scrollIntoView({ behavior: "smooth" });
    });

    listItem.appendChild(link);
    tocList.appendChild(listItem);
  });

  tocContainer.appendChild(tocList);
});
</script>

How I Integrated the TOC Into WordPress

The next step was to test the code. As explained in my prompt, I wanted to add the TOC to the sidebar.

Here’s how to add a custom code to the sidebar of your WordPress website:

1. Go to WordPress Dashboard → Appearance → Widgets
2. Find your Main Sidebar Widget
3. Add a “Custom HTML” widget to the sidebar
4. Paste the entire code that ChatGPT provided, exactly as it is
5. Save and refresh.

The TOC should appear in your sidebar! In my case, it was fully functional from the beginning!

The Challenges I Faced in Making the TOC Sticky

As with most DIY solutions, things didn’t go perfectly on the first try. While the core functionality of the Table of Contents was working – the code was pulling the headings, generating links, and scrolling smoothly – the biggest challenge turned out to be making the TOC “sticky” within the WordPress sidebar.

At first, I assumed it would be a simple matter of adding position: sticky in the CSS and setting a top margin. However, things quickly became more complicated. The TOC didn’t stay fixed in place while scrolling. It would scroll away just like a normal sidebar block of content, completely ignoring the sticky rules.

After digging into the structure of my WordPress theme (Astra), I realized the problem might be rooted in how the theme handles sidebars and widget containers. Some parent containers were likely preventing position: sticky from working due to properties like overflow: hidden or unset heights.

I consulted ChatGPT several times throughout this process, and it suggested a few different workarounds to help troubleshoot the issue. Of course, I explored each option:

1. First, I tried adjusting the CSS to ensure the parent container had overflow: visible and position: relative, which is often required for sticky positioning to work.
2. When that didn’t work, I tried position: fixed to manually pin the widget to the viewport. That partially worked but introduced layout problems, like overlapping the main content.
3. ChatGPT also proposed using JavaScript to detect scroll position and adjust the TOC’s placement dynamically. This was probably a workable solution, but my too complex to put on place (for my limited JavaScript knowledge).
4. Finally, the only easy workaround ended up being making the entire sidebar sticky rather than just the TOC widget. This way, all widgets remained in view as the user scrolled, which ultimately achieved the user experience I was aiming for.

Even though perfection wasn’t reached, the sticky sidebar solution did the trick for me.

Final Thoughts: Why This No-Plugin TOC Rocks

In my case, using ChatGPT to craft my own TOC instead of relying on a third-party plugin turned out to be a good solution. In less than 2 hours, I managed to:

• Create a 100% free TOC without premium plugin restrictions,
• Customize the design and functionality exactly how I wanted,
• Keep my WordPress site lightweight and fast.

If you’re looking for a custom Table of Contents that works seamlessly with your blog, I highly recommend trying this ChatGPT approach instead of installing another plugin!

Have you tried it yourself? I’d love to hear how it worked for you, or what tweaks you made. Feel free to share your experience or questions in the comments below!

P.S. I might’ve overexplained a bit here, but hey – sometimes that’s how you learn!