How to Add Table of contents WordPress without plugin Best 2020

The table of contents is the summary of any article that helps the visitors to find the specific purpose by one click. In this article, I will show you how to add a table of contents WordPress without plugin and make this a smooth scroll.

Suppose you wrote a very big article and this is about 20,000 words. So if any visitor wants to know a specific part of that topic, he cannot able to find out it easily if you don’t use the table of contents WordPress without plugin or with a plugin.

But if you use a table of contents WordPress without plugin to your website, You can be able to edit by your wish and any visitor can find out his necessary need easily.

You can easily add a table of content on the WordPress website with a plugin. But this method only helps you to add a TOC at the top of your post.

If you want to add a TOC in a specific place at the post where you want, today’s tutorial will help you well.

Why Use Table of Contents in WordPress without plugin

There are many reasons to use a table of contents WordPress without plugin but the main reason is for helping the users.

Sometimes, some of the users want to read a little part of your content quickly. Table of Contents helps the users to quickly reach the desired part of the contents.

Another reason is that Google shows jump to link in it’s result page so that visitors can click this link and directly go and read their desired part. Often, Google show multiple tables of contents in the Jump to link section of it’s SERP.

Ok, now let’s learn how to add it to your WordPress website-

Add a Custom Table of Contents in WordPress Without Plugin

Suppose, I am writing a big article and I have to add a table of contents in the middle of the post. So, if you add a table of contents WordPress without plugin, everyone can easily find the desired part.

Like that-

Ok, Now let’s create a table of contents WordPress without plugin step by step-

Step-1: Complete Your Article

First of all, You should complete your article using heading tag (h1,h2,h3 and etc.)

Step-2: Add HTML anchor on the Heading Tag

After completing writing article then click on any heading /subheading tag and go to Advanced from Block.

You will find a option named HTML anchor under Advance. There have to put an HTML anchor. You can put any text that’s you want but this text must be used without any space.

Or You can use hyphens to separate the word .

In my case, I will put custom-table-of-contents in the html anchor box.

Add HTML anchors to each heading tag of your content like that-👆👆👆

Note: Each Html anchor must be different.

Step-3: Create a step list of content

After creating HTML anchor text click on the block where you want to display your Table of content and insert a list block here.

after that create a list using header text of your content or anymore.

like this-

step-4: Insert links to each list of content

After creating HTML anchor and list the last thing you have to insert link to each sentence of that list.

For example, I have created an HTML anchor text in the previous example(custom-table-of-contents). I have to include this anchor with the hashtag(#) in the sentence of this list

1. copy the HTML anchor text
2. go back to the list and click on the sentence
3. select the whole sentence and click on the link icon
4. type a hashtag(#) and paste the HTML anchor text
5. press the Enter button from your keyboard

NOTE: hashtag (#) must be include at the first of anchor text

ALL DONE. This was an easy example of adding a table of contents WordPress without plugin

Your ToC is ready now. If you click on any sentence of this table of contents now you will directly go that specific part of the content.

let’s try- and see next to add smooth scroll to your ToC.

Table of Contents WordPress without plugin and Smooth Scroll

After creating a Table of Contents WordPress without plugin using this method, you can befall into a problem that is fast scrolling or no scrolling.

So, if you want to make scrolling smooth then follow this step-

1. Go to your Admin Dashboard of your WordPress website
2. Install a plugin
3. put the following code

So, In my case, I will switch back to my WordPress admin area and then I will go to Plugins and Add new Plugin.

Up here in the search bar I will search for simple custom css and js and select the first one.

Then I will click on Install and activate .

As I have activated the plugin I will see a option named Custom css and js

I have to click Add custom js from there.

Now I have to copy the following code-

<script>
jQuery($ => {
// The speed of the scroll in milliseconds
const speed = 1000;

$('a[href*="#"]')

.filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))
.unbind('click.smoothScroll')
.bind('click.smoothScroll', event => {
const targetId = event.currentTarget.getAttribute('href').split('#')[1];
const targetElement = document.getElementById(targetId);

if (targetElement) {

event.preventDefault();

$('html, body').animate({ scrollTop: $(targetElement).offset().top }, speed);
}
});
});
</script>

Okay! After copying this code I have to paste the code in the custom JS page and give a title of custom js and then I will click on Publish button.

That’s it. This will make your website content more interesting and user compatible. Now if you click on any item of the table of contents you will smoothly go down to the desired part as well.

That’s it for now and thanks for Reading. this easy method of adding table of contents WordPress without plugin and smooth scroll will hopefully help you.

Don’t forget to leave a comment was that article really helpful for you?