Table of content?

How To
1

Hi guys,

Does anyone know if there are any plugins that offer table of content functionality to Brics? I have tried a few and none of them seem to work.

I’m asking because I have drafted a relatively long article, which will be updated occasionally. For now, I have written a TOC in a shortcode element, but I am not overly keen on having to update this (with numbers on H2, H3, etc.) each time I update the article.

I have seen that this topic has been discussed before, but I can’t see that a free solution has been provided.

Does anyone have any tips, either to a plugin or to an easy workaround?

Thanks!

2 Likes
2

It’s not free, but it’s cheap as nuts and brilliant. Has TOC

And the dynamic table is worth the price alone I think.

1 Like
3

Welcome to the community Kenneth,
You can use the shortcode from rank math SEO. It’s free and works well with bricks builder.
Here is the official article: How to Use A Table of Contents To Improve Content Readability » Rank Math

4

Thank you for the welcome and the replies.

@digismith I am just working on a hobby project so I would rather avoid 170+ USD extra (incl. VAT).

@mubin , sorry if I am being a bit slow but which shortcode would that be? I installed RankMath but didn’t get which shortcode you are referring to. As far as I understand the article, a TOC is added by clicking "the '+’ icon and inserting a “Table of Contents by Rank Math block” but I can’t see that applying to Bricks. What am I missing here?

Thanks again.

5

here is a simple example native javascript solution. have fun with it :slight_smile:

you just need to add this HTML dom somewhere so it can generate the article titles h2 and h3

  <div id="toc-container"></div>

you can extend for selecting other h1 or h4 h5 if you want to :slight_smile:
code very simple to edit.

const headers = document.querySelectorAll("h2, h3");
6

was there actually a shortcode for this? I would love to use it, but all that i can find is a gutenberg block.

7

well bricks itself has TOC element
image

check that.

if you ar going to use it inside the block editor just install a plugin that adds TOC block that’s the best way probably. stackable can work or spectra so many alternatives.

8

Hi, how add list (ul) type to native TOC? - https://i.imgur.com/BDgjxSe.png