Structure your content with a Table of Contents (TOC) that automatically adds anchor links, allowing smooth scrolling to the content headings.

How it works

The bs TOC plugin adds a Table of Contents as unstyled nested uls, wrapped in a card to the page content via shortcode. It automatically links to all h2 to h6 headings, with options to control the depth and remove unwanted headings. Filters are available to enable responsive options and allow the TOC to be fully customized.

Installation

1. Buy plugin
2. In your admin panel, go to Plugins > and click the Add New button.
3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
4. Click Activate to use your new Plugin right away.

Shortcode

The shortcode must be added directly to the content of a page, post, or custom post type. If the shortcode is added in a widget area, via an action hook, or directly in a template file, an additional filter is required to ensure that IDs are added to the headings.

Basic shortcode to display the TOC in content, linking all h2 to h6 headings.

[bs-toc]

Depth

Use depth="" in the shortcode to control the depth of linked headings in the TOC.

[bs-toc depth="2"]

• depth="1" – Only h2 headings
• depth="2" – h2 and h3 headings
• depth="3" – h2 to h4 headings
• depth="4" – h2 to h5 headings
• depth="5" – h2 to h6 headings, same as basic [bs-toc] shortcode.

Hide links to headings

While links to h1 and headings from external content are always hidden in the TOC, you have the option to selectively hide unwanted links by using a class.

Heading h1

The h1 is not shown in the TOC because it represents the site title and should only be used once at the top of the page for SEO reason.

External content

Links to headings that are not part of the content are always hidden in the TOC.

Equal Height

Swiper Post 1

April 1, 2018 / August 18, 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Lorem

Equal Height

Swiper Post 2

March 1, 2018 / January 26, 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 3

February 1, 2018 / August 18, 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Ipsum

Equal Height

Swiper Post 4

January 1, 2018 / January 26, 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

Equal Height

Swiper Post 5

January 1, 2018 / November 27, 2023 by Basti

Just another post to demonstrate the swiper hero

Read more »

By class

Remove unwanted links to the headings in the TOC by adding the class bs-toc-hide to a single heading or by grouping multiple headings in a div with the class bs-toc-hide.

Hidden h4

This heading link is hidden in the TOC, because it has class bs-toc-hide.

Multiple unwanted headings can be grouped in a div with the class bs-toc-hide.

Headings with special characters

The TOC functions well with all languages and supports special characters.

Heading with HTML

标题为中文

หัวข้อภาษาไทย

العنوان باللغة العربية

Заголовок українською мовою

Duplicate headings

If headings have the same names, an unique ID is added to each item to link correctly to the anchor in the TOC.

Duplicate heading

Duplicate heading

SCSS

Modify the scroll offset or add counters in the child theme’s /assets/scss/_bootscore-custom.scss file.

Scroll-margin

Use CSS scroll-margin to adjust the scrolling offset to headings.

// Headings scroll-margin
.entry-content:has(.toc-wrapper) {

  h2,
  h3,
  h4,
  h5,
  h6 {
    scroll-margin-top: 70px;
  }
}

Numbered items

Use CSS counters to get numbered TOC items.

// Numbered TOC items
.toc-list-wrapper ul {
  counter-reset: item;

  li a:before {
    counter-increment: item;
    content: counter(item)". ";
  }

  ul li a:before {
    content: counters(item, ".") " ";
  }
}

Filters

Each element has a filter, allowing the TOC to be fully customized. Modify classes, texts, and icon, or make the TOC responsive by adding small functions to the child theme’s functions.php file.

Responsive option

Make the TOC responsive using the built-in navbar-expand-{breakpoint} collapse plugin. The default breakpoint is lg.

Shrink browser window to <lg size.

Enable responsive TOC

/**
 * Enable responsive TOC
 */
add_filter('bootscore/bs-toc/responsive', '__return_true');

Change breakpoint

/**
 * Change TOC responsive breakpoint class
 */ 
function toc_breakpoint_class() {
  return "xl";
}
add_filter('bootscore/bs-toc/class/breakpoint', 'toc_breakpoint_class', 10, 2);

Button class

/**
 * Change TOC responsive button class
 */ 
function toc_button_class() {
  return "btn btn-lg btn-danger mb-3 d-flex align-items-center justify-content-between w-100";
}
add_filter('bootscore/bs-toc/class/button', 'toc_button_class', 10, 2);

Button text

/**
 * Change TOC responsive button text
 */ 
function toc_button_text() {
  return "My TOC text";
}
add_filter('bootscore/bs-toc/button/text', 'toc_button_text', 10, 2);

Button icon

/**
 * Change TOC responsive button icon
 */ 
function toc_button_icon() {
  return '<i class="fa-solid fa-list"></i>';
}
add_filter('bootscore/icon/bars-staggered', 'toc_button_icon', 10, 2);

TOC

Modify each class to fully customize the appearance of the TOC.

Title text

/**
 * Change TOC title text
 */ 
function toc_title_text() {
  return "Site content";
}
add_filter('bootscore/bs-toc/title', 'toc_title_text', 10, 2);

Wrapper class

/**
 * Change TOC card wrapper class
 */ 
function toc_wrapper_class() {
  return "card w-100 mb-4";
}
add_filter('bootscore/bs-toc/class/wrapper', 'toc_wrapper_class', 10, 2);

Header class

/**
 * Change TOC header class
 */ 
function toc_header_class() {
  return "card-header";
}
add_filter('bootscore/bs-toc/class/header', 'toc_header_class', 10, 2);

Title class

/**
 * Change TOC title class
 */ 
function toc_title_class() {
  return "h6 mb-0";
}
add_filter('bootscore/bs-toc/class/header/title', 'toc_title_class', 10, 2);

List wrapper class

/**
 * Change TOC list wrapper class
 */ 
function toc_list_wrapper_class() {
  return "card-body";
}
add_filter('bootscore/bs-toc/class/list/wrapper', 'toc_list_wrapper_class', 10, 2);

List class

/**
 * Change TOC list class
 */ 
function toc_list_class() {
  return "list-unstyled mb-0";
}
add_filter('bootscore/bs-toc/class/list', 'toc_list_class', 10, 2);

Nested list class

/**
 * Change TOC nested list class
 */ 
function toc_list_nested_class() {
  return "list-unstyled ms-2";
}
add_filter('bootscore/bs-toc/class/list/nested', 'toc_list_nested_class', 10, 2);

List item class

/**
 * Change TOC list item class
 */ 
function toc_list_item_class() {
  return "my-class";
}
add_filter('bootscore/bs-toc/class/list/item', 'toc_list_item_class', 10, 2);

Item link class

/**
 * Change TOC list item link class
 */ 
function toc_list_item_link_class() {
  return "text-decoration-none link-secondary";
}
add_filter('bootscore/bs-toc/class/list/item/link', 'toc_list_item_link_class', 10, 2);

Enable adding IDs to all headings

If the TOC shortcode is not added to the content – such as in a widget, via an action hook, or directly in a template file – IDs will not be added to the headings. Use a filter to ensure IDs are added to headings regardless of whether the TOC shortcode is present in the content.

/**
 * Enable adding IDs to all headings
 */
add_filter('bootscore/bs-toc/add-ids-to-all-headings', '__return_true');

Changelog

Currently bs TOC v1.1.0

A detailed changelog can be found in the plugin’s readme.txt file. It can also be accessed in the WordPress backend by navigating to Plugins > bs TOC > View details > Changelog tab.