How to Add a Table of Contents in WordPress (3 Ways)

If you publish long-form articles on your blog, you’ll want to provide a quick way for readers to navigate to different sections of the post. Creating a table of contents can help you achieve this, but you might not know how to get started. 

Fortunately, WordPress makes it easy to add tables of contents to your posts. For instance, you can use a dedicated plugin or create your tables manually in the Block Editor – no coding knowledge required!

In this post, we’ll take a closer look at tables of contents and discuss the benefits of using them in your posts. Then, we’ll show you three different ways to create them in WordPress. Let’s get started!

An Introduction to Tables of Contents in WordPress

A table of contents is a list of your post’s headings and subheadings. Each heading contains an anchor link that takes the reader to that section in the post.

For example, if a user wants to read about a particular topic in your article, they can simply click on the relevant heading in the table of contents:

This way, readers can jump to the sections they’re most interested in and skip the rest. They don’t need to scroll down the page and skim through the post to find what they’re looking for.

Plus, a table of contents gives users a quick overview of the article so they know what to expect. For example, if you’ve written a post about visiting London, readers can quickly see what’s included in the guide (e.g. where to stay, best restaurants, things to do, etc).

Therefore, a table of contents can help improve the User Experience (UX) and make your posts more readable. This may in turn help you rank higher for relevant search terms. 

How to Add a Table of Contents in WordPress (3 Ways)

As we have seen, using tables of contents in your posts can help improve your site’s performance. Fortunately, creating them is easier than you might think. Now let’s look at three simple ways to add a table of contents in WordPress!

1. Install a Table of Contents Plugin

Adding a table of contents plugin to your WordPress site can be a quick and easy way to make your content more navigable. While there are many options to choose from, we recommend Easy Table of Contents:

This plugin enables you to insert a table of contents into your posts, pages, and custom post types. Plus, it can automatically generate the tables for you!

Once you install the plugin on your site, navigate to Settings > Table of Contents in your WordPress dashboard. Under the General tab, you can select the type of content you want to create tables for:

You also have the option to automatically insert them into your posts and pages:

If you’d rather add them manually, you can copy the shortcode and embed it into your posts:

For example, you might only want to add a table of contents to specific posts. In this case, you’ll need to uncheck the boxes in the Auto Insert section and use the shortcode to add the table to your preferred content. 

In the Appearance section, you’ll find several customization options for your table of contents. You can change the font, select the link colors, and more:

Now, let’s see what the table of contents will look like to your readers. If you’ve selected the auto insert option for your posts, you can open a random article on the front end:

By default, the table of contents will appear below your title and introductory paragraph, and before the first H2 heading. However, you can change this in the plugin settings. 

This plugin is an ideal option if you want to automatically add a table of contents to all of your posts. However, if you only want to use the table on some of them, you may want to consider an alternative. 

2. Use Custom WordPress Blocks

You can also add a table of contents as a block. This way, you can insert it directly into your posts and customize it within the WordPress Block Editor.

At the time of writing, the Block Editor does not offer a table of contents block. However, you can use a plugin like Spectra to add this feature to your site: 

Spectra adds a selection of practical blocks to your site, including a table of contents option. Once you install the plugin, navigate to Settings > Spectra to view a complete list of added blocks. 

Make sure that the Table of Contents block is activated:

Then, you can open a post in the Block Editor and add the block anywhere you want on the page:

As with any block, you’ll get access to some customization settings. For example, you can choose the heading tags that you want to include in your table of contents:

To customize the appearance of your table, click on the Style tab. Here, you can change the typography and colors for the title, headings, and more:

Using a Table of Contents block can be a more efficient option if you want to apply the table to certain posts, rather than all of them. Additionally, you can save it as a reusable block, so you won’t have to re-apply the same customization settings every time you use the table in a post. 

However, you may choose to create custom tables for each post. For example, you might want to include all heading tags in some posts, but only display H2 and H3 headings in others. 

With the Easy Table of Contents plugin, you’ll have to use the same table for your posts. Therefore, you might prefer Spectra if you want more freedom over the design of your tables. 

3. Create Your Table Manually in the Block Editor

You may also choose to create your table of contents manually. Perhaps you want to avoid installing another plugin on your site as you only need to create a table for one or two posts.

While adding your table of contents manually can be a little tedious, the process is quite simple. First, you’ll want to add a List block to your post. Then, type in your headings and use the Indent option as needed:

Next, you’ll need to create anchor links. This way, when a user clicks on a heading in the table of contents, they’ll be taken to the relevant section.

To do this, select the Heading block. Then, navigate to the settings panel and click on the Advanced tab. In the HTML anchor field, enter a unique name for this heading, such as “heading1”:

Now, go back to the list, select the corresponding item, and click on the Link icon in the toolbar:

Next, you’ll need to type in the name that you entered in the HTML anchor field, adding a hashtag at the front. In our example, this will be “#heading1”:

Once you enter the anchor link, you’ll be able to click on that item to navigate to the corresponding section. You can repeat the same process for the other items in your list.

When you’re ready, you’ll want to test the anchor links on the front end to make sure they work: 

Remember to add a “Table of Contents” heading above the list. Additionally, you may want to group the heading and list blocks and customize them from the settings panel:

As you can see, you don’t need to install a plugin to create a table of contents. However, if you want to add tables to multiple posts, it may be more efficient than creating them manually.

Conclusion

Adding tables of contents to your posts can make it easier for readers to find what they’re looking for. This can help improve the user experience and reduce your bounce rate, which may in turn lead to better rankings in search results.

In this post, we looked at three ways to add a table of contents in WordPress:

1. Install a plugin like Easy Table of Contents.
2. Use a tool like Spectra to add a Table of Contents block to your site.
3. Create your table manually with the List block. 

Do you have any questions about adding a table of contents to WordPress? Let us know in the comments section below!