How To Create Table of Contents in WordPress Blog Post?
Do you want to create table of content for your wordpress blogs? If yes, let’s hop in right away.
I am about to spill the beans for generating table of contents in the easiest and the fastest way you could have ever imagined.
The “what“, “why“, “when” and “how” regarding Table of Content are explained in the blog in a clear and crisp way.
What’s the Fuss about Table of Content?
Table of Content ( TOC ) is a listing of all the headings and subheadings of your blog content that is placed strategically generally right below the intro hook and the title or as a sidebar.
Why Use Table of Content on WP blogs?
Table of Content enhances the user experience by adding much-needed navigation for the page contents.
Instead of manually searching for the sub-heading, TOC allows you to navigate to a particular block with a single click.
In addition to that, Table of Content also enhances WordPress SEO as search engines use TOC to add “jump to section” links in the search result.
TOC also helps your post to get listed in featured snippets at the top of SERP.
When is Table of Content implemented in WordPress?
According to a study done by Nielsen Norman Group, users spend an average of 5.9 seconds skimming through a website before deciding to stay or leave.
A TOC can help users swiftly understand the structure of the content and navigate to the sections they are interested in, reducing the bounce rate.
To corroborate that, a study by HubSpot found that adding a TOC to long-form blog posts increased the average time spent on the page by 11%.
This suggests that users are more likely to engage with and read longer content when they can easily navigate to the sections that interest them.
If you have a lengthy blog with a lot of sections and subsections, you would need a TOC to provide swift navigation and structure to your blog.
Create Table of Contents manually without Plugins in WordPress
Adding Table of Content manually is very easy implementing internal links.
First create list of links that point to different section of the same post.
For instance, if we want to create a table of content manually with different headings.
Then, we need to create internal links of the listed heading using “#” followed by anchor text of destination or linked section.
Table of Content:
- 1. First Heading
- 2. Second heading
- 3. Third Heading
Add anchor text to different heading sections.
To add anchor text to individual heading, first select the block.
Click on the setting icon just next to Publish button.
Then, select the Block Tab, scroll down to Advanced section.
Expand the Advanced section clicking on “downward caret” icon ▼
Add any anchor text to HTML ANCHOR section that will be used by TOC to link to this section.
Do this iteration for all the heading blocks that you want to link from table of content.
Start adding internal link to all the heading in table of content. Use ‘#’ , to link the listing using the anchor text.
For example, if you want Heading 1 in TOC to link to the Heading 1 block, add internal link using the same anchor text for that block that is “#heading1“
Make Table of Contents with pagebuilder widgets
If you are using pro-version of the page builders like Elementor, Divi, Beaver Builder and so on.
You can directly insert Table of Contents widget for you post without having to install any third-party plugins.
For Elementor page builder, first, edit post with Elementor.
Under the Elementor Tab, search for Widget. Type “Table of Contents“. Click on the widget.
Create WordPress Table of Content with plugins
The easiest and the fastest way to create wordpress table of content is by using plugins.
There are several plugins at your arsenal that you implement for your wordpress blogs.
We have shortlisted some of the most popular Table of Content Plugins along with their pros and cons.
Table of Contents Plus
This is a popular and highly rated plugin that allows you to add a customizable TOC to your WordPress posts and pages.
- It supports custom post types, and you can customize the style and position of the TOC.
Active Installations: 300,000+
Table of Content Plus is responsive and SEO friendly.
Also outputs a sitemap listing pages and/or categories across your entire site.
Uses a unique numbering scheme that doesn’t get lost through CSS differences across themes.
Like any plugin or software, “Table of Contents Plus” may have security vulnerabilities or compatibility issues with other plugins or themes on your website
Easy Table of Contents
Easy Table of Contents is another popular TOC plugin that’s easy to use and highly customizable.
You can choose which headings to include in the TOC, and customize the style and placement of the TOC.
Active installations: 400,000+
It’s fully compatible with Old Classic Editor, Gutenberg editor, Elementor, Divi and other popular page builders and editors.
Supports display of TOC panel just below the Classic text editor.
Supports Rank Math Plugin
Supports Smooth Scrolling
Automatic generation and Auto- insertion of Posts, Pages or custom-post types which can also be disabled.
Supports display of TOC widget in the sidebar when needed.
Since it is one of the most popular plugin used for Table of content, it has frequent redundant updates which have caused bugs in majority of the users blog.
LuckyWP Table of Contents
This plugin adds a responsive and customizable TOC to your WordPress posts and pages.
It supports custom post types and shortcodes, and you can customize the style and position of the TOC.
Active Installations: 100,000+
LuckyWP Table of Contents is compatible with almost popular page builders like Elementor Page Builder, Beaver Builder, WPBakery Page Builder.
Supports popular plugins like WordPress Multilingual Plugin (WPML), Rank Math and so on.
Automatic insertion of a table of content (configure post types and position).
SEO-friendly: table of contents code is ready to use by Google for snippets on result page.
Color schemes (dark, light, white, transparent, inherit from theme) and the ability to override colors.
Customizable appearance: width, float, title font size and weight, items font size, colors
It doesn’t receive frequent updates like its competitors. The last major update was made a year ago.
Rich Table of Content
Rich Table of Content plugin adds a customizable TOC to your WordPress site, with support for multiple TOCs on the same page.
You can customize the style and position of the TOC, and it’s compatible with all major WordPress themes.
Active Installation: 30,000+
Real-time preview of changed settings with an intuitive UI design.
Ease of use
Auto-insert feature for posts and pages.
For the classic editor, the TOC panel is not displayed by default. It must be enabled from the settings for the TOC panel to be visible in the sidebar.
How to Add TOC Plugins to Your Blog
After installing and activating the Table of Content plugin of your choice, you can add Table of Content Plugins to your WordPress post or page by following ways:
Using Short Code For TOC plugins
In Gutenberg Block Editor
In Gutenberg Block Editor, first, click on + icon.
Search for Shortcode in the searchbar
Then, manually type the shortcode for the TOC plugin, you have already installed and activated
Adding Shortcode in Old Classic Editor
For Old Classic Editor, the majority of the TOC plugins are equipped with auto-insert features for posts and pages.
When the Table of Content is not inserted automatically, the shortcode can be used at your desired location in the text editor to insert a table of content.
For ease of use, you can first disable the automatic insertion of TOC so that you can only add TOC for posts or pages when needed by using shortcodes.
To disable auto-insertion of Table of Content
Navigate to Settings >> Table of Content.
Under the general tab, scroll to the auto-insert section.
Uncheck all the boxes which are checked by default to remove auto-insertion. Save the changes by scrolling to the bottom of the page.
Now by just manually typing the shortcodes for your installed and activated TOC plugin, you can insert a table of content anywhere in your old classic editor.
Adding Table of Content without shortcodes
You can insert a table of content in your preferred block editor without using shortcodes as well.
However, the process of implementing TOC for Gutenberg and Old classic editor is slightly different.
Inserting Table of Content in Gutenberg editor
After you have installed and activated your preferred TOC plugin, you can select a block where you want to add the table of content.
Then, click on the ‘ + ‘ icon and search for “Table of Contents”
Search for “Table of Content” in the search bar.
After selecting the TOC icon from the list, the TOC will be generated at the block where you import the Table of Content.
Creating Table of Contents in Old Classic Editor
Before, manually inserting a Table of Content for your page or post, make sure you have disabled the auto-insert feature for your installed plugin.
Else, you will have two tables of content for the same post or page.
To add and display the installed plugin for Table of Content in the Classic Editor, click on the “table” icon at the top of the text editor.
After clicking the icon, make the necessary changes in the TOC panel either located at the sidebar or below the text editor and click on save.
How to create Sticky Table of Content?
At first, navigate to Plugins >> Add New.
Search for WP Sticky Sidebar. Install and Activate it.
In order to stick Table of Content to the sidebar, navigate to Appearance >> Widgets
If you don’t find Widgets under the Appearance menu, chances are your theme doesn’t support any widgets. You might consider changing it.
Then, under the main Sidebar Tab, Click on + icon, and search for Table of Content widget and select it.
Change Sticky Sidebar TOC settings according to your preference. Any changes your make are auto-saved.
At right side, under Widget Areas tab, click on Manage live preview to configure sidebar settings.
You will be redirected to the customizer page where you can make necessary changes under Sidebar tab.
The Crux
Kudos to you for making it to the end! Now you are equipped with an indispensable skill in your arsenal.
Adding a table of content to your blog would enhance the user experience by providing them with much-needed structure and navigation.
In case you just want to create tables in your WordPress blogs, read the below blog article.
One thought on “How To Create Table of Contents in WordPress Blog Post?”