Add A Floating Table of Contents (TOC) to Your Blog’s Sidebar

A floating table of contents is a valuable UX-oriented addition to any site. Learn how to add one to your own WordPress blog using a combo of GeneratePress, GenerateBlocks, and Kadence Blocks.

It is common practice these days to write blog posts in excess of 2000 words. Navigating through long-form writing as a reader can be … well, a bit overwhelming, to say the least. If you’re a blogger and you want to make life easier for your readers, a table of contents (TOC) is a must-have.

Dedicated TOC Plugins: Not So Great

Ideally, your TOC should be accessible at all times as a floating, collapsible element (on desktop only — more on that later). Finding a good plugin that satisfies those requirements for free is easier said than done. Before you go a-hunting on the WordPress Plugins Directory, consider this: I personally tried out all of the TOC plugins rated four stars and higher over the last few months, and all of them were underwhelming.

Many dedicated TOC plugins are slow and buggy with limited customization options. Most of them also gate that much-desired floating feature behind pricy paywalls. I’m not going to name and shame any developers here, but one of the premium plugins even broke my blog’s anchor link functionality completely. No bueno — I need anchor links for my Glossary.

SEE ALSO: Make a Glossary for Your Website Easily with ChatGPT


How to Make Your Own Floating TOC

Luckily, I recently figured out how to make my own lightweight floating TOC using GeneratePress, GenerateBlocks, Kadence Blocks, and a little bit of CSS. Not a cent was spent in the process! Read on if you want to learn how to replicate the floating TOC you can see on the right hand side of this page (assuming you’re not reading this post on your phone).

1. Set Up Your Post Sidebars

If you aren’t already using sidebars in GeneratePress, you’ll need to enable them on single posts for this guide to work. From your WordPress Admin panel, go to Appearance > Customize to open the customizer panel. Then click on Layout > Sidebars to review your sidebar options. Select “Sidebar / Content / Sidebar” if you want to keep your main content centred.

Setting up single post sidebars with GeneratePress (free version).

If you have the Premium version of GeneratePress (which I highly recommend), you can also adjust the width of your sidebars. I personally set both of mine to 20% wide. Use whatever sidebar width works best for your preferred layout.

2. Open Your Sidebar Widgets

Once you’ve set up sidebars for single posts, open up the Widgets area in your Admin panel by clicking Appearance > Widgets. Right at the top of the list, you’ll see Left Sidebar and Right Sidebar. This is where you’ll add in your TOC if you’re using the free version of GeneratePress.

Alternative: Create a New Block Element (GP Premium)

If you’re using the Premium version of GeneratePress, I recommend closing the Widgets screen and adding a new Block Element instead. Call it something like “Floating TOC” and set the Element Type to “Left Sidebar” or “Right Sidebar.” It doesn’t matter what side you use. I prefer the right hand side of the screen for a floating TOC, but that’s just me.

The beauty of assigning your floating TOC to a Block Element is that you can specify exactly where it appears on your blog. Say, for instance, you only want the TOC to appear on your blog posts. Under “Display Rules” and “Location” in the Block Element editor screen, select “Post” and “All Posts.” If you want to create a completely different sidebar for other areas of your website, you can very easily do so by adding a new Block Element, or by using your sidebar Widgets.

If you need assistance with Block Elements, check out the official GeneratePress documentation page for more information.

3. Add a Container and an Accordion Block

Whether you’re using Widgets or Block Elements, your next step is the same. Add a new container with GenerateBlocks, then add a Kadence Blocks accordion to that container. The container allows for more design customization in general, and the accordion block allows your readers to close the TOC if they find it too distracting.

I personally added a 2px border to the left hand side of my container; it’s visually consistent with the other 2px dividers I use on my blog, and it helps to separate the floating TOC from the main content of my blog posts. I also added padding to the right hand side of the container to ensure that the TOC won’t extend to the farthest edge of the window if it’s resized.

As for the accordion, if you want your TOC to appear in the right sidebar, I recommend moving the pane title trigger icon to the left side. It makes more sense to put it on that side, visually-speaking. Also, if you want the accordion open on initial page load (recommended), ensure that you do not select the “Start with all panes collapsed” option.

Setting up the Kadence Blocks accordion.

4. Add a TOC Block to the Accordion Block

Under the accordion pane, add a Kadence Blocks table of contents. Style the TOC as you please. I personally think that an unordered list looks much better than bullets or numbers. Going with an unordered list also means you can further refine the CSS styling of your TOC without messing up ordered lists in your blog posts.

Important: ensure that the TOC nests underneath the accordion pane to allow for proper functioning of the accordion.

One thing you’ll notice about the Kadence Blocks TOC is that when the title is enabled, you can add accordion-like settings to collapse the TOC. You may be wondering, “why add the accordion instead of just enabling the TOC title?” Simple: the accordion block has more options for customization than the TOC block. If you wanted to place the collapsible toggle icon on the left hand side of the TOC, for instance, you’d have to add in additional CSS elsewhere. We already have to add enough additional CSS as it is, so I recommend keeping things simple for yourself by using the accordion instead.

5. Set an Additional CSS Class for the TOC

With the TOC block selected, click on Advanced in the block settings and enter an additional CSS class. I named mine “floating-toc”, for example. With this additional class set, we can make some minor CSS tweaks to handle little things you can’t tweak within the TOC block.

Optional: Further Refine the TOC with CSS

The main thing you’ll want to consider tweaking is the appearance of the TOC block when word wrapping occurs. By default, any of your longer TOC headings will continue on the next line without any indentation. This is a little difficult to look at, and tricks readers into thinking that there are two headings to click on, when there’s actually only one.

To fix this problem, add in the following additional CSS to your child theme via the Customize panel or a CSS plugin:

CSS
/* indent toc */

.floating-toc {
  text-indent: -1.1em;  
  margin-left: 1.1em;
}

Tweak the numeric values to taste. The end result will look like this:

floating table of contents
An indented TOC is much easier to read.

Another thing you’ll likely want to tweak with CSS is the overall size of the TOC text. Not sure if the plugin devs are aware of this bug yet, but I noticed that the Kadence Blocks settings for text size only applied to the initial heading level (H2) of the TOC block. All H3 subheadings defaulted to the text size of my main content, which wasn’t ideal from a visual continuity perspective. To resolve that issue, I added the following CSS:

CSS
/* change toc font size */

.floating-toc ul {
  font-family: 'Lato', Helvetica;
  font-size: 15px;
}

This only works because my TOC is set as an unordered list; if you’re using bullet points or numbers instead, the ul (unordered list) element must be replaced with ol (ordered list).

If you save your Widget or Block Element at this point and flush your cache, you’ll see your TOC in the left or right sidebar on your blog posts with the above CSS elements applied. You’ll be able to close the TOC by clicking on your accordion toggle icon. Neat!

It doesn’t float yet, though. And we want it to float. 🤡

6. Float the Sidebar With CSS

Shout out to David from GP Customer Service for this next bit of information. To float your TOC in GeneratePress after the reader scrolls down past a certain point, simply add in the following CSS (which I’ve modified slightly):

CSS
/* desktop users: we all float down here */

@media (max-width: 769px) {
  .inside-right-sidebar, .inside-left-sidebar {
        display: none;
    }
}

.inside-right-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

If your TOC is in the left sidebar, simply change .inside-right-sidebar on line 9 (highlighted) to .inside-left-sidebar. If you want both the left and the right sidebar to float, ensure that both classes are listed on that line, separated by a comma and a single space.

Curious about the @media at-rule? It ensures that the floating sidebar functionality does not work on mobile phones. Why turn this feature off for mobile users? Well, there’s limited screen space on mobile as it is. Floating sidebars on a mobile device wouldn’t exactly be user-friendly. It also doesn’t make a ton of sense to have a TOC at the very bottom of the page (which is where sidebars are sent on mobile by default), so display is set to none to hide the sidebar completely.

A better TOC solution for mobile users is to simply add a static Kadence Blocks TOC somewhere early on in your introduction. Save the block as a synced pattern for your convenience. I’m sure you could probably also finagle some kind of small floating TOC in a modal box for mobile users, but that goes way beyond my rudimentary CSS capabilities.

Anyway, if you want to hide your static mobile TOC on desktop to avoid redundancies, assign an additional CSS class to the block (such as “mobile-toc”), then add in the following CSS:

CSS
/* hide TOC on mobile */

@media (min-width: 769px) {
    .mobile-toc {
        display: none;
    }
}

Congratulations! You now have a floating, collapsible TOC that only appears on desktop and tablets, and a stationary TOC that only appears on mobile phones. 😃

Conclusion

If you’re tired of buggy TOC plugins that gate desirable features like floating behind paywalls, then I hope you found this post useful. Reach out via YouTube if something about this post is not clear and you need assistance.


Questions?

Do you have a question about the subject matter of this blog post that I didn’t answer above? Feel free to leave a public comment on my YouTube channel by clicking on the button below, and I’ll get back to you there as soon as I can.

See Also: