How to Add Floating Table of Contents to Your WordPress Posts

Everybody who has been in the online content provider business long enough knows that Google loves long-form storytelling as it provides Internet users with more quality materials. As a result, articles with thousands of words have become common in the world wide web. But on the other hand, the number of readers who are lost in their explorations are also increasing.

One thing that should be helpful in navigating through the long article is Table Of Contents (TOC). Unfortunately, most of the time the TOC is set to sit at a particular position and will quickly disappear after the user scrolls away. It would be nice if you could set the TOC to be floating along the article in a fixed position so it will always be available.

If you are a WordPress user, here’s how you can add a floating table of contents to your WordPress posts.

The first step is to insert the TOC. One recommended TOC plugin is Table of Contents Plus. This plugin will automatically generate the TOC based on your article’s headings.

toc-mte-install-toc

After installation and activation, the plugin will be accessible under the “Settings -> TOC+” menu. From the settings you can set the plugin to automatically appear on certain content types, set the minimum number of headers before it’s activated, use shortcodes to enable/disable it and to insert it at a particular position of the post/page, and many more customizations.

toc-mte-toc-settings

To show the TOC in the sidebar, go to “Appearance -> Widgets,” then drag and drop the “TOC+” widget to the Sidebar widget area. Click Save, and you are done.

toc-mte-sidebar

The TOC will appear on the sidebar of all the posts and pages that meet the criteria.

toc-mte-the-result

But, the TOC sidebar widget will still scroll along with the article. To make it stick, let’s continue along in this tutorial.

To achieve our second objective, we need help from another plugin called Q2W3 Fixed Widget. Take the usual trip down the WordPress repository lane, then install and activate the plugin.

toc-mte-q2w3-install

This plugin setting is accessible via the “Appearance -> Fixed Widget Options” menu, but most users don’t need to tinker with them.

Using the plugin is simple. Go back to “Appearance -> Widgets,” and select the widget you want to pin on the sidebar. Since we want to make the TOC+ widget floating along the scroll at a fixed position on the sidebar, select it.

You will notice a new checkbox appear just above the Save button called Fixed widget. Simply check this box, and you will have yourself a fixed table of contents.

toc-mte-fixed-widget

And the feature is not limited to Table of Contents Plus. You can use the Q2W3 plugin to make any widget stay visible on the sidebar.

Now you can go to the page or post that has the sidebar TOC widget and admire your work. Should you ever need to disable it, go back to the “Appearance -> Widgets” menu and uncheck the box.

While CSS masters can take advantage of the style customization feature of TOC+ to tweak its appearance to their preferences, most users will just use the plugin out of the box. It means the TOC display will be influenced heavily by the theme that you use.

I managed to test the combination of TOC+ and Q2W3 with several themes, and here are several tips that you can use to get the maximum result.

First, put the fixed TOC+ widget at the bottom of the sidebar below the other widgets so that it won’t go over another widget when you scroll. Since the widget has a transparent background (at least it does in the themes that I tested with), looking at two different transparent widgets stacked on top of each other is not a pretty sight, especially if one is moving and the other is not.

Second, use as few widgets as possible on the sidebar. This way the TOC+ widget will be visible before the page fold, then it will scroll up with the page until it reaches the top page and stays there.

Another advantage of using a fixed sidebar is that your visitor will never have the empty area that usually appears when they have scrolled way down the page.

Try the combination and tell us what you think.

5 comments

  1. Very informative tutorial,
    but how can I make TOC stick inside the article post instead on the sidebar?

    Because 90% my reader come from smartphone.
    So sidebar will place below article and the TOC on sidebar will be pointless.

    • Hi Neuhaus,
      If you install the plugin and do nothing else, the TOC will be placed after the title and before the content. So maybe this settings can meet your requirements? You could also combine that scenario with floating TOC to satisfy both mobile and desktop visitors.

  2. hi
    I appreciate the post. thank you. I have spent AGES trying to get something like this to work. Lots of dead ends…this is the closest.
    What you wrote DOES work on my theme ie it places a configurable TEXT TOC on the RHS widget area.

    Really I want that TEXT TOC prettied up a bit and then be able to place it ANYWHERE STICKY on the screen area

    Having got this to work it might have stopped all my ad units in the RHS bar working tho!! I will have to check what’s going on there

    there’s also the potential problem highlighted by the previous comment of MOBILE usage.

    thank you again

    • Hi tfk,

      I believe it’s possible to tweak the appearance using CSS, but it requires the know-how and is not something that everyday WordPress users are familiar with.

      To place it anywhere sticky requires more work. I think you could try to find a plugin that can enable widgets areas in customized locations. Another route that you could try is to use one of the WordPress theme builders.

      About the ad units, why don’t you try to make them floating and sticky along with the TOC? But you have to consider how much screen property the combination will take.

      And I have address the mobile usage comment above. :)

  3. This is an amazing post, truly a great tutorial that I had been looking for the last few months (also found your ebook that looks cool).

    Quick question, is there a way to underline the TOC item when you’re on that part of the page? For example, if you look at this page – https://www.alertmedia.com/emergency-notification-system – when you scroll down to a certain section it underlines that in the sidebar.

    I would assume it’s fairly easy, just don’t know where to look to implement.

Comments are closed.

Sponsored Stories