How To Add Table Of Contents In WordPress

A table of contents is a great way to make your posts easy to navigate for the readers and also has some SEO benefits.

When you add a table of contents to your articles, readers can go to the specific section of that article with just a click on a button.

And the best part is that you control where it should take the reader. And WordPress makes it very easy to implement this feature.

In this post, I will explain how to add a table of contents in WordPress and the best place to add it.

1. Install The Plugin

First, you need a plugin to do that and there are many great plugins for a table of contents. However, I like to use a special plugin that comes with other features too.

And that plugin is Spectra which is a Gutenberg block plugin and comes with various useful blocks you can use.

Not only you can have a table of contents but other blocks such as containers, forms, advanced headings, and more. And it’s very easy to use it.

So, go to the plugin repository, search for Spectra and install and activate it. Then under Settings, you will see a new option for Spectra from where you can change different settings.

spectra

You can activate or deactivate various blocks, change margins, and paddings, enable templates, load fonts locally, and much more.

But for now, we just need to add a table of content to our posts.

2. Choose The Place for TOC

Now, it’s time to choose where to display the table of content. On most websites, you will see that it is displayed inside the post, before the first paragraph, or somewhere at the top section of the article.

As you can see I use that method and works fine for me however you can display a table of contents in the sidebar because it has some benefits. For example, Ampizer uses this method and it looks very clean and convenient.

First, it looks much cleaner, and the reading experience is better. And secondly, it makes it easier for readers to navigate through posts.

You can add TOC as a last widget on the sidebar and make it sticky. So, readers always will see it and go to the desired section from anywhere.

The only downside is that it won’t be visible on mobile but on mobile, you can have a separate TOC in the post or just use the back-to-top button.

3. Add TOC In The Sidebar

To add a table of contents in the sidebar you need to go to the widgets area under the appearance and use the TOC block. And this method works with every WordPress theme.

In your desired sidebar add a new block from Spectra – table Of Contents and you will see some settings you can change on the right side. You can change general settings, styles, and some advanced ones. Make sure that it’s the last block on that sidebar.

First, choose which headings should act as an anchor. I recommend picking only H2 and H3 but do as you think is right.

Then you can change alignment, the number of columns, width, scroll behavior, and other settings. And in the style tab, you can change color, typography, and other style-related things.

Also, it allows you to hide your TOC on different devices which is a great option to have.

table of contents

And finally, make the last block sticky. If your theme doesn’t support a sticky option for the sidebar, you might need a custom script or use themes like Blocksy and Kadence that come with that feature.

Now if you go to one of your posts where this sidebar is displayed, you will see newly added TOC and if you scroll down, it will stick on the edge of the screen and always be visible.

Conclusion

As you can see adding the table of content to WordPress is a very easy thing to do. It makes it easy to navigate within the post which is very helpful for readers and creates a great user experience. There are other plugins that can do the job but this method is my favorite.

Leave a Reply