Do you want to add a table of contents to the WordPress website? Adding a table of content to an article makes it easier for the user to scroll up and down to the content in which they are most interested. In this article, I am going to help you understand how to add links to the table of content while you write in an article. I will discuss in detail about the manual method as well as plugins that can help you add the table of content.

Although lengthy articles are informative, many times they may not be able to inculcate interest among the readers as they may not be able to find what they are looking for. For a fact, 70% of users look at lists with bullet points and 88% of users won’t return to a website if they have a bad experience.  You can surely avoid such inconvenience by adding a table of content to the articles.

Typically, the table of content mentions the main highlights of an article. It allows the reader to jump to the most relevant section or of their interest. Moreover, the table of content allows the readers as well as the bots to easily crawl each section of an article.

So, are you wondering how to add a table of contents to an article on your wordpress website? Here I will mention two ways that can help you with the same – manual method and through plugins.

 

How to Add Table of Contents to WordPress using the Manual Method?

In the manual method, we are going to discuss two ways as many of us have shifted from the ‘Classic Editor’ to ‘Gutenberg Editor’ so we are going to create a table of content for both the editors.

 

1. For Classic Editor: Manual Method

If you do not know how to link a table of content using the classic editor on WordPress then do not worry as it is very easy. Even if you do not have basic HTML knowledge you can do so in just a few simple steps. But how do you link from one point of the page to another when the URL is the same? The easiest way is to add referential links. You write an article with headings and subheadings and each creates an anchor link that directs the users to the specific part of the page.

In such a case you need to put a flag on the destination point. For instance, if I want to add an anchor link to my first sub-heading that is ‘For Classic Editor Manual Method – it can be written as “for_classic_editor_manual_method” or “classic_editor_manual_method”.

Now to add this flag to the subheading you need to enclose the subhead with an id tag. This means that you need to add <a> tag, which means <a href> for link reference. So, for the aforementioned referential link it will be

Thus, the entire subhead will look something like this:

<a id=”classic_editor_manual_method”>.
 <h2><a id=”classic_editor_manual_method”>Classic Editor Manual Method</a><h2>

Now, to direct the reader to the relevant information or the anchor linked heading under the bullet point you need to add a more traditional link with the href tag. So, in this case, you will not be using the URL instead you will use an id preceded by a hashtag symbol. Then, this would look like this:

 <a href=”#classic_editor_manual_method”> Classic Editor Manual Method</a>

You need to follow the same method for each subheading that you have mentioned under the Table of Content. Following the aforementioned steps will add an anchor link to the table of content and direct the reader to the information source. Additionally, if you wish to add special formatting, you need to learn about CSS attributes.

 

2. For Gutenberg Editor: Using Blocks

Blocks are a part of Gutenberg editor which is a new addition for WordPress users. Although many people do not like blocks that much I find them quite interesting. In fact, the best part about the Gutenberg editor is that it allows the users to create plugins using the new blocks. The new blocks can be directly merged into the editor and the block library, and work amazingly well with the plugin. So, here are the steps that can help you create a table of content for Gutenberg Editor:

Create a List of Block

  • First of all, click on the plus icon on the left corner and search for a ‘list’.
  • Then, choose the ‘list block icon’ to add a list block in your post. This section will have your table of content.
  • You need to link the sub-heading in the content but as of now, there are no subheading so you need to create one.

Create Sub-Headings

  • On the top-left corner click on the + icon for creating the sub-heading. Now, search for ‘heading’.
  • Now, you will see a block where you can add your heading by typing. By default the heading is H2.
  • So, you need to type the first sub-heading in the block that you just created.
  • For instance, my sub-heading will be ‘create a list of blocks’.
  • Now, we have a sub-heading that we can link to our ‘table of content’. But we still need to add a ‘destination link’. For this, you need to open the ‘advanced’ menu from the drop-down menu section on the right.

Generate an Anchor Link

  • Now, in the HTML anchor text box add a few words from the sub-heading. For instance, I can write ‘ list blocks

Add Table of Contents to WordPress

  • Now, that you have got a heading in the post that can be linked. The next step is to return to the list of the block that we have created previously and type the fits thing on the list. You can either write the sub-heading or something else as well.
  • For instance, the first heading was “For Classic Editor Method”. So I typed it as the first item on my table of the content list.
  • Then, click on the toolbar to open the link icon. Now, in the box that opens up, type ‘#’ followed by the ‘HTML anchor’ box. Lastly, choose the ‘apply’ option.
  • This will link the table of content list items. So, when a reader lands on your website they can simply click on the list and jump top the related information.

Finally, Add More Table of Content

  • Similarly, you can add more table of content to the list. For this, you need to press enter at the end of each item and then follow the similar steps as mentioned above. Briefly, you need to create sub-headings, add anchor links, then add destination link to the list on the table of contents.

 

How to Add a Table of Contents to WordPress Using Plugins?

Here I will discussed in detail free and paid plugins that you can use to add anchor links to the list of the table of content on WordPress. So, here is what you need to do.

1. Heroic Table of Content

Heroic Table of Content

Heroic Table of Contents plugin is an easy way of adding automatically generated tables of content to your site for free. Heroic table of content deeply scans the content in which you have already listed H1, H2, H3, H4 and so on tags. If you do not want a particular class then you can even hide it.

It is a great option because you do not have to manually create the table of the content nor do you need to change it every time you edit an article. Also, this plugin is built as a WordPress block, the drag and drop feature is very smooth.

2. Fixed TOC – Add Table of Contents to WordPress Site

Fixed Toc

If you want to add an anchor link to the list of tables of content then you can do so by using the Fixed TOC plugin. The plugin automatically scans the list of subheadings in content and creates a table of content for the particular blog.

Fixed TOC is a premium plugin that comes with amazing add-ons like a meta box for every page, 50 animated effects, easy customization and much more. Moreover, this plugin is compatible with all browsers and of course with WordPress. Additionally, this plugin is translation ready which means that you can translate the table of content to whichever language you want. This plugin ensures that users can find a piece of information without any hassle.

3. East Table of Contents

Easy Table of Contents

Easy Table of Contents is a superb plugin for beginners who is on a tight budget. The plugin automatically creates a table of content for your article, different pages, and more. You can also select when and where you want to add a table of content in your content.

Additionally, you also get various options to customize the table of content and control how it is shown which includes better controlling and multiple bullets. Besides, you can also hide a table of content from specific posts.

5. Ultimate Blocks

Ultimate Blocks

Ultimate blocks is a great Gutenberg plugin with 15+ blocks. The plugin helps in adding a table of content to your article in just a few minutes.

With this plugin, you do not have to customize additional settings. All you need to do is add a ‘table of content’ block and it will add a table of content automatically for the heading.
 

FAQs

Q. How do I add a Table of Contents in WordPress?

You can use anchor links or list blocks to create a table of content in WordPress. The anchor links help you jump from one content to another.

Q. How can I add HTML anchor links in WordPress?

You can use anchor link text to add anchor links on WordPress. You will then have to link the anchor text with the link button.

Q. Are there any plugins to add tables of content to a WordPress site?

Yes, you can use plugins like Heroic Tables, Easy Table of Contents and even more.

Q. Does Google show jump links in the search results?

Yes, Google shows jump links in the search results. By all means, you need to either use anchor links or blocks for the same. Well, you can create a table of content on a site by using plugins as well.

Q. Will using the plugin for a table of content make my site prone to threats?

In most cases No, but the answer does not hold the same always. Most of the time, it depends upon the coding. However, to avoid vulnerability it is always better to add a table of content using manual methods.

Q. Why Do You Need to Include a Table of Content in Your Article?

In the first place, adding a table of content to a blog post may seem quite overwhelming. However, it does improve the user experience and is also SEO-friendly. More readers engage on your site as they can find answers to the questions easily. The table of content allows the readers to jump easily to the specific part of the content which is more relevant to them.

Wrapping Up: Add Table of Contents to WordPress Site

Here I have discussed in detail the manual method for the classic editor and Gutenberg editor as well. Moreover, I have also listed the top 6 plugins that can help you with adding a table of contents section to your site.

Adding a table of content in an article does provide a better user experience. It gets easiest for the user to search for stuff they are looking at in an article with the Table of Content section. Consequently, the readers engage more in the post and it improves the traffic. However, in the case of longer posts or articles, it can be a bit time consuming, that is why rather than using the manual method, plugins are more convenient and saves a lot of time.

If you have any query or doubt, feel free to leave a comment below. Recommendation and suggestions are also welcome in the comment section.