How to Add Table of Contents in WordPress Site?
Google loves to index long text content. However, reading lengthy content is a difficult task from user’s perspective. Most of the users may be interested to read only certain portion of the article. In this case, you should have a clear structure with table of contents so that users can easily navigate to the required portion. In this article, let us explain how to add table of contents in WordPress posts.
Let’s Take an Example
Let us take an example case where table of content is required. We write many shortcut tips to quickly get things done. However, the shortcuts of a same app are different in Windows, Mac and on mobile devices. The fact is that users want to check the Mac shortcut may not be interested in Windows / mobile portion and vice versa. In this case, it makes sense to have a table of content at the start. This will help Windows, Mac or mobile users to quickly navigate to their interested section without going through other content.
Most importantly, Google will show the links from table of content in search results. When user searching with Mac in keyword, Google will show the “Jump to” option in the search result with the link to go to Mac section directly.
The final published table of contents will look something like below on your site:
How to Add Table of Contents in WordPress?
You can manually create an ordered list for your article using Word / Pages document or with HTML list tag. Add the list on your post using list block or embed the HTML code using Custom HTML block. However, this is time-consuming task when you have large number posts to create or have many existing posts. The easy option is to use a plugin to get the task done.
Easy Table of Contents
Login to your WordPress dashboard and navigate to “Plugins > Add New”. Search for “table of content” and install Easy Table of Contents plugin on your site.
The plugin has 80K+ active installations with good rating.
Setting Up Table of Contents
After activating the plugin, go to “Settings > Table of Contents” menu. You will see single page settings in an easy to understandable manner.
General options section is the main section you can setup to control where the TOC should appear on your site.
When you have multiple post types on your WordPress, select which post types you want to add table of content. Select posts and pages to enable support.
Recommended: Get discounted Bluehost hosting for WordPress site.
This is useful option when you have existing posts on which you want to insert table of contents (TOC). Select the post types to auto insert TOC. Uncheck all the items, if you don’t want to insert TOC on older posts. Auto insert also will insert TOC on newer posts, however you can control the behavior in post editor.
The plugin allows you to insert TOC in four different positions:
- Before first heading – this is a default option
- After first heading
We recommend you to use the default option, so that you have TOC before first heading on the article.
Other General Options
Remaining general options are to control the behavior of TOC.
- Show TOC only when the article has certain number of headings.
- Add header label and show / hide.
- Allow users to toggle the visibility of TOC. Enabling this option will allow users to expand or collapse the TOC display.
- Initially hide or show the TOC when the page is loading first time.
- Show the headings in hierarchy based on H1 to H6 level.
- Use the counter as decimal, numeric, roman or none.
- Enable or disable smooth scroll.
These are exhaustive options to setup the TOC on your site. You have two more sections to customize the appearance and advanced settings.
Under this section, you can customize the width, font size and weight for your TOC display. You can also select one of the predefined themes or create your own color theme to suit your site’s display.
Advanced section allows you to include the heading levels and exclude the wildcard words. For example, you can exclude the heading with words “fruit*”.
- You can make the anchors in lower case and use hyphens instead of underscores.
- Restrict the TOC to posts or pages only on certain path.
- Add default anchor prefix and widget suffix selector.
After finalizing the options, click on “Save Changes” button to save all your changes. If you have enables auto insert then the plugin will automatically insert TOC all existing posts.
Using Table of Contents in Post Editor
The global settings will control the behavior of table of contents on all the posts. However, you can have control on individual post level using the meta box in post editor.
- You can enable or disable TOC on individual post.
- Select the heading level for TOC and insert alternate custom TOC heading.
- Exclude heading from TOC.
Table of Content Sidebar Widget
The plugin also offers a TOC widget that you can add in sidebar widget area.
The widget will show the TOC of the corresponding post in sidebar. You may need to use fixed widget sidebar so that the widget will float when user scroll down the content of the post. You can highlight the active section in different color, so that users can easily understand when reading the content.
Be careful when using TOC widget on default site wide sidebar. This may create PHP error when the post is not eligible for TOC as per your settings. Also, it will create PHP errors when you have only enabled TOC on posts and showing the sidebar widget on pages and custom post types. You can try using different sidebars on different post types to avoid this issue or use widget visibility option with Jetpack plugin.
Table of Content plugin is a forked version of the Table of Contents Plus plugin. However, the settings are neat and simple without distraction or advertisements on the dashboard. You can easily insert TOC anywhere on the content or sidebar and control behavior. Remember, it is a free plugin so the support will not be instant as you can see the support forum on WordPress site. If it doesn’t work, you can simply delete and try another plugin without any issue.