Table of Contents On Single Page

Introduction

This demo page shows the abilities of the CM Table of Contents plugin.

Above you can see the table of contents which you can expand/collapse by clicking on it. Clicking on each title will scroll you down to the corresponding chapter.

When you scroll down through the main TOC at the top of the page, there will appear a Floating TOC on the right side - you can open or close it by clicking on the button. It works almost the same as the TOC at the top of the page - you can navigate through the content by clicking on needed titles. The difference is that this floating TOC is available at any place. When you scroll down through this demo page, the current chapter will be highlighted in the Floating TOC.

Also, you can see a button at the bottom of the page - clicking on it will get you back to the top of the page.

Below we will tell more about how to configure the plugin.

Enabling Table of Contents

The main function of the Table of Contents plugin is to comb through pages and posts, particularly long ones. Tables of contents are automatically generated based on their header contents. The generated table of contents will get its hierarchy from the type of header h1

It is possible to set the WordPress post types that will display the Table of Contents from the Plugin settings. It is even possible to display a Table of Contents on a Custom Post Type.

Choose Post Types to Display TOC

You can enable the TOC on all pages automatically and then choose which pages should not have it.

Just find the option Display table-of-contents on given post types in plugin settings. Check the boxes to choose posts or pages, or any other custom objects where you want to display the Table of Contents.

Setting Up TOC In Specific Posts/Pages

Now, you're able to add the Table of Contents to each page or post. Let's navigate to the editing our prepared post and enable it.

Scroll to the bottom of the page - there you will find the metabox called CM Table of Contents - Custom Selectors. You need to turn on the option Enable Table of Contents items on this post/page and save the changes.

Element Selectors

The plugin allows include to the TOC the elements with specific tags, classes and ids instead of the standard heading tags like h1, h2, h3, etc.

It can be specified in general for all TOC, and it can be overridden for each specific post/page.

Global Element Selectors

Global rules for element selectors can be defined in plugin settings - you can specify Tag, Class and Id for each level:

Specific Element Selectors

The custom element selectors can be overridden specifically for each post/page in its metabox CM Table of Contents - Custom Selectors.

Back to the Top Button

To make the user's experience much easier, you can add "Back to the Top Button" to simplify the navigation.

The Back to the Top button is a handy persistent shortcut that quickly takes the user to the top of the page or to the nearest TOC.

It can be enabled in plugin settings.

Floating TOC

The plugin has another option to make the navigation easier for the user - a floating TOC.

This persistent button will be seen while the user navigates through the content.

Floating TOC can be enabled in plugin settings.

Styling

The plugin allows to customize the style of all main elements - Table of Contents, Back to the Top Button, Floating TOC, etc.

General TOC Styling

In plugin settings, you can find lots of options for specifying the style of your Table of Contents:

Back To the Top Button Styling

There is also a set of options for the style customization of Back to the Top Button.

Here are a few examples of how the "Back to the Top Button" can look like:

Floating TOC Styling

And a set of options for the style customization of the Floating TOC.

End Result

Using the CM Table of Contents plugin you can make user's experience much easier by simplifying the navigation on the pages with a lot of information, and make your web-site more attractive.