How to add Table of Contents in a WordPress Site

Posted on September 22nd, 2022

Table of Contents can be helpful for many websites. People primarily use this feature on their Blogs and Article websites. This feature allows your visitor to redirect to any specific part of the page. For example, A specific technology blog article may contain more than 1 subtopics. Or we can say a simple guide that provides specific information divided into many subtopics. Like any book, the INDEX of any book is a perfect example of a Table Of Contents. The only difference between Table Of Content and INDEX is that we can add Table Of Contents to a website that can be used as a link. Whenever a user or visitor clicks on the heading or topic name, the page will automatically scroll and stop at the required topic of the page.

So, we will learn how to add a “Table of Contents” on our WordPress websites. It’s an easy process that can be done using a couple of clicks. And also provides customised this feature use and appearance. We will install one free plugin to learn how we can add a Table of Contents on Different pages and how we can customise its appearance. So, let’s understand the plugin first.

LuckyWP Table of Contents WordPress Plugin

The LuckyWP Table of Contents WordPress Plugin is one of the most simple and free plugins. Anyone can download this plugin directly to your WordPress websites. This plugin creates an SEO-Friendly Table of Content, Specially for blogging websites. Different search engines like Google and Bing like the well-managed website and its content.

This plugin can add a Table of Contents anywhere on the website, like Pages, Posts and Custom post types. One of the most compelling features of this plugin is its customizability and auto insert feature. So, let’s learn all the essential features of the LuckyWP Table of Contents WordPress Plugin. 

Features

  • The LuckyWP Table of Contents plugin comes with an Auto-insert feature. Using this feature, you can easily configure the settings like post types and position of the Table of Contents.
  • This plugin builds a completely SEO Friendly Table of Contents, which is very important for Blogs and Informative websites.
  • Using LuckyWP table of Contents, we can easily add a Table of Content using Shortcodes, Gutenberg Block and Widgets. It means it’s easy to add a Table of Contents anywhere on your website.
  • LuckyWP Table of Contents plugin allows you to configure the Headings and types within the Table of Contents. You can even skip the headings which you don’t want to display.
  • There are different Colour Options available within the plugin, and this configuration allows us to change the appearance of the Table of Contents. You can set different appearance options like Dark and Light, White and Transparency. 
  • The LuckyWP Table of Contents plugin has essential features like the Toggle button(Show/Hide), Smooth Scrolling and RTL Support.
  • This plugin provides enumeration items like Decimals, Roman and nested order. It is compatible with almost every WordPress Theme and Plugin.

Let’s learn how to add a Table of Contents using the LuckyWP Table of Contents plugin. Follow the Steps from here.

How to Insert Table of Contents using LuckyWP Table of Contents

The LuckyWP Table of Contents plugin is straightforward and ready to use. As we discussed, it’s a free and open-source plugin available on WordPress Plugin Repository. So, in this tutorial, we will learn how to install the LuckyWP Table of Contents plugin on any WordPress website. So, follow the steps from here.

Step 1: Firstly, Goto your WordPress website Admin Area and log in using your Username and Password. 

Step 2: Hover your cursor on the Plugins tab from the left sidebar. Then click on Add New option, as seen in the image below.

Step 3: On the next page, find the search field on the right side and search for “LuckyWP Table of Contents“. Then find the correct plugin from the search results, Then click on the Install Now button, as you can see in the image below.

Step 4: Once the Install Now button is changed with Activate, and the plugin is successfully installed on this WordPress Website. Now, Click on the Activate button just like the image below. 

Step 5: After Activating the plugin, hover your cursor on the Settings tab. Then Click on the last option, Table of Contents, as you can see in the image below. 

Step 6: Now, we’ll configure settings for Auto Insertion on the Table of Contents on each page and new posts. For that, Click on the Auto Insert tab on the top of the Table of Contents Settings page.

Step 7:Then, click on the checkbox and mark as true that it is available on the Auto Insert page called Auto Insert Table of Contents. Once you enable the settings, it will show some more settings just below the checkbox. 

Step 8: Next, select the position of the Table of Contents where you want to display it. Click on the Drop-Down field and select the appropriate location from the list. 

Step 9: Select the post types where you want to display the Table of Contents. Whenever you add these posts to your WordPress website, this plugin automatically adds the table of contents features on selected posts.

Step 10: After selection, please click on the Save button to save the current changes.

Congratulations, you successfully added a LuckyWP Table of Contents plugin to WordPress Website. We also learned how to insert a Table of Contents on our websites automatically.

How To Configure LuckyWP Table of Contents Plugin

It’s effortless to configure the LuckyWP Table of Contents plugin, So whenever this plugin inserts a new Table of Contents on our Pages and Posts. It will display all the required information perfectly. Here, in the tutorial, we will learn how to Configure and change the appearance of the Table of Contents and give a similar look to the websites. So, follow the steps from here. Let’s start with the basic configurations.

Content Settings

Step 1: First of all, Goto the WordPress Dashboard and hover your mouse on the Settings tab from the left sidebar. Then, Click on the option, “Table of Contents”.

Step 2: On the next page, there’s a tab section on the top, as seen in the image below. First, we will configure all the General settings of this plugin. So, click on the General Tab. Within this tab, you can configure all the general settings of the Table of Contents. Let’s take a look at each setting one by one. 

Step 3: The first setting of this page is Minimal Count of Headings; using these settings, you can configure how many headings you need to add Table of Contents on pages and posts. For example, if you type 2 on this field, a page or post will need at least 2 headings to add a Table of Contents. Add an appropriate number as per your requirement. 

Step 4: The following setting is Depth with a Drop-down field; we can choose how many subheadings we want to add to the Table of Contents. For example, selecting 2 from the Depth Drop-Down means the Table of Contents will only display 2 main headings like H1 and H2. See the below image as a reference. 

Step 5: The next option is the Hierarchical view; this setting will display the headings and subheadings in a complete Hierarchy. So viewers can smoothly find their relevant topic on a specific part of the page. Click on the checkbox to enable this feature.

Step 6: Just after, you will see another essential setting option called Numeration. A drop-down list is available with options like Decimal Numbers and Roman Numbers List. So, this option is here to give a Numerationto the Content Headings. The selected enumeration method will be applied to all the Table of Contents. So, click the drop-down and select the appropriate enumeration method per your needs. See the below image as a reference.

Step 7: The last setting for content is Numeration Suffix. As you can see, it also has a drop-down field. So, click the drop-down and select the preferred suffix per your Numeration method. You can see a simple example just below the drop-down field. 

Header Settings

Step 8: As you can see next, the second section contains all the settings related to the Table of Contents Header. The first field asks for the Title name of the Table of Contents. Click on the field and add you’re relevant title. 

Step 9: The second option is Toggle Show/Hide. This setting will help you to configure the show and hide buttons. So whenever a visitor clicks on the show button beside the title, the table of content will expand and show all the headings and subheadings. To enable the settings, click on the checkbox beside the name, just like the image below.

Step 10: Below the Toggle settings, two fields are available to change the Show and Hide Labels. Click on the Label Show field and Enter the text you want to replace with the show. Using the same technique, change the Label Hide of the field as per your need. Just below the Label, there’s a checkbox available. Click on that checkbox to ensure that the Table of Content will be hidden when a page loads by default. If this option is false, the Table of Contents will be in the Show state.

Behaviour Settings

Step 11: Here, the last section is the Behaviour section; as per its name, this section has some Scroll related settings. The first setting is Smooth Scrolling which helps us to give Smooth Scrolling to the visitors whenever we have large Table of Content headings. To enable this feature, click on the checkbox and mark it as true.

Step 12: The last option is Scroll Offset Top, which allows us to give some space on the top after the title. Click on the field and enter the value in px(pixels), just like the image below. Then, Click on the Save Changes button to save all the current changes and apply all the current settings to all websites.

Conclusion

The LuckyWP Table of Contents plugin provides various features like Auto Insertion and Customisation. As we discussed, it’s a free plugin you can use on any WordPress website. More than that, We can configure this plugin easily. All the listed features are ready to use, and we can use the Table of Content created with LuckyWP anywhere, like Widget, Pages and Posts. The tiny screen responsiveness automatically adjusts itself based on the visitor’s device. We can also configure the LuckyWP Table of Contents as per our requirements, like which type of headings you want and a minimum number of headings required for auto insertion.

Leave a Reply