How to Generate a Table of Contents in WordPress

Earlier we had looked at how to jump down a page in WordPress by creating our own anchors. While it’s possible to do this manually, what if you require something like a “Table of Contents” – with each link pointing to a new paragraph or heading? Things would become tedious very quickly and the resulting formatting wouldn’t look great either. In this article, we’re going to take a look at the “Easy Table of Contents” plugin which is actually a fork of the original “Table of Contents Plus” on Github. I prefer it because it’s a bit more streamlined and because the customization is a tad easier. So let’s look at how it works.

Enabling TOC Support

After installing “Easy Table of Contents”, you need to enable TOC support in the settings. By default, only pages display table of contents. You can include posts by selecting the appropriate checkbox as shown here:

The next step is deciding whether or not you want it to be inserted automatically into your selected post types. It’s important to remember that this can be changed on an individual page or post basis. So you only need to select the general rule without worrying about specific exemptions.

If you’re wondering how the plug-in knows which items to place in a table of contents list, that’s easy – it parses your headings. For example, here is a test post I’ve written with dummy text containing several H2 headings selected from the drop-down list of the WordPress default editor:

In the “Easy Table of Contents” settings, you need to specify how many headings must be present in any given post for the TOC to be inserted automatically. Over here, I’ve changed it from the default “4”, to “2”.

If you want to insert a table of contents into a post or page that doesn’t have it automatically inserted via the settings, all you need to do is open the post in your WordPress editor and scroll down till you see the matter box related to the plug-in. Over here, there will be a checkbox called “Insert Table of Contents” which you can enable in order to force a display.

Putting all this together, here’s what the final table of contents looks like for my test post.

A few things to note. First, I have an unwanted “Related” title in my table of contents. This comes from the Jetpack plug-in which has created a list of related posts and used an H3 heading as the title like this:

Second, we have a button to minimize the table of contents on the top right-hand corner. To deal with the problem of unwanted headings, I scroll down to the “Advanced” section of the plug-in settings and locate the option called “Exclude Headings”.

This is a text box where I can specify headings that I don’t want Incorporated in my TOC. I can even use wildcards. As you can see above, I’ve added the word “Related”. I can add more phrases separated with a “|” character. You can see below that the heading no longer appears after I’ve saved my changes:

Finally, the appearance of the table of contents is completely customizable. You can choose from a number of preset themes or go with a custom option where you can individually select the color of the various components of the TOC as shown here:

Here’s an example of a customized TOC:

The “Easy Table of Contents” plugin also has a widget you can use to place in your sidebar. This will display the table of contents for the given post or page on the side – an interesting way to provide navigation within the article if that’s what you want.

Overall, a perfect addition for long articles and knowledgebases using WordPress as a CMS.