CM Table of Contents (CMTOC) - Use Case - How to Create a Table of Content for Articles on Your Site

Use Case - How to create a table of content for articles on your site

Back to User Guides

Note: This guide requires:

Video Use-Case

Introduction

The CM Table of Contents plugin is one of the best table of contents WordPress plugins. It helps users easily navigate your WordPress posts. The TOC plugin can automatically generate and insert an easy to use, user friendly navigation section to the post headers.

Bloggers can also easily generate a Table of contents to their blogs/blog posts with this plugin. The index makes reader's life much easier as they can simply click on the headings to be taken to the content.

Use Case Front-End

Use Case Assumptions

In this use case you will get to know how create a table of content for the article on your site.

We consider that you have already bought the plugin, but not installed it. 

It follows:

Installing The Plugin

The process is the same for all CM plugins and add-ons.

  • Download the add-on from your customer dashboard
  • Log in to WordPress and navigate to the WordPress Admin  → Plugins settings.
  • Click on Add New
  • Activate it and add the license

Learn more: Getting Started - Plugin Overview

Choose Post Types to Display the 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 < h2 < h3 etc.

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.

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

Navigate to Admin Dashboard → CM Table of Contents Pro → Settings → General Settings → Display Settings section. There you can see the option Display table-of-contents on given post types. Check the boxes to choose posts or pages, or any other custom objects where you want to display the Table of Contents. 

Scroll to the bottom of the page and click  Save Changes to save your changes. Or you can use the following floating window for saving the changes:

You can also use this floating window to toggle all sections in Settings.

Adding Tables of Contents to 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 enable the option Search for Table of Contents items on this post/page.

Then you need just click the Update button on the top of the page (or the Publish button, if you have just created the post):

Result

The plugin automatically detected all standard headings in the content and generated the Table of Contents.

TIP 1: Auto-adding TOC

You can enable the Table of Contents for all chosen posts/pages at once automatically. To do this navigate to  Admin Dashboard → CM Table of Contents Pro → Settings → General Settings → Display Settings section and enable the option Auto-parse content of each post/page. 

It means that the table of contents will be turned on by default on all posts/pages. If you don't need TOC on some posts/pages - you can disable them manually.

TIP 2: Change the name of TOC

You can change the standard name of the Table of Contents:

Navigate to  Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents → Title Style section and change the name in the Title text field.

Result:

Learn more about basic functionality: CM Table of Contents (CMTOC) - Getting Started - Basic Functionality

Manually Placing Table of Contents Using the Shortcode

By default the Table of contents is placed at the very top of the Page or Post where it is displayed. There are some cases when you might prefer to place it somewhere else on the page as well as or instead of at the top. To do this you can use the following shortcode: [cmtoc_table_of_contents]

TIP: Disable default TOC placing at the top

You can always disable automatic display of the TOC at the top of the content using the respective option in the  CM Table of Content - Custom Selectors zone, and put the TOC only in the places you want to using the shortcode.

Although placing this shortcode in the content using the Visual editor will normally work it is advisable to switch to the plain Code editor before attempting to use this.

For example, we want to put the Table of Contents under every chapter title. Here's how we can do it:

The same we can do for every chapter title. And don't forget to click the Update button to save the changes.

Result

Style

There are a lot of settings for changing the style of Table of Contents. In this use case we'll consider just a few of them, but you can find much more information about the styling in our detailed guides:

General Styling

We can change the style of appearance of the Table of Contents. Navigate to  Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents → General Styling section.

Let's add the border for the Table of Contents and change the background color. Note: the size of the border width must be set in px format, for example: 1px.

And let's change the color and font style. Navigate to the  Elements Styling section.

As in our example we don't have any sub-levels in the Table of Contents, it's enough to change the settings only for Level 1:

After changing the settings click the Save Changes button to save the result.

Result

Add "Back to the Top" Button

To make the user's experience much easier we can add Back to the Top Button to simplify navigation. Navigate to  Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents → Back to the Top Button section.

The Back to the Top button is a handy persistent shortcut that quickly takes the user to the top of the page. To enable it check the Show button option, and then click the button Save Changes.

There are a lot of more options for the style customization of Back to the Top Button. Learn more about it in our detailed guide: CM Table of Contents (CMTOC) - How To - Add "Back to the Top" Button

Result

Back to the top Button is located on the right bottom corner.

Floating TOC

The plugin has another option to make the navigation easier for the user - a floating TOC option. This persistent button will be seen while the user navigates the content. 

To enable it navigate to  Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents → Floating TOC section.

To enable floating TOC enable the option Show button, and then click the button Save Changes.

There are a lot of more options for the style customization of Floating TOC. Learn more about it in our detailed guide: CM Table of Contents (CMTOC) - Style - Modifying TOC Button (Floating TOC, Show/Hide)

Result

End Result

In result we have created the Table of Contents that can be visible at the beginning of the page and easily accessible at any point of the page, so the user can navigate through the content without any difficulties.

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.

Use Case Front-End


More information about the  CM Table of Contents (CMTOC) WordPress  Plugin

Other WordPress products can be found at  CreativeMinds WordPress Store

Let us know how we can  Improve this Product Documentation Page 

To open a  Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Support Documents