How To Add Table of Contents in WordPress? (Automatic)

How To Add Table Of Contents In WordPress (Automatic)

WordPress has made online publishings much easier by offering easy options to build and maintain regular blogs and websites of almost any type. Day by Day it is becoming more powerful and simpler than ever. Table of Contents gives quick insights into the article or web page content to the visitor. It also helps in easy navigation. But building these tables manually will not be easy and is very difficult for non-technical users. But what if I say, there’s a way which will help you to create Table of Contents automatically for all of your blog posts or website pages with the help of different headings and overall structure of the web page?

Well, yes, that’s what we’re going to talk about in this tutorial. This makes hours of efforts into the one time work of just a few minutes.

Step by Step Guide to Add Table of Contents in WordPress

The setup is very easy and you’ll complete it in just a few minutes or even in seconds.

  1. Go to this link and download the Easy Table of Contents plugin from the official Plugin Repository of WordPress.
  2. Install it on your WordPress site and activate it.
  3. Once activated, just go the settings page of this plugin. (Settings > Table of Contents)

Table Of Contents Settings

  1. On the settings page, you can configure how and where you want this table to appear. In the Enable Support option, tick the Post Types for which you want to show the Table of Contents. This enables support but it does not show automatically shows the Table of Contents on these types. For that, you need to refer to the next point.

Auto Insert Option TOC

  1. In the Auto Insert option, tick the post types where you want the Table of Contents to appear automatically.
  2. Then the next setting is Position, this matters for all posts types and its posts where the Table of Contents is inserted automatically.
  3. Further, there are some advanced options, which you can configure according to your personal choice and requirements.

Advanced Options in Table of Contents

There are several advanced options and features that you can use with this amazing and easy to configure Table of Contents plugin for WordPress.

  • You can specify the minimum number of headings to be present on the page so that it shows up the Table of Contents on that particular page.
  • You can choose to show the Header Label or not and you are also free to choose the Custom Text for this label.
  • You can allow the user to Toggle the Table Label to show and hide the detailed table contents. You can also set to hide the table detailed contents by default initially when the page loads.
  • TOC plugin automatically gives counting to the heading and you can choose from any of the following number sequences from Numeric or Roman. You can also set this option to None to disable the numbering feature.
  • Check the Smooth Scroll option to let the users scroll smoothly to the actual content when clicking on any of the Heading link present in the Table of Contents.
  • There are a lot of styling options available from text size to the color, which you can configure and play with to make the Table of Contents look the way you like. There are also predefined themes available.
  • Further, there are options to configure the anchor links.
  • You can also choose to include which of the heading tags ranging from H1 to H6 should be included in the Table of Contents formation.
  • Even if you use some special headings in the content of your webpages which you don’t want to appear in the Table of Contents, you can choose to exclude them as well by mentioning them in the Exclude heading options. You need to separate multiple headings with a Pipe (|) Symbol.

Exclude Heading From Table Of Contents

  • In the end, I’d like to mention one of the most useful options provided with this plugin. It is the Smooth Scroll offset option. For many blogs and websites heaving fixed headers on scrolling, this option is beneficial. When clicking on any of the heading links in Table of Content, the user is scrolled to the actual content but if you have fixed header, the starting of actual content may hide. To avoid this, you must set the offset according to the height of the fixed header.

Smooth Scroll Offset

For example, here on WTMatter, we have a sticky menu, which comes and becomes fixed as you scroll down while reading any of our articles.

I have given two screenshots below, in the first one, the left the settings with the default offset of 30px, which results in hiding the actual start of the content section, i.e. the heading behind the fixed Logo and Header Menu.

Without Offset

Now, when I set the Offset option to 120px, as per the height of the Sticky Menu Bar, it appears normally with full heading as you can see in the following screenshot.

With Offset

This setting can also be configured separately in the next option for mobile views.

Consequently, I found this plugin useful as well as featureful. You can also use this plugin to quickly add Table of Contents in any number of web pages, blog posts or articles you have on your blog or website.

Do share this article with others if you really find it useful and don’t forget to subscribe to us to get such latest tutorials and updates. If you’ve any questions, feel free to ask me via the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *