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
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.
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
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.
For a typical wordpress install you would go to Appearance>Widgets, then drag the Table of Contents widget over to the appropriate sidebar.
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.
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)
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.