How to implement TOC

Support
#1

My question is two-fold:

How to implement a Table of Contents in PRO using the PRO editor, for these two cases:

  1. Table of Contents implementation on a single page.
  2. Table of Contents implementation with pagination (as found in shortcakes page).

I found this topic but it doesn’t help me:

Below you may find my page example and necessary data.

#2

Hello @drfretboard,

Thanks for asking. :slight_smile:

You just need to add table of content shortcode in Pro Theme Text element. Please use to shortcode from the demo page. http://demo.theme.co/integrity-1/shortcodes/table-of-contents/2/

A bit old but you can also take a look at following thread for fairly detailed instructions in using table of contents shortcode:

Thanks.

#3

That’s the page I referred to, which I couldn’t apply to my page because:

When testing, I couldn’t get the “next page” html tag to work.
I do not understand why…!!!

Also, how can I ‘bookmark’ any section on a single page like a ‘featured header’ or anything else on a page and jump to that from a toc? Like how it works on wikipedia for example?!

1 Like
#4

Hi,

You can add unique ids to your sections then link to it using this code.

<a href="#intervals">Intervals</a>

Here is another example

https://www.rapidtables.com/web/html/link/html-anchor-link.html#another-page

Hope this helps

1 Like
#5

The location for the html anchor link is clear to me now, very helpful.

BUT:

  1. How to jump to a section on the same page using the TOC shortcodes? I haven’t managed this yet.
  2. Where can I put the <!--nextpage--> code to make it work? I haven’t seen this work on my page yet.

Please provide examples for my page specifically.

#6

Hello There,

Thanks for updating in!

Please understand that TOC shortcode has been removed in the shortcode list and it does not have an element in Cornerstone or in Pro Content Editor because it does not work with the editor.

1.) When using TOC, you will need to use the default WordPress Editor instead. And to jump it to the next page, you will just use the page number.

2.) With the default WordPress editor, you will have to use this structure:

[toc type="left"]
[toc_item title="1. Introduction" page="1"]
[toc_item title="2. More Information" page="2"]
[toc_item title="3. Even More Information" page="3"]
[/toc]

...Content for the first page here...

‹!--nextpage--›

[toc type="left"]
[toc_item title="1. Introduction" page="1"]
[toc_item title="2. More Information" page="2"]
[toc_item title="3. Even More Information" page="3"]
[/toc]

...Content for the second page here...

‹!--nextpage--›

Note: Please do not use this code in a text element within the Pro Content editor or Cornerstone because it will not work. Only use this in the WordPress editor.

Hope this helps.

#7

Thanks for the reply. If I understand correctly, to create a TOC, I will have to use the Wordpress editor, and consequently cannot modify that page with the Pro editor without losing the content I created with the WP editor, so it’s or/or…

Is there a way to simulate a TOC while using the PRO editor or wil the PRO editor work with 3rd party TOC plugins? Because I don’t want to loose the style benefits I get with PRO but still want to implement TOCs on pages.

#8

Hi there,

It’s temporary, please implement it like that for now. This nextpage feature should work in the next version.

Thanks!

#9

Thanks, I’ll wait for that and implement it as soon as it is released.

#10

You’re most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.