How to add a Table of contents in WordPress using anchor links. (no Plugin required)

Are you concerned about your WordPress website’s speed performance 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 to 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).

What is a Table of Content?

A table of content (TOC) is basically a collection of jump links (anchor links) that 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 readers brief ideas about what is inside that web page. It also works 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 a 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 the first heading and click on the show more setting.

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

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.

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 add 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 a native Gutenberg editor then you can use some additional plugins for that.

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

• Fixed TOC (premium)
• Easy Table of Contents
• LuckyWP Table of Contents
• Ultimate Blocks
• Thrive Architect Table of Contents

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 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 doubts 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.

Check out the Tutorial on How to Add a manual Table of contents on the Blogger website.