How To Add Table of Contents In WordPress (With/out Plugin)

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 a table of contents in WordPress with and without using a plugin.  

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 anchors to the headings. Just click on a heading and then click on the ‘Advanced‘ tab from the right-hand side 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 plugins 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 the ‘+‘ 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 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 a 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 generates the ToC from headers. This plugin is a fork of the 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 in different styles. You can customize the color and it works great on mobile devices.
  • LuckyWP Table of Contents: It’s another great plugin for adding a table of contents. It works with both Classic and Block editor. It offers a lot of customizations.
  • 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 generates the ToC. It comes up with 4 built-in styles.

Related Posts:


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.

Leave a Comment

Your email address will not be published.