How to Create a Table of Contents in WordPress without a plugin (Fast!)

by Nikita Shevchenko

Ever wondered how to create a table of contents in WordPress without using any plugin?

This post will show you exactly how to do it.

In fact, you will learn how to do it with Gutenberg and Classic WordPress Editor that many webmasters still use.

Let’s jump right in!



So how do you create a table of contents on WordPress without any plugin ?

In order to create a table of contents in WordPress without using any plugins, you need to create a list of simple anchor links. They are jump links that will instantly get you to certain places on the webpage (usually blog post subheadings).

Now let me show the exact process, step by step.

How to Add a Table of Contents to WordPress Gutenberg

Since WordPress Gutenberg was launched, it became much easier for bloggers to create visually appealing content on their websites.

I am using Gutenberg on this website so let me show you how to add a simple table of contents to it first.

1Create a list of all major article sections.
How To Create A Table Of Contents In WordPress

Include all the major subheadings you want your blog visitors to have a quick access to.

2Create the subheadings by using H2 tags.
wp subheading creation How To Create A Table Of Contents In WordPress
3Add HTML anchor text.

Copy a subheading text and paste it into the HTML anchor section you can see in the Advanced dropdown menu.

sunheading html anchor How To Create A Table Of Contents In WordPress
4Create a jump link.

Now copy the text inside the HTML anchor section (the words must be separated by hyphens).

Go back to the list of all article sections and create a link for the first section on the list by placing the copied text from the HTML anchor section.

Note: You must include a # sign at the very beginning. The first jump link is finished!

creating jumplinks in wordpress How To Create A Table Of Contents In WordPress
5Test and repeat

If you have followed the previous 4 steps, your first jump link should work properly.

But nevertheless, I suggest to test it and see if everything works well.

Now, repeat the process for the other sections on your list and you will have a nice table of contents.

wordpress toc proper work 1 How To Create A Table Of Contents In WordPress

The next part of this article describes how to create a table of contents to your article by using classic WordPress editor.

How to Add a Table of Contents to Classic WordPress Editor

If you are one of those guys who prefers the old school way, this part of the article is just for you.

Let me explain how you add a simple TOC to your article with WP classic editor.

The first 2 steps will be the same as with WP Gutenberg:

1Create a list of all main article sections.
wp classic editor list creation How To Create A Table Of Contents In WordPress

Include all the main subheadings you want your blog visitors to have a quick access to.

2Create the subheadings by using H2 tags
wp classic editor subheading creation How To Create A Table Of Contents In WordPress

It is after step 2 when the different approach begins.

3Create an anchor link

In order to that, you need to highlight the text and click on the Insert Link button at the right top part of your editor.

Then, add the anchor keywords with the # sign. The keyword must be separated by hyphens.

wp classic editor jump link creation How To Create A Table Of Contents In WordPress
4Add the ID Attribute

This step is arguably the most difficult. You will need to add the ID Attribute to the Linked Section in your article.

If you want to achieve that, you need to switch to the Text mode, scroll down the page, find the section you want to link to, and add an ID attribute to it.

Here is how the ID attribute might look:

<h2 id="Subheading-1">

And this is what the entire step looks like:

Wordpress classic editor adding ID attribute How To Create A Table Of Contents In WordPress
5Test and repeat

If you have followed the previous 4 steps, your first jump link should work properly.

But nevertheless, I suggest to test it and see if everything works well.

Repeat the process for the rest of the subheadings.

You will then have a properly working table of contents.

wp toc works properly How To Create A Table Of Contents In WordPress

Now, when you now exactly how to create a table of contents in your WordPress website without using a plugin, let’s find out whether you really need to do it.

In the chapter below, I outlines the pros and cons of using a table of contents in your blog posts.

The Main Advantages and Disadvantages of the TOC?

The main purpose of table of contents is usually providing users an overview of the content and links to the specific sections of the page.

In other words, it allows users to scroll down the page way easier and find anything they want to in a matter of seconds.

That said, you have to think twice before deciding whether you want to place the TOC in the article or leave it for the next time.

Below are the main reasons why you should (shouldn’t) considering using the TOC on our website.

Why You Should Use TOC

  • It is time-saving. One of the biggest advantages of anchor links is creating a better user experience when reading your blog posts. If you tend to produce long-forms of content it is generally better to provide your blog readers with jump links that will lead them to the article section that features the most relevant information they are looking for.
  • Better SEO Impact and Higher CTR. Jumps links, if used properly, can help your article title and meta description get complimented by sweet links in the search engine results pages. They will help your article stand out and bring more traffic to your website.
  • More opportunities for link sharing. Sometimes it is really handy to provide a specific link that features the exact part of your blog post. The user (or customer) doesn’t necessarily need to read the whole article to find out about a quick new tip on a given topic.

Why You Should Not Use TOC

  • TOC can potentially harm your SEO. Time spent on the page plays a significant role in SEO. It is also one of the main things we consider when working with On-Page SEO signals. However, if you provide users with a bunch of jump links that will instantly take them anywhere they need to, it may decrease the dwell time on the page dramatically. In other words, it takes more time for people to find the answer by scrolling down the page rather than clicking on one of the links in your TOC. So consider this fact, before placing it in your articles.
  • TOC can slash your ad revenue. Decreased time spent on the page naturally leads to a small number of impressions. And, as you probably know, impressions are huge for bloggers who rely on CPM revenue. Therefore, it would be great if you test things up and see whether TOC impacts your income significantly.
  • You can mess up with technical SEO. You might have heard that technical SEO can make it or break it for your website. Let’s imagine for a second that one day you decide to implement a couple of 301 redirects on your website. The thing is, your jump links in the table of contents will stop working properly. Also, pretty much the same thing can happen if you are to switch domain names and do a couple of other things that relate to the server. Consider this before adding another TOC to your blog post.

Conclusion

Adding a table of contents to your articles is a pretty simple step that can be done even by novice bloggers and WordPress users.

It is also significantly easier to do if you work with WordPress Gutenberg.

The table of contents has lots of benefits in terms of SEO and user experience. However, it can also have a few negative effects on your ad revenue and customer acquisition.

You should consider a few factors that I have mentioned in the last section of this guide before deciding whether you really want to add TOC to your website content.

Either way, I hope this article was helpful and now you know exactly how to create a table of contents in WordPress.

Let me ask you a quick question:


Will you add TOC to your future blog posts?

Leave your thoughts and questions in the comment section below.

Also, add me on LinkedIn or follow me on Instagram, I share some useful stuff there πŸ˜‰

What To Do Next?

Do you want to receive Exclusive SEO Tips that will help your website rank high on Google?

It’s free. No spam ever. Interested?

Just enter your email address below and click β€œI am in!”

Leave a Comment