Floating Table of Contents

I wanted to have a floating table of contents for my posts, but could not find any free plugin that allowed me to do so. Using a combination of plugins, I created a floating TOC myself, which is not perfect, but good enough.

The Goal and Approach

If you look on the right of my blog posts now, you’ll notice the second sidebar widget to be the Table of Contents, and if you scroll down a longer post, you’ll find that the TOC becomes “sticky”, i.e. is available regardless where you scroll to. There are plugins that do this out of the box, and potentially even better, but those are all premium plugins that cost money. I wanted to see how far I might get for free, and succeded in creating my own floating TOC with free plugins and a bit of CSS.

Easy Table of Contents Plugin

The TOC itself is created automatically using Easy Table of Contents. It is customizable to some degree, the user may hide it, and – most important – it can be a widget, e.g. in the sidebar. This was important, because I use the

Q2W3 Fixed Widget Plugin

to let the widget with the TOC become fixed – it can be found here. This plugin combination already worked well enough, with the only problem that the homepage also displayed a TOC, which made no sense, as it showed the TOC of the post last viewed. So I needed to hide the widget on the homepage, which can be done using the

Widget Logic Plugin

which is a plugin that influences the display of a widget using some WordPress functions and logical operators.

Putting Things Together

First step is to add the TOC widget to the sidebar, which can be done by the standard customization functions of WordPress. In the regarding dialog you can now set a tickmark Fixed widget that makes the plugin fixed, i.e. it gets sticky as soon as it reaches the top of the browser window when the user scrolls down the post. Where exactly it stops and sticks can be configured, but the default values are already matching my taste very well, so I kept them. In the widget logic field you put !is_home() which says: Only display the widget if the current page is not the homepage.

This is already very close to what I wanted, but since the widget looks exactly the same in style as other widgets in the sidebar, the display was confusing when the TOC floated above the other widgets. Also, in my theme (Amadeus), the other widet headings overlayed with the TOC, which looked ghastly. Last thing that I did not like: When the TOC is very long, it extends below the browser window bottom with no possibility to navigate there. All three issues can be addressed using just a bit of CSS. In the Additional CSS section of the customization page of WordPress, add

aside is the HTML tag of the sidebar widget, and ez-toc is the class of the Easy TOC plugin widget. The z-index puts the widget above the headings of other widgets, solving that problem. The box-shadow sets the TOC widget visibly apart from the other sidebar widgets. And the combination of max-height and overflow-y: auto causes the widet to not reach beyond the browser window bottom and display a scrollbar if needed. Now things look nice enough for my taste.

One thing remained: When reading a post on a mobile device, the sidebar is no longer a sidebar, but is just below the post. There of course a floating TOC does not make sense. Fortunately, you can define that the widget only floats if the browser window exceeds a given width. This was a bit of trial and error, rezising my browser window carefully until the sidebar jumped, and adjusting the Fixed Widget plugin settings accordingly. With the Amadeus theme the correct value is 973 pixels. This setting can be set in the plugin settings page of the Fixed Widget plugin.

Limitations

Not everything is perfect. When the widget changes from standard sidebar to floating, obviously the height changes as well if a scrollbar is needed – obviously max-height is ignored in sidebar mode. This on the one hand leads to a slight jump of the other sidebar widgets, and also creates a gap between the TOC widget and the next sidebar widget. However, in my opinion totally acceptable.

Second imperfection: When you scroll down the post, Easy TOC highlights where you currently are in the TOC. This however resets the scroll bar position for long TOCs. This is a bit nasty, but most of my posts will not suffer, since the TOC usually is not long enough to require a scrollbar.

Credits

I’m now happy enough with the result and sincerely want to say Thank You to the authors of the plugins Easy Table of Contents, Q2W3 Fixed Widget and Widget Logic!