Add Table of Contents in WordPress

Do you concern about the speed performance of your WordPress website and want to remove some unnecessary plugins. Here, I will show you how you can use a Table of contents in WordPress without using any third-party plugins.

Here we will use the WordPress native HTML anchor feature to create the table of content in our blog post. we will also apply a smooth scroll effect in it using a small CSS code.

But, before proceeding further, let’s understand the basic concept behind it and how it helps in Search engine optimization (SEO).

Table of Content

What is a Table of Content?

Table of content (TOC) is basically a collection of jump links (anchor link) which allows users to jump to a specific section of a web page with a single click.

It is super helpful for long blog posts and pages and gives reader a brief ideas about what is inside that web page. It also work as a navigation menu within the same web page.

The table of content blocks also helps search engine bots to better understand the important aspect of the article and show them rich results in SERPs. (search engine result pages)

How to add a Table of content in WordPress?

You can add Table of content in WordPress using two methods. One is by installing a dedicated Table of content plugin or using page builders and the other method is by using the native HTML anchor feature of WordPress.

In the Plugin method, you can generate a Table of content in WordPress automatically but it can affect the speed of your website by adding additional network requests. It loads certain javascript and CSS files in the front end which we can eliminate in the manual method.

As you know site speed is now a ranking factor in Google and we have to optimize our website for core web vitals. So, we have to minimize the usage of plugins and use only the most required ones.

So, here we use the manual way to use the Table of content in WordPress but if you want to add automatic TOC then you can check here. (↤ Example of Anchor Link )

Follow the below steps to add a Table of content manually in WordPress.

Step-1: First of all write the complete blog post and copy and paste all headings that you want to include in TOC in a simple text paragraph.

Step-2: Now click on first heading and click on show more setting.

Expand More setting in WordPress

Step-3: Now in the right-hand setting tab click on advanced setting and here assign an anchor text (without space)

assign HTML anchor in WordPress

Step-4: Now assign anchor links to all headings in the same way.

Step-5: Now In the Table of content section add the anchor link to all plain heading text using the #anchortext (#section1) format.

add anchor links in heading for table of contents in WordPress

Now you have successfully added the Table of content to your WordPress website. Now if you want to apply a smooth scroll effect you can add a small CSS code to your theme.

Step-6: Go to Appearance > Customize > additional CSS and paste the below code and save it.

h2[id], h3[id] {
	scroll-margin-top: 50px;
}
html{
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion:reduce){
	html{
		scroll-behaviour: auto;
	}
}

After adding this code it will apply the smooth scrolling effects to the anchor links. Here the h2[id], h3[id] target the h2 and h3 tags and added a 50px top margin when scroll to the bottom.

you can adjust the margin according to your theme and you can set it to 100px if you are using some sticky navigation menu.

And the @media query code is added for those who opt-out of the smooth scroll effect in their browser using the accessibility feature.

This code works with all modern browsers and may not work in some old versions of the browser. But don’t worry it won’t break your site and skip the scroll effect in unsupported old browsers.

Add automatic Table of contents (using Plugin)

If you are using some sorts of page builders like Elementor, Kadence Blocks, etc then you can use the TOC widget to insert it in your blog post.

If you are using native Gutenberg editor then you can use some additional plugin for that.

Here are some of the best table of contents plugins in WordPress.

One major drawback of using a dedicated plugin for a Table of content is that it loads unnecessary CSS and JavaScript in the front end and slows down the loading speed.

That’s why you should use the WordPress native HTML anchor feature to generate your own custom Table of content. In fact we don’t need TOC in every post and it only necessary for long blog posts.

Conclusion

I hope this tutorial will help you create a clean and fast loading table of contents on your WordPress website. Adding a TOC is a good practice and it helps readers engage with your content.

Do you use a Table of content in your blog post or not? Let me know in the comment section.

If you have any doubt regarding WordPress you can ask me in the comment section or DM me on Twitter.

For more WordPress guides like this subscribe to my YouTube Channel Now.

Similar Posts

2 Comments

  1. Rohit Thakur says:

    I’ll go ahead and apply on my blog. Thanks for sharing a great piece of content.

  2. Dhruvir Zala says:

    This is awesome. This can help many remove a separate plugin and insert TOC manually.

    Thanks a ton, buddy 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *