How to Create a Table of Contents in WordPress on Gutenberg

Looking for an easy way to create a table of contents in WordPress? In this tutorial, we’ll show how to add a table of contents to WordPress sites. 

It’s no secret that website visitors have a really less attention span. If you cannot present your content well-organized, they might bounce out. 

A table of content can play a great role here. It offers a quick look at the page or post content. Then the visitor can navigate to the part they are most interested in. 

We know everyone has a unique taste. As a passionate WordPress user, you also want a solution that fits your needs. This is why we’ll show 3 methods to make a table of contents in WordPress. 

• Making a table of contents using a dedicated Gutenberg block
• Creating a table of contents using a plugin
• Adding a table of contents without any plugin or special block

No further ado, let’s get to work!

Creating a table of contents using a Gutenberg block

Being the default content editor in WordPress websites, Gutenberg (the block editor) has always been a priority since its beginning. That’s why we’re going to prefer the Gutenberg way of building a WordPress table of contents.

If you have experience with the block editor, you might have seen that there’s no default table of contents block in Gutenberg. So how do you do this?

Don’t worry. You can use a Gutenberg block plugin specialized for publishing beautiful posts and pages. We’re talking about PostX, the post grid Gutenberg block plugin.

PostX has a dedicated Table of Contents block that is an easy way to add a WordPress TOC. It’s your Gutenberg table of contents or TOC WordPress plugin that works with all post types. Just insert the Table of Contents block. The table will be automatically generated.

PostX can be used to create a full-fledged content or publishing site thanks to its excellent block collection. Please visit our PostX review to learn everything about PostX.

If you use a dedicated Table of Contents plugin instead of the PostX Table of Contents block, you’ll be missing out on a whole world of potentials to beautify your content site.

So, install and activate PostX on your site. Then on the post/page editing interface, insert the PostX Table of Contents block into your desired position.

The PostX TOC block will automatically recognize and fetch the section titles as the table headings. You can also determine the heading levels to consider in the table (h1, h2, h3, etc.). 

You don’t need to worry about anchor texts or jump links for the generated table of contents. This block will do that for you.

There are 7 table layouts given in the block. These offer a variety of table bullets and entry layouts. Pick a style from these.

Then you can also change the table colors, typography (e.g. font size, colors), and many other fine details.

Need something more convenient and professional? The Table of Contents block also comes with 8 beautiful predesigned tables of content.

If you have a PostX premium license, you can import these designs with a click. They are nicely crafted and created to save you a lot of time.

Creating a table of contents using a plugin

If you still use the WordPress classic editor, then you couldn’t enjoy the benefits of the awesome PostX blocks. Thus, you’ll need a different TOC maker. In this case, you can use a WordPress table of contents plugin.

The Easy Table of Contents plugin for WordPress can be a good choice for this.

After installing and activating the WordPress plugin, go to its Settings section from Dashboard > Settings. Define the TOC behavior and styling. Enable tables for your desired post types. The table of contents will automatically appear in your posts (selected types).

This plugin works for both the classic editor and Gutenberg. In fact, it doesn’t have anything to do with your editor. The table of contents will be generated automatically based on your settings and contents.

Adding a table of contents without any TOC plugin or special block

Wondering how to add a table of contents in WordPress without a plugin? If you don’t want to use any dedicated table of contents plugin or don’t have a specialized table of contents block, you can manually create a TOC. 

You’ll need to add HTML anchor links to the bullet points. Let’s discuss the Gutenberg way here.

First, add a heading for the TOC. It can be “Table of Contents”. Then create a bullet list of your section titles.

Now, let’s add the anchor links one by one. For this example, we’ll work with the item “What is a domain name”. Let’s scroll down to the content section for this item. Click the section title block.

From the block settings to the right, scroll down to the Advanced section. Expand it. You’ll find the Anchor field. Give it an anchor ID. Let’s call it “whatisdomain”. Copy this exact ID (whatisdomain).

Go to the table of content. Select the content item in the table. We need to add the section ID with a # sign in the beginning. So add #whatisdomain as a link to the target TOC item.

Then add different anchor IDs to the other section titles and link them to their respective TOC items. When visitors will click the TOC items, they will be taken to the respective parts of the page.

Wrapping up

A table of contents is helpful for both visitors and search engines. We’ve seen 3 ways to create a table of contents in this article. Using the PostX Table of Contents block is the most flexible way to make a TOC. And of course, you can choose the method that works best for your specific requirements. Cheers!