Add a Table of Contents to a WordPress Post

I decided to add a table of contents to some of the longer articles on the Naturespirit Herbs blog. Since the site is not live (as of this article 1/7/19), I don’t know what difference if any the table of contents will make as far as UX. That said, given that some of these articles are quite long, it *feels* like a good idea.

Here’s how I did it:

1. Install Easy Table of Contents

Easy Table of Contents

This plugin is easy to set up and has a number of options, both for styling and for how the table of contents themselves are organized. There are global options and options for individual TOCs on specific posts.

I didn’t want to add a TOC to every post (some are too short) so I activated it only on certain posts. This is easily done from a post edit page.

Easy Table of Contents settings on individual WordPress Posts

2. Add the TOC to the Sidebar

My goal was to create a “sticky” TOC that would follow the reader down the sidebar as he or she scrolls.

The above plugin does allow you to create a TOC widget that you can then place in a sidebar, but I found the styling wonky, so I opted for another solution. It may work for you though, so give it a try before you do the next thing.

2B. Install Shortcode for Table of Contents

Shortcode Table of Contents

This plugin is simple, but you need to do a bit of css detective work to determine the name of container of your content.

I’m using Elementor on the Naturespirit Site, so my shortcode looked like this:

[toc content=”.elementor-column-wrap elementor-element-populated” headers=”h2,h3″]

With Elementor, I created a shortcode widget with the above shortcode and placed this widget in the sidebar.

Wordpress Table of Contents 2
In Elementor, the custom shortcode is entered on the left and the “widget” is placed in the sidebar on the right.

For a typical wordpress install you would go to Appearance>Widgets, then drag the Table of Contents widget over to the appropriate sidebar.

Wordpress Table of Contents 3
In Appearance>Widgets

3. Make it Sticky

In Elementor, go to the Advanced tab (still editing your shortcode widget) and adjust the settings under “Scrolling Effect” to make the TOC sticky.

Wordpress Table of Contents 4

For standard WordPress set-up try these options:

1.  Enable the “Widget Affix Selector” at the bottom of the global Easy Table of Contents settings ( Settings>Table of Contents>Widget Affix Selector)

Wordpress Table of Contents 5

Or 2. Install WP Sticky Sidebar plugin and target the sidebar you want make sticky.

Hope this helps. Drop me a line if you have any questions.

About The Author

Matt Stern is fascinated with design and created this site to practice, contribute and share. He also runs The Tool Merchants and helps manage the web presence of Naturespirit Herbs. When he’s not online, he’s probably in his garden or playing with his kids.

You Might Also Enjoy

Why and How This Site was Built

Take a peak behind the curtain and learn the why and how this site was built. I’ll share some of the thoughts behind my decisions and a bit about the technical details of the site.

Read More »