How to Add a WordPress Table of Contents (Kadence WPlaybook ALL100 Theme)

The ALL100 theme, the default WordPress theme provided by WPlaybook, comes with a built-in table of contents feature. Here’s how it looks!

Now, let’s explore how to insert a table of contents like this into your WordPress site.

How to Insert a Table of Contents in the ALL100 WordPress Theme

Important Notes

The WPlaybook ALL100 theme is designed to work with WordPress’s block editor. If you are using the Classic Editor, please disable it and switch to the block editor.

If you’re unsure what this means, don’t worry! The default editor you’re using right now is the block editor, so you can simply continue using it as is.

Adding a Table of Contents

In the post editor, create an input mode as shown below. You can simply press Enter anywhere to bring it up.

This means that the Rank Math plugin is currently activated.

Type / to choose a block or // to use Content AI

It also indicates that by typing the slash key ( / ), you can bring up the menu for inserting elements.

Now, enter /toc, and you will be able to search for the WPlaybook theme table of contents.

When you select WPlaybook Theme TOC, the table of contents will be inserted in that spot.

Note: If you’re adding a table of contents for the first time, it’s normal for nothing to appear initially.

The document table of contents is set to automatically detect h2, h3, and h4 tags inserted in the document. In other words, when you use h2, h3 tags, they will be recognized and included in the table of contents. Take a look at the image below!

• Start adding Heading blocks to create a table of contentsPolylang

  placeholder do not modify

The heading block is created by typing the hash (#) symbol followed by a space.

For an H3 heading, type three hash symbols (###), then press space, and it will switch to Heading 3 input mode.

Like this.

Additionally, by clicking on the left side of the table of contents, you can access the right-side menu, where you can customize the heading levels to your preference.

Currently, the WPlaybook theme’s table of contents is set to automatically detect h2–h4 headings.

How to Close the Table of Contents

In May 2024, a leaked Google algorithm revealed that the number of clicks a visitor makes on a website influences its Google ranking.

At WPlaybook, we considered how to use this insight and realized that closing the table of contents by default could have a positive impact!

Click on the table of contents, then go to the right-side menu. Under Collapsible Settings, enable the Start Collapsed option to keep the table of contents closed by default.

You need to set it to blue! 😂 Don’t get confused. 😆

If you succeed, the preview of the post will look like this. Since visitors have to click the arrow in the bottom right to expand it, this encourages more user interaction on your site.

If you see a purple WPlaybook theme TOC (early version)

If you are using the initial version of the WPlaybook theme, the table of contents will appear with a purple border. The insertion method remains the same.

However, when inserted, the post display may be slightly misaligned. To fix this, click the three dots, then select “Separate Pattern” to adjust it properly.

How to Automatically Insert a Table of Contents in Every Post

If manually loading the table of contents pattern every time feels tedious, you can set it up to automatically appear in each post.

One way to do this is by using Kadence Pro “Kadence Elements” feature. This allows you to configure the table of contents to be inserted automatically in every post.

(Kadence Pro) How to Automatically Insert a Table of Contents in Every Post

Conclusion

Today, we explored how to insert a table of contents in WordPress. If you’re curious about other ways to customize your WordPress site, be sure to check out the WordPress customization collection post! 😊