How to add a table of contents to your WordPress posts

In this post, we will discuss how to automatically add the table of contents to your WordPress posts.

Why is the table of contents a necessary component for both the writer and the reader?

When I first started blogging, I would usually begin writing my articles by having an introduction section, then a few more sections related to the topic and finally, I would end it with a summary section. Each section would begin with a header element. Sometimes sections would have subsections in them, marked with an H3 or an H4 header.

 

My problems began when I started writing beefier articles, with 2000+ words. It was hard to keep track of the sections and to quickly navigate to a specific subtopic as there was no element on the page that would allow me to have an overview of what was written in the post. I would have to scroll through the whole post just to find something on it. It was like having to search for a chapter in the book, without having the index page at the start of the book!

 

Here came the table of contents to the rescue. Having a table of contents not only allows your readers to quickly navigate through your post, but would also give you an overview of what you wrote, making it easier to re-organize and improve your posts.

 

How to add the table of contents to your posts in WordPress?

 

If you are using WordPress, then you are in luck, as there are a ton of plugins that you can choose from in order to achieve your goals. Installing plugins should be a smooth and fast experience if you are using a reliable hosting provider such as our own’s FastComet WordPress Hosting (redirects to our affiliate link to fastcomet.com).

 

Our choice of plugins for this post is the “Easy Table of Contents” plugin. First, you will need to login into your WordPress admin page, and choosing to add a new plugin.

 

In the next step, you will need to search for the plugin by it’s name. Once you find the plugin, you should go ahead and install the plugin.

 

 

Once the plugin is installed, you can go ahead and activate it. By default, the table of contents plugin will be available to your posts. Now let us go to one of our posts to demonstrate how to insert the table. To do this, start editing one of your posts either via the classic editor or the block editor. You will find the table of contents settings for that post at the bottom of the editor.

 

In order to insert the table, make sure that the “Insert table of contents” option is selected.

 

The plugin will give you the option to choose which header elements in your page will be added to the table of contents. Note that the header elements will be added to the table in the same order as they appear in the post. Also note that automatically, the plugin will take the header hierarchy into consideration. For example, if your post looks as follows:

H2 – My first title

H3 – First subsection

H3 – Second subsection

H2 – My second title

Then your table of contents will look as follows:

• My first title
  • FIrst subsection
  • Second subsection
• My second title

 

Once you save your post, the plugin will automatically add the table of contents to your page.

 

It is important to note that by default, the plugin will add the table of contents to the top of your post, between the post’s featured image and its first header, just before the first header. This is favorable as it allows you to write an introduction before your table of contents appear.

 

 

In comparison, this is how the page looks like in the editor.

 

 

Options and customization

In this section, we will explore the different options that can be used to customize the behavior of the “Easy table of contents” plugin.

 

Auto Insert

In the plugin settings, you can choose to automatically enable the table of contents in your posts, pages, etc.. This will cause the “Insert table of contents” checkbox to be automatically selected in the editor.

This can be convenient when you are writing new posts. However, you will need to go to the editor for each of your old posts and update them in order to insert the table of contents there. The table will not be added automatically to existing posts.

 

Position

There are four different position settings to choose from. This will decide the place where the table of contents will be inserted. Let us check each of the positions.

Before first heading (default)

This is the default behavior that we discussed in our previous section. The table will be added just before the first heading in your page. Let us move on to the next one.

After first heading

This will cause the table to be added right after the first heading element in your page.

 

Top

This will insert the table of contents right at the top of your post, just after the post’s featured image.

 

Bottom

You can also choose to insert the table right at the bottom of your page, just before the author information.

 

My personal favorite is the default behavior, as it allows you to provide a short introduction to the reader, just before they can see an overview of your post contents.

 

Header label

You can also choose to call the table of contents something else. For example, if you are building a non-English language website. To change the title of the table of contents, you can do so through the “Header Label” option in the plugin’s settings page.

 

Appearance

You can also modify the appearance of the table. Elements such as the width, font size and colors are all customization through the plugin’s settings page. You will need to experiment with different colors and font sizes in order to find the best fit for your website.

Some say that the table of contents should have a different color from the rest of the page in order to stand out for the reader, while others say it would be better if it blends into the page. What is your opinion? Let us know in the comments below 😉

If you are curious to know how the different default themes look like on our website, then please check the screenshots below.

 

 

 

 

 

Other settings

The plugin provides a lot more customization possibilities. A few noteworthy examples are:

• You can use the Roman numbers instead of decimals inside the table of contents. You can configure this via the Counter setting.
• The plugin will automatically create a hierarchy, depending on the headers that you use. For example, H3 headers will be considered subsections of H2 headers. H4 headers will be considered subsections of H3 headers, and so on. You can turn off this behavior by toggling the Show as Hierarchy option.
• You can individually turn of the addition of specific headers in each post. For example, you can turn off the addition of H2 headers to the table of contents.
• If you would like to add a header with an alternate name, then you can use the Alternate Headings option in the post settings. For example, if you have a heading called “How to increase your focus”, and you want to add it to the table of contents as “How to have increased focus”, then you can add it to the alternate headings as follows:How to increase your focus|How to have increased focus

  Note that this is case sensitive, so make sure you get your capital and small letters correctly 😉

• You can use the Exclude Headings option in your post settings to exclude some headings from the table of contents.

 

Summary and conclusions

Overall, the “Easy Table of Contents” plugin is a nice, lightweight plugin that achieves its goals while making life as a blogger a bit easier.  I would like to personally thank the creators of the plugin for this nice piece of software.

If you are looking for a new WordPress hosting provider, or would like to explore different providers’ prices and offers, then I would recommend that you check out our website’s hosting provider FastComet (contains our affiliate link), as it may be a better fit for your website.

Thanks for reading and let us know if you have any questions or comments.