No products in the cart.
bs TOC
Structure your content with a Table of Contents (TOC) that automatically adds anchor links, allowing smooth scrolling to the content headings.
Contents
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
- Buy plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- Click Activate to use your new Plugin right away.
Shortcode
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"– Onlyh2headingsdepth="2"–h2andh3headingsdepth="3"–h2toh4headingsdepth="4"–h2toh5headingsdepth="5"–h2toh6headings, 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.
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.
Hidden h2
Some text…
Hidden h3
Some text…
Hidden h4
Hidden h5
Hidden h6
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.
Contents
// 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/bs-toc/button/icon', '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);Changelog
- Initial release