Learn WordPress 
The user experience (UX) is important to every website. But it may be difficult to cover every aspect without missing at least a few. One of those key elements in UX for long content is the table of contents (TOC).
The table of contents is often forgotten and this could lead to visitors getting bored and leaving the website quick without finding the specific point they are after.
In this article, we would like to discuss how to add the table of contents to WordPress with plugins and at the end, we will look at manually adding the table of contents to WordPress.
Why Use Table of Contents in WordPress?
An article with a table of contents has a more professional look compared to an article without a TOC. Tables of content have been traditionally used in the book industry. But it’s yet to become a universal concept in online articles.
If you are not convinced yet, here’s 4 reasons why you should use the table of contents:
- Table of Contents makes a good impression: As mentioned above, a document with a table of contents has a more professional look to it compared to a document without one.
- It arranges your context: A table of contents helps you organize the document so you don’t forget any important headings or points that you are talking about in the document.
- Table of Contents acts as a road map: Readers prefer to have a reference of some sort so that they can locate the information they are reading the document for. Specifically, in web-style navigation users prefer to click on an item in the table of contents and get to the point.
- Table of Contents gives readers an expectation: The table of contents gives readers what they will be reading in the document and the author can use the TOC to define the tone of the document.
Now that we discussed the importance of having a table of contents in web articles, let us discuss why and how to add the table of contents to WordPress.
Add Table of Contents to WordPress using Plugin
WordPress is very flexible. Thus, you can add or remove functionality to WordPress by using plugins. Here’s a list of top 5 TOC plugins you can use to add the table of contents to WordPress.
1. Gutenberg Blocks
The first plugin that will help you to add a table of contents to WordPress is Gutenberg Blocks. With 200,000 active installations, this is the most popular plugin on our list. This plugin is developed by Brainstorm Force, the same people who have developed many top plugins such as Schema Pro and themes like Astra.
The Ultimate Addons for Gutenberg plugin comes with 17 ready-to-use blocks for the Gutenberg such as Call to Action and Testimonials.
To Download Gutenberg Blocks, log in to WordPress > Plugins > Add New > Search for “Ultimate Addons for Gutenberg”.
Once the plugin is activated, you will be redirected to its configuration page. Scroll down until you see the Blocks section. You can deactivate the blocks you don’t need or activate them. By default, all blocks are activated.
But how to add the table of contents to WordPress with the Ultimate Addons for Gutenberg plugin?
From Posts either create a new post or choose an existing post to edit it. Click on Add block and search for the table of contents. Then, add it to your post.
The Ultimate Addons for Gutenberg edtiro plugin allows you to fully customize the table of contents. From alignment, background colors, fonts, sizes, border style, making it collapsible and most importantly you can select the headings you want to use in the TOC.
Simply use the block options to customize it however you desire.
That’s everything you have to do to add the table of contents to WordPress with the Ultimate Addons for Gutenberg plugin. This plugin is fully compatible with the latest version of WordPress and most of the themes in this platform.
2. Ultimate Blocks
Ultimate Block is the next plugin to add the table of contents to WordPress. The blocks in this plugin are specifically designed for bloggers and content creators. It allows you to create better and more appealing content for your audience.
Currently, Ultimate Blocks has over 5000 active installations and it’s fully compatible with the latest version of WordPress. The Ultimate Blocks plugin comes with many useful blocks to make your website more appealing. For example, call to action, testimonial, social share, countdown timer and etc.
The Ultimate Block plugin can be downloaded from the official WordPress website or directly from the WordPress Dashboard. Once you have installed and activated the plugin, create a new post or edit one of your existing posts.
Add a new block and search for the table of contents. That’s all you have to do to add the table of contents to WordPress.
3. LuckyWP Table of Contents
LuckyWP Table of Contents is yet another plugin on our list. You can call this plugin with a shortcode or Gutenberg block. In addition, you can change the minimum number of headings displayed in the TOC for longer content.
The LuckyWP Table of Contents allows you to customize the table’s width, float, title font size, weight and etc. The LuckyWP plugin creates an SEO-friendly table of contents for WordPress. It is also compatible with the most popular WordPress page builders (the Elementor page builder, WPBakery page builder, and Beaver Builder page builder).
The LuckyWP plugin supports RTL, it creates SEO-friendly TOC, can be inserted with shortcode, block, or widget, it’s fully customizable and etc.
You can download this plugin from the official WordPress website or directly from the Plugins tab in the WordPress Dashboard. LuckyWP has over 10,000 active installations and it’s compatible with the latest version of WordPress.
4. Easy Table of Contents
As you can probably tell by the name, the Easy Table of Contents plugin provides a very simple method of adding a table of contents to WordPress. Much like other plugins mentioned in our list, it automatically generates TOC by getting the required information from the headings.
There are configurations that you can activate or deactivate. In addition, the Easy Table of Contents lets you choose the position for the TOC. You can add it to the top or bottom of the content.
The Easy Table of Contents plugin comes with 5 pre-made templates to get you started. However, they are fully customizable and you can create your own template. The Easy Table of Contents supports smooth scrolling, it’s collapsible and lets you choose the headings.
Easy Table of Contents can be downloaded from the official WordPress website or directly from the WordPress Dashboard. This plugin has over 100,000 active installations and has been in the WordPress repository for a while.
5. CM Table of Contents
CM Table of Contents is a fairly new plugin with only 1000 active installations. However, it comes with many features. CM Table of Contents comes with a specified feature to make sure the TOC is displayed on single posts and pages. Besides, in this plugin, it is possible to provide a custom title for the created table of contents.
Unlike other plugins on our list, the CM Table of Contents doesn’t generate the TOC on its own and you have to check a box at the end of the content to generate the TOC. However, in the premium version, it automatically generates the TOC for your content.
CM Table of Contents can be downloaded from the official WordPress website or directly from the Plugins tab in the WordPress Dashboard.
How to Manually Add Table of Contents to WordPress?
If you are amongst those people who don’t like adding plugins due to security reasons and optimization purposes, then we recommend manually adding anchor points to different sections of your posts.
Let us explain how to add the table of contents to WordPress, manually.
In simple words, you need to add two main things to the post:
- Create the anchor link with # sign
- Add an id to the text you want the user to jump to.
How? Let us explain.
First, you need to create the anchor link. To create an anchor link, you have to use # as the prefix and the keyword that you want the user to jump to. Now it’s time to add it to the text.
Select the heading that you want your text to jump to and click on Advanced from the left-hand bar. Then type-in the HTML Anchor. The HTML Anchor must be exactly the same as the prefix. However, without the # sign.
And that’s how you manually add the table of contents to WordPress.
