Have you ever stopped reading an article because it was too long, you got bored, or you couldn't find the section you really wanted to read? This might not have happened if the author had added a table of contents.

A table of contents highlights the critical sections of an article in order to improve the reader experience. A reader might jump to the section that is most relevant to their question. Or they might read the entire article — just in the order that they want, instead of the way the author laid it out on the page.

A table of contents can help search engine bots as well as humans. By clearly labelling the important section names of an article, bots can understand what the article is about and display rich snippets in the search results.

Now that we've discussed the benefits of adding a table of contents to your WordPress website, let's look at how. First, we'll briefly walk through how we can manually add a table of contents. Then we'll look at how you can automatically with WordPress plugins.

Grow Your Business With HubSpot's Tools for WordPress Websites

How to Create a Table of Contents in WordPress Manually

You can manually add a table of contents to your WordPress posts or pages with a little bit of code. Let's walk through the process below.

First, go to the post or page you want to add the table of contents to. Click into the first heading block. Then click the More Options button from the toolbar and select Edit as HTML.

Click Edit as HTML in WordPress editor-1

Add a unique ID name to the opening tag of the heading. For this demo, I'll use the ID names "anchor-1," "anchor-2," "anchor-3," and "anchor-4."

Adding id name to heading in HTML in WordPRess post

Repeat for the rest of the headings on the page (or only the ones you want to include in the table of contents.)

Adding ID names to all headings in WordPress postNext, click the Add Block button in the top toolbar.

Add Block button in WordPress Gutenberg editorThen click the Custom HTML block.

Custom HTML block in Gutenberg editorCopy and paste the following HTML into the block:



   <div class="toc">

<p>Table of contents</p>


<li><a href="#anchor-1">Section 1</a></li>

<li><a href="#anchor-2">Section 2 </a></li>

<li><a href="#anchor-3">Section 3 </a></li>

<li><a href="#anchor-4">Section 4 </a></li>



This will create an ordered list of jump links. Jump links are a specific type of hyperlink that readers can click on to "jump" to different sections on the same page. To create the jump links for this demo, I simply filled in the href attribute with a hashtag and the id name of the headings I wrote in the previous step.

Here's how this table of contents would look and function on the front-end of my WordPress site:

Table of contents demo

While this process only takes a few steps, it does require some knowledge of HTML and CSS. If you're not familiar or comfortable with coding, then you can use a plugin to add a ToC to your WordPress posts and pages. Below we'll check out the best table of contents plugins that don't require any coding.

How to Create a Table of Contents with a Plugin

Creating a table of contents with a plugin is simple. You simply install a ToC plugin and configure its settings. 

You'll start with general settings. Most plugins will allow you to pick what type of content should be supported, and whether you want a table of contents to be automatically inserted in every post, page, and other supported content type or whether you want to decide on a post-by-post basis.

Then you'll have some design options. How wide do you want the table to be? What font size? These are just a few options that will likely be included in the plugin's settings. 

Let's take a look at some of the best ToC plugins on the market. You can check out the documentation for whichever plugin you choose for more detailed instructions on how to use it. 

Best Table of Contents WordPress Plugins

Below are a range of free and premium plugins you can use to add tables of contents to your WordPress site, no matter what your budget is. 

1. Fixed TOC

Fixed TOC is a powerful and cleanly coded WordPress plugin that will make it easy to add a table of contents to your blog. This premium plugin can automatically scan headings throughout a post and create the table of contents, which is fixed in the page display.

Fixed TOC comes with more than 50 animated effects, a great meta box for each page, various customization options, and more. In addition to being compatible with the latest browsers and version of WordPress, this plugin is also translation-ready so you can localize your table of contents to any language you want.

By using this plugin, you can rest assured that your readers will find the content they want quickly and easily.

Fixed TOC plugin demo in sidebar

2. Heroic Table of Contents

Heroic Table of Contents is an easy way to add an automatically generated table of contents to your WordPress website site for free.

This plugin scans your articles and generates a table of contents that lists your articles headings (h1, h2, h3, etc). You can easily hide heading classes you don’t want. This means no more manually building your ToC, or having to update it when you change an article. Plus, because it’s built as a WordPress block, it’s easy to drag and drop a Heroic ToC into your content. 

Heroic ToC example in WordPress

3. Easy Table of Contents

Easy Table of Contents is perfect for newbie bloggers and site owners on a budget.

This free plugin automatically generates a table of contents for your posts, pages, and custom post types by parsing content for headers. You can choose where and when to insert your table of contents in your articles. You also get several options to configure your table of contents and control how it is displayed, including smooth controlling and multiple counter bullet formats. You can even choose to hide the table of contents from particular posts.

Easy table of contents plugin general settings apge

4. CM Table of Contents

CM Table of Contents is another free WordPress plugin that helps you generate a table of contents based on an HTML element's tag, class name, or ID.

All you have to do is fill this information in the plugin's settings page. While this will require you to name or recognize an HTML element's tag, it will allow you to create a multi-level table of contents made up of not just headings but any element you want. Want to include an image in your ToC? No problem! Just add its tag, class name, or ID in the settings and you're all set.

You can then place this ToC anywhere in a post or page using a shortcode. 

CM Table of Contents mutli-level demo

5. Ultimate Blocks

Ultimate Blocks is a powerful Gutenberg plugin that has more than 15 blocks. One enables you to add a table of contents to your WordPress posts or pages in no time.

With this block, there's no additional settings to configure. Just insert the "Table Of Contents" block and it will generate a ToC automatically from your headings.

Table of contents created with Ultimate Blocks

6. Thrive Architect

Thrive Architect is a feature-rich tool like Ultimate Blocks. It offers lots of functionality for extending your WordPress site, including the ability to automatically create a table of contents.

With Thrive's Table of Content element, you can select which headings you want generated in a table of contents so that every time a particular title appears, a table of contents will be automatically generated. You can also select a template for your ToC and customize it by choosing its layout, color, typography, border, shadow, and more. 

Thrive Artchiet table of content element demo

Improving the Reader Experience

You can add a table of contents to your WordPress posts and pages by following the step-by-step guide or Using any of the plugins above  makes it easier for your readers to navigate through your content and read exactly what they want to.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Sep 1, 2020 7:00:00 AM, updated November 05 2020


WordPress Website