You can view the modified TOC using the contextual filters on the right sidebar on desktop, or below this paragraph on mobile devices.

Basic variant:

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

[products ids=”25930″]

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

Target IDs are only added to headings when the shortcode is placed directly in the main content (the_content). This design prevents conflicts with third-party plugins that also modify the_content.

• If the TOC shortcode is added in a widget, via an action hook, or directly inside a template file, no IDs will be added to the headings.
• In these cases, you can insert an additional shortcode directly into the post/page content and hide it with display: none; in CSS. This will ensure that heading IDs are still generated without affecting layout.

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.

• depth="1" – Only h2 headings
• depth="2" – h2 and h3 headings
• depth="3" – h2 to h4 headings
• depth="4" – h2 to h5 headings

[bs-toc depth="1"]

---

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.

[bs-swiper-card type=”post” id=”9318, 9326, 9328, 9405, 21620″]

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 override the default scrolling offset to headings.

// Headings scroll-margin
.entry-content:has(.toc-wrapper) [id] {
  --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

Enable the TOC responsive option 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);

Contextual filters

Filters can be applied conditionally by using the context="" attribute in the shortcode:

[bs-toc context="my-custom-toc"]

Now, filters can be used that only affect TOCs with the context="my-custom-toc" attribute:

/**
 * Enable responsive option for 'my-custom-toc'
 */ 
function enable_custom_toc_responsive_option($enabled) {
  if (!empty($GLOBALS['bs_toc_context']) && $GLOBALS['bs_toc_context'] === 'my-custom-toc') {
    return true;
  }
  return $enabled;
}
add_filter('bootscore/bs-toc/responsive', 'enable_custom_toc_responsive_option');


/**
 * Change 'my-custom-toc' card bg class
 */ 
function change_custom_toc_card_bg($class) {
  if (!empty($GLOBALS['bs_toc_context']) && $GLOBALS['bs_toc_context'] === 'my-custom-toc') {
    return "card card-body bg-danger mb-4";
  }
  return $class;
}
add_filter('bootscore/bs-toc/class/wrapper', 'change_custom_toc_card_bg', 10, 2);

Changelog

Currently bs TOC v2.0.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.