Add library to Wordpress website

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:

php
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:

html
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:

/var/www/websites/client0/domain14/web/wp-content/themes/bootstrap-basic/assets/js/main.js
jQuery(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:

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

OptionValueDescription
selectors"h2"Only gather h2 tags
context"#post-content"Where to scan for headings
theme"bootstrap3"Use Bootstrap styling
scrollTo60Offset from top when jumping
smoothScrolltrueAnimate scroll
showAndHidefalseAlways 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:

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;
}

2026Stable CORE

Search form