How to Create a Table of Contents in WordPress Without Plugins

Have you ever wanted to create table of contents in WordPress without plugins? If you are looking for a method, keep reading this article!

Having a table of content element in a blog post is so helpful. If you are writing a long blog post, the table of contents element will help the visitor to move to a specific part of the content.

By default, most SEO plugins like Rank Math and Yoast SEO come with an in-built TOC block. You can also find several dedicated TOC block plugins in the WordPress repository.

But what if you need to create a table of contents in WordPress without plugins?

That’s what we are going to learn.

This article will teach you everything you need to know about setting up a table of contents element on your WordPress website without using a single plugin.

Before going deep into the post, let’s see what is Table of Contents and why you should use it.

What Is the Table of Contents Element?

A table of contents (TOC) is a structured list of header titles that appear within a page or post.

In a WordPress site, it helps organize long-form blog posts, making it easier for website users to scan and jump directly to the sections they need.

By linking to H2 – H6 headers with HTML anchor tags or anchor links, a TOC improves user experience and reduces scrolling.

From an SEO perspective, adding a TOC can boost your chances of appearing in search engine results pages as rich snippets, ultimately improving click-through rate.

Many plugins like LuckyWP Table of Contents or Fixed TOC can automate this, but it is also possible to add a TOC manually with the Gutenberg editor or the Classic editor by using the List block, HTML anchor field, and some custom CSS.

Why You Should Use the Table of Contents Element in WordPress?

Adding a table of contents to your WordPress site is more than just a design choice, it plays a major role in improving both user experience and search engine optimization.

• Better navigation for readers – A TOC acts like jump links or bookmark links, allowing website users to quickly move through long blog posts. This reduces frustration and makes your content more engaging.
• Boosts SEO rankings – Search engines like Google can display TOC links directly in search results or the search engine results page, helping you capture more clicks. This improves your click-through rate and overall visibility.
• Improved content structure – By linking H2 – H6 headers with HTML anchor tags or the HTML anchor field, the TOC organizes your content into a hierarchical table of contents that is easier for readers and search engines to understand.
• Enhanced accessibility – A TOC provides a smooth way for users to browse your content. Features like Smooth Scroll or a sidebar widget make navigation even more convenient.
• Supports different post types – Whether you are creating tutorials, case studies, or a single case study page template, a TOC helps highlight important sections across different post types.

Adding a table of contents to your WordPress site is more than just a design choice, it plays a major role in improving both user experience and search engine optimization.

How to Add Table of Contents in WordPress without Plugins?

You can create a TOC box on your website in some simple steps. You do not even know how to code for this.

And the steps are:

• Finish writing your blog post
• Add heading and list blocks
• Add custom CSS class
• Add the TOC content
• Add HTML anchor text to headings
• Link list content via anchor texts
• Save and publish
• Adding extra CSS to style the block
• Check the result

Below, we will explain how these work so you can understand better.

1. Finish Your Blog Post

Before creating the TOC box, you need to finish writing the article. Structure it well so we can link to the subheadings inside.

2. Add a Heading and a List

Once you are done with the post, you need to add a heading (h2 preferred) and a list to the post. You can name the heading table of contents.

Now, select both blocks (using the shift key) and group them.

3. Add a Custom CSS Class for Styling

Now, select the group and give it a custom CSS class.

This will come in handy later for styling. You can also give the heading a custom CSS class.

Similarly, for the list block, give a class name.

4. Add the TOC Content

The next thing you need to do is add the TOC content. You can copy the heading titles and paste them into the bullet or numbered list.

5. Add Anchor Text to Headings

Now you need to go to individual headings and paste the anchor text. For example, if you have a heading called Frequently Asked Questions, the anchor text can be frequently-asked-questions.

Do this for all the headings you have.

6. Link List’s Content Via Anchor Text

Now come back to the list we created earlier. You have to link individual TOC contents to the headings via anchor text that we just created.

Make sure you’re using # before the anchor text so the links will work fine.

7. Save and Publish

Now you are done with the TOC box. You can save and publish the post. To test it, open the post on a new tab and click on any TOC item. It will send you to the specified heading.

8. Adding Extra CSS to Style

Remember, we added a custom CSS class to the group and heading? This is the time to use it.

Copy the code below and paste it inside the Additional CSS section (which can be found inside the Customizer).

.quadlayers-toc-block {
    background-color: #eef2f5;
    padding: 10px;
}

.quadlayers-toc-heading {
    font-weight: 900;
    font-size: 25px;
}

ul.quadlayers-toc-list {
    margin-top: -1em!important;
    margin-left: 0em!important;
}

.quadlayers-toc-list li {
    list-style-type: none;
    position: relative;
    margin-bottom: 5px;
}

.quadlayers-toc-list a {
    font-size: 20px;
    color: #525ef0;
    border-bottom: 2px solid #525ef0;
    text-decoration: none!important;
}

.quadlayers-toc-list a:hover {
    color: #585858;
    border-bottom: 2px solid #585858;
}

.quadlayers-toc-list li:before {
    content: "→";
    margin-right: 1em;
    color: #585858;
    left: -30px;
    position: absolute;
}

9. Check the Final Result

After publishing the CSS code, you can check the front end. You will see the live results.

So this is how you can create table of contents box in a WordPress website or WooCommerce store without any plugins.

If you are running a one-page website with limited content, this method is easy to implement.

On the other hand, if you are running a blog or publishing multiple posts, this would not be recommended. In that case, to save time and effort, you can use a dedicated plugin.

Frequently Asked Questions

Now, let’s see some of the frequently asked questions regarding this topic.

Conclusion

Creating a table of contents in WordPress without plugins may take a few extra manual steps, but it gives you complete control over the structure, design, and functionality of your blog posts.

By using the Gutenberg editor or even the Classic editor, you can add HTML anchor tags, build a List block with jump links, and style your TOC with custom CSS for better user experience.

This approach not only improves navigation for website users but also has positive SEO implications.

A well-structured hierarchical table of contents helps search engines like Google understand your content, which can lead to higher visibility on the search engine results page and even rich snippets.

Whether you’re working with long-form blog posts, case studies, or multimedia-rich articles, this method ensures your readers can quickly find the sections they need while boosting engagement and click-through rates from search results.

In the end, adding a table of contents manually without relying on external plugins gives you flexibility, better site performance, and stronger SEO rankings, all while making your WordPress site more user-friendly.

So what are you waiting for?

Create the TOC box right now for your WordPress website or WooCommerce store.