With an example of adding Tocify.js...
Bootstrap Basic theme
Here's how to add jquery.tocify.js to a WordPress site with Bootstrap to generate a TOC from h2 elements:
1. Download the Library
Get jquery.tocify.js from GitHub: 👉 https://github.com/gfranko/jquery.tocify.js
Place these files in your theme folder, e.g.:
cd /var/www/websites/client0/domain14/web/wp-content/themes/bootstrap-basic
git clone https://github.com/gfranko/jquery.tocify.js.git
/wp-content/themes/bootstrap-basic/jquery.tocify.js/src/javascripts/jquery.tocify.min.js /wp-content/themes/bootstrap-basic/jquery.tocify.js/src/stylesheets/jquery.tocify.css
2. Enqueue the Scripts in functions.php
Open your theme's functions.php and add:
function my_theme_enqueue_tocify() {
// jQuery UI (required by tocify) - WordPress ships with it
wp_enqueue_script('jquery-ui-sortable');
// Tocify JS
wp_enqueue_script(
'tocify',
get_template_directory_uri() . '/jquery.tocify.js/src/javascripts/jquery.tocify.min.js',
array('jquery', 'jquery-ui-sortable'), // dependencies
'1.9.0',
true // load in footer
);
// Tocify CSS
wp_enqueue_style(
'tocify-css',
get_template_directory_uri() . '/jquery.tocify.js/src/stylesheets/jquery.tocify.css'
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_tocify');3. Add the TOC Container in Your Template
In your sidebar-right.php (or whichever template shows the content), add a container where the TOC will render — typically in a sidebar or above the content:
if (is_active_sidebar('sidebar-right')) {
?>
<div class="col-md-3" id="sidebar-right">
<?php do_action('before_sidebar'); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound ?>
<?php dynamic_sidebar('sidebar-right'); ?>
<div id="toc"></div> <!-- TOC renders here -->
</div>
<?php
}
4. Initialize Tocify (only h2 elements)
Add this script to your theme's js/main.js (already enqueued), or inline at the bottom of single.php:
js/main.jsjQuery(document).ready(function($) {
$("#toc").tocify({
context: ".entry-content", // where to look for headings
selectors: "h2", // only collect h2 elements
theme: "bootstrap3", // matches Bootstrap styling
scrollTo: 60, // offset for fixed navbar (adjust as needed)
extendPage: false,
hashGenerator: "pretty",
smoothScroll: true
});
});5. Optional — Style the TOC with Bootstrap
Tocify works well with Bootstrap's nav classes. You can override its default styles in your style.css:
/* Make TOC sticky on scroll */
#toc {
position: sticky;
top: 80px; /* adjust for your navbar height */
}
/* Optional: add a title above it */
#toc::before {
content: "Table of Contents";
font-weight: bold;
display: block;
margin-bottom: 10px;
}Key tocify Options Reference
| Option | Value | Description |
|---|---|---|
selectors | "h2" | Only gather h2 tags |
context | "#post-content" | Where to scan for headings |
theme | "bootstrap3" | Use Bootstrap styling |
scrollTo | 60 | Offset from top when jumping |
smoothScroll | true | Animate scroll |
showAndHide | false | Always show all items |
5. Optional — Style the TOC with Bootstrap
Tocify works well with Bootstrap's nav classes. You can override its default styles in your style.css:
/* Make TOC sticky on scroll */
#toc {
position: sticky;
top: 80px; /* adjust for your navbar height */
}
/* Optional: add a title above it */
#toc::before {
content: "Table of Contents";
font-weight: bold;
display: block;
margin-bottom: 10px;
}/* Make TOC sticky on scroll */
#toc {
position: sticky !important;
top: 80px; /* adjust for your navbar height */
max-height: calc(100vh - 100px);
overflow-y: auto;
z-index: 100;
}
/* Make columns equal height so sticky has full page room */
.row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
/* Sidebar stretches to full row height */
#sidebar-right {
align-self: stretch;
}
/* !!! End of Sticky **/
/* Optional: add a title above it */
/**
#toc::before {
content: "목차";
font-weight: bold;
display: block;
margin-bottom: 10px;
}
*/
.tocify-header > .tocify-focus > a, .tocify-header > .tocify-focus > a:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.tocify-header .tocify-hover a {
text-decoration: none;
}
.tocify-item.tocify-focus {
background-color: #0088cc;
}
.tocify-item.tocify-focus > a {
color: white;
}
.tocify-header > .tocify-item:hover, .tocify-header .tocify-hover {
text-decoration: none;
background-color: #eeeeee;
}
.tocify-header .tocify-hover {
color: #0088cc;
}
.tocify-item.active {
/* background: aliceblue; */
background-color: #0088cc;
}
.tocify-item.active a {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.tocify-header .tocify-item a:hover {
color:#0088cc;
}
.tocify-header {
font-size: 1.3em;
}
.tocify-item.active {
font-size: 0.9em;
}
.tocify-subheader > .tocify-item {
font-size: 0.8em;
}