Simple but Stylish Table of Contents (TOC) for WordPress Website

To add a collapsible and stylish Table of Contents (TOC) to your WordPress website, you can use PHP and CSS to create a custom TOC. Here’s a basic example that will display a collapsible TOC for your posts or pages.

Step 1: PHP Code for Table of Contents

Add the following PHP code to your theme’s functions.php file. This code will automatically generate a TOC based on the headers (<h2>, <h3>, etc.) within your content:

// Add TOC to posts
function generate_toc($content) {
    if (is_singular() && in_the_loop() && is_main_query()) {
        $matches = [];
        preg_match_all('/<h[2-6][^>]*>(.*?)<\/h[2-6]>/', $content, $matches);

        if (empty($matches[0])) {
            return $content;
        }

        $toc = '<div id="toc-wrapper">';
        $toc .= '<button id="toc-toggle" class="toc-button">Table of Contents</button>';
        $toc .= '<div id="toc-list" class="toc-content"><ul>';

        foreach ($matches[0] as $key => $header) {
            $anchor = 'toc_' . $key;
            $toc .= '<li><a href="#' . $anchor . '">' . strip_tags($header) . '</a></li>';
            $content = str_replace($header, '<span id="' . $anchor . '"></span>' . $header, $content);
        }

        $toc .= '</ul></div></div>';
        $content = $toc . $content;
    }
    return $content;
}

add_filter('the_content', 'generate_toc');

Step 2: Stylish CSS for Collapsible Table of Contents

Next, you’ll need some CSS to style the TOC and make it collapsible. Add the following CSS to your theme’s style.css file or a custom CSS plugin:

/* TOC Container Styling */
#toc-wrapper {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
}

/* TOC Button */
.toc-button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
    text-align: left;
}

.toc-button:hover {
    background-color: #005177;
}

/* TOC List Styling */
#toc-list {
    display: none;
    margin: 0;
    padding: 0;
}

#toc-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#toc-list li {
    margin: 5px 0;
}

#toc-list a {
    text-decoration: none;
    color: #0073aa;
    font-size: 14px;
}

#toc-list a:hover {
    color: #005177;
}

/* Collapsed/Expanded TOC */
#toc-wrapper.collapsed #toc-list {
    display: none;
}
#toc-wrapper.expanded #toc-list {
    display: block;
}

Step 3: JavaScript for Collapsible Functionality

Finally, you’ll need a bit of JavaScript to toggle the collapsible functionality. You can add this JavaScript either by enqueueing a custom script in your theme or adding it directly to the footer.php or using a plugin like “WP Add Custom JavaScript.”

document.addEventListener('DOMContentLoaded', function () {
    var tocToggle = document.getElementById('toc-toggle');
    var tocWrapper = document.getElementById('toc-wrapper');

    tocToggle.addEventListener('click', function () {
        tocWrapper.classList.toggle('expanded');
    });
});

How It Works:

• The PHP function generate_toc searches for headings (h2 to h6) within the post content and creates an anchor-based TOC.
• The CSS styles the TOC and controls its appearance (collapsed by default).
• The JavaScript adds a click event to toggle the visibility of the TOC when the button is clicked.

You can tweak the design and functionality to fit your site’s aesthetics!