How To Add Table of Contents In WordPress

add table of contents

Did you ever stop reading a long post because you got bored or couldn’t find the section you wanted to read?

Well, this wouldn’t happen if the author had added a table of contents in the post. 

A table of contents highlights all the valuable headings of a post/page and lets readers jump to their point of interest.

If you don’t know how to add a table of content in WordPress, you’re in the right place. Here we will be sharing how to add table of contents in WordPress manually or automatically.  

Adding Table of Contents Without Using A Plugin

WordPress has introduced a new option called ‘HTML anchor‘ that lets you add anchor links in WordPress. By using this option, you can easily create a table of contents without using a plugin.

Let’s see how it works.

At first, we will be adding HTML anchor to the headings. Just click on a heading and then click on the ‘Advanced‘ tab from Block options. Then enter the anchor text on the ‘HTML anchor‘ box.

Do the same things for other heading as well.

Now let’s create a list of contents. You can use the ‘List’ block for creating the list.

Once your list of contents is ready, it’s time to add anchor links. Just select a text and link it with a # right before the anchor text.

Do the same thing for other lists and your table of contents is ready.

Adding Table of Contents Using A Plugin

It’s a bit time-consuming to add a table of contents manually. If you want an automatic approach, you can use a plugin.

There are several table of contents plugin available. We will be using the Ultimate Blocks plugin here. It’s a free Gutenberg blocks plugin that comes with a ‘Table of Contents‘ block.

Use the ‘Table of Contents’ block by Ultimate Blocks to add an auto-generated table of contents.

Once you’ve installed and activated the plugin, go to the post/page where you want to add a table of contents.

Then click on ‘+’ sign and search for ‘Table of Contents’. (You can also enter ‘/’ and start typing ‘Table… to find the block).

Now insert it in your post and it will automatically generate a table of contents from the headings.

Then you can use the toolbar to show ToC in two or there columns and to show the list in numbered or plain.

If you want to hide any heading from the table of the contents, press the don’t show button in the block placed next to a heading. 

There are other customizations available on the block set on the right sidebar. From there, you will be able to disable any specific header types and turn on any additional settings. 

So this is how you can add a table of contents in the WordPress block editor automatically.

Other ‘Table of Contents’ Plugins

If you’re using the Classic Editor or any of the page builders, you can consider using the following plugin.

  • Table of Contents Plus: By number, it’s the most popular ToC plugin. It lets you add Wikipedia-style table of contents to WordPress posts and pages. By using the shortcodes, you can insert ToC anywhere you want.
  • Easy Table of Contents: It’s an easy to use table of contents plugin that works with Classic Editor, Block Editor, Divi, Elementor, and other page builders. It automatically generate the ToC from headers. This plugin is a fork of Table of Contents Plus plugin.
  • Fixed TOC: It’s a premium table of contents plugin that lets you add fixed ToC in the sidebar. It comes with different styles. You can customize the colour and it works great on mobile devices.
  • LuckyWP Table of Contents: It’s another great plugin for adding table of contents. It works with both Classic and Block editor. It offers a lot of customisations.
  • Herioc Table of Contents: It’s comparatively a new plugin created by the folks at HeroThemes. The ‘Table of Contents’ block offered by the plugin automatically detects headings and generate the ToC. It comes up with 4 built-in styles.

Conclusion

Hope this post helped you to add the table of contents to your WordPress posts/pages.

If you’ve any questions regarding this, feel free to ask us via comment.

close

Easy WP Tweaks

10X Your Site Growth!

Join the growing library of Easy WP Tweaks to grow your WordPress site.

Leave a Comment

Copy link
Powered by Social Snap