If you write longer blog posts and want to give your readers a structured way to navigate your pages and posts, the free Table of Contents Plus plugin is an elegant solution. 

It automatically generates a Table of Contents on your page from section headings, resembling very much the great collapsible Wikipedia style contents boxes shown below.

Adding a table of contents to your WordPress posts not only helps the reader see and navigate what's on your page, but it also helps Google generate structured links in search results.

ToC+ can also auto-generate visual sitemaps and indexes of your content, which I'll show in more detail later in this article.

Installing the Table of Contents Plus Plugin

From your WordPress Dashboard, visit the Plugins -> Add New menu item and search for Table of Contents Plus:

Click Install Now and Activate the plugin. Then, click the Settings link from the plugin menu or visit the Dashboard -> Settings -> ToC+.

Automatically Generating the Table of Contents

ToC+ has a variety of options and styles. I turn off auto-insertion (shown above) and include the [toc] shortcode on pages and posts which I want the Table of Contents to appear; otherwise, there would be a ToC on almost all my pages. 

Note: there is a way to limit this to pages with only more than n-headings.

Here's an example of an auto-generated Table of Contents on one of my longer tutorials.

There are a number of great features and settings for managing the appearance of your Table of Contents:

You can turn off the show/hide toggle. You can choose different styles. And, you can choose how deeply you want your headings indexed or exclude certain headings:

You can also auto-generate sitemaps such as shown below:

I use this feature to generate an alphabetical index for my site posts.

The developers have really done a great job with this plugin. 

Building a Multi-Page Table of Contents

One feature not supported natively in the ToC+ plugin can be fairly easily implemented manually, that of building a ToC for multi-page content. I write a lot of multi-page tutorials and wanted to the use the ToC styling to generate navigable Tables of Contents across pages - like this one.

I installed the ToC+ plugin so that it's stylesheets are loaded. However, I manually write the HTML code in WordPress for my multi-page Table of Contents:

<div id="toc_container" class="toc_wrap_right no_bullets %%visible%%">
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="/Welcome"><span class="toc_number toc_depth_1">1</span> Welcome</a></li>
<li><a href="/estimating-costs-wordpress-amazon-aws"><span class="toc_number toc_depth_1">2</span> Estimating Costs</a></li>
<li><a href="/sign-up-for-amazon-web-services-aws"><span class="toc_number toc_depth_1">3</span> Sign Up for Amazon Web Services</a></li>
<li><a href="/installing-wordpress-digital-ocean/"><span class="toc_number toc_depth_2">3.1</span> Sign Up to Install at Digital Ocean</a></li>
... 
</ul>
</div>

However, this block of code needs to be placed on all of my tutorial pages and it needs to be updated regularly when I add or change the tutorial. That can quickly turn into a lot of maintenance.

Instead of manually pasting the code on all my pages, I use the free Shortcoder plugin and place the [sc:my_toc] shortcode on each page. Then, I update my Table of Contents in the Shortcoder settings area and it will be automatically updated on all my pages. I don't have to manually edit the ToC on every page.

The result works very well albeit it only provides a subset of the feature set of the ToC+ plus plugin.

I hope you've benefited from this tutorial. Let me know if you have any questions or comments.