A table of contents for WordPress posts and articles is a clever thing. Visitors have a quick overview, SEO benefits and chic design really enhance your post!
Table of Contents
It is simply too cumbersome to create a new table of contents in every post or to update it when changes occur. Installing a plugin for such a “little thing” is also not a good solution, as it only slows down the site and – as you will see in a moment – you can easily code it yourself.
If you have little or no programming experience, you can still use this table of contents. This is no problem! If there are any questions left, I can also try to help you with the comments.
This is what our end result will look like:
The complete code is programmed by myself and may be used free of charge for any purpose (also commercial) and may be modified as desired!
Step 1: Generate table of contents (PHP script)
For inexperienced programmers: In the backend menu (left margin) there is an item “Appearance”. Navigate there to the submenu item “Theme Editor” and then select the “Theme Functions” (functions.php) on the right side under “Theme Files”. There you can scroll to the very end and after the last line of code insert 2-3 empty lines and then insert and save the PHP code below 1:1.
For experienced programmers: This code must be included in the functions.php of the used theme (if used in the child theme).
If you want the table of contents to automatically display on all your content without using a shortcode, you can modify the code as follows:
Automatic Table of content before FIRST PARAGRAPH
function generate_toc($content) {
$pattern = ‘/if (empty($matches[0])) { return $content; } $toc = '<div class="table-of-contents">'; $toc .= '<h2>Table of Contents</h2>'; $toc .= '<ul>'; foreach ($matches[1] as $index => $level) { $id = 'toc-' . sanitize_title($matches[2][$index]); $title = strip_tags($matches[2][$index]); $toc .= '<li class="toc-level-' . $level . '"><a href="#' . $id . '">' . $title . '</a></li>'; $content = str_replace($matches[0][$index], '<h' . $level . ' id="' . $id . '">' . $matches[2][$index] . '</h' . $level . '>', $content); } $toc .= '</ul>'; $toc .= '</div>'; $content = $toc . $content; return $content;
}
add_filter(‘the_content’, ‘generate_toc’);
Automatic Table of content After FIRST PARAGRAPH
If you want the table of contents to display after the first paragraph in your content, you can use the following code:
function generate_toc($content) {
$pattern = ‘/if (empty($matches[0])) { return $content; } $toc = '<div class="table-of-contents">'; $toc .= '<h2>Table of Contents</h2>'; $toc .= '<ul>'; foreach ($matches[1] as $index => $level) { $id = 'toc-' . sanitize_title($matches[2][$index]); $title = strip_tags($matches[2][$index]); $toc .= '<li class="toc-level-' . $level . '"><a href="#' . $id . '">' . $title . '</a></li>'; $content = str_replace($matches[0][$index], '<h' . $level . ' id="' . $id . '">' . $matches[2][$index] . '</h' . $level . '>', $content); } $toc .= '</ul>'; $toc .= '</div>'; // Find the position of the first paragraph $first_paragraph_position = strpos($content, '<p>'); if ($first_paragraph_position !== false) { // Insert the table of contents after the first paragraph $content = substr_replace($content, $toc, $first_paragraph_position + 3, 0); } else { // If no paragraph is found, simply prepend the TOC $content = $toc . $content; } return $content;
}
add_filter(‘the_content’, ‘generate_toc’);
This code will insert the table of contents after the first paragraph of your content. If no paragraphs are found, it will simply prepend the table of contents at the beginning of your content.
Table of Content with Toggle
To add a toggle button for displaying and hiding the automatic table of contents, you can use JavaScript and a bit of HTML in addition to the existing code. Here’s an example of how to do it:
First, modify your PHP code to add a toggle button:
function generate_toc($content) {
$pattern = ‘/if (empty($matches[0])) { return $content; } $toc = '<div class="table-of-contents">'; $toc .= '<h2>Table of Contents</h2>'; $toc .= '<ul>'; foreach ($matches[1] as $index => $level) { $id = 'toc-' . sanitize_title($matches[2][$index]); $title = strip_tags($matches[2][$index]); $toc .= '<li class="toc-level-' . $level . '"><a href="#' . $id . '">' . $title . '</a></li>'; $content = str_replace($matches[0][$index], '<h' . $level . ' id="' . $id . '">' . $matches[2][$index] . '</h' . $level . '>', $content); } $toc .= '</ul>'; $toc .= '</div>'; // Find the position of the first paragraph $first_paragraph_position = strpos($content, '<p>'); if ($first_paragraph_position !== false) { // Insert the table of contents after the first paragraph $content = substr_replace($content, $toc, $first_paragraph_position + 3, 0); } else { // If no paragraph is found, simply prepend the TOC $content = $toc . $content; } // Add a toggle button $content .= '<div id="toc-toggle" class="toc-toggle">Toggle Table of Contents</div>'; return $content;
}
Now, add the JavaScript to make the toggle button work:
Finally, add some CSS to hide the table of contents by default and show it when the toggle button is clicked:
/* Add this CSS to your theme’s style.css or a custom CSS file */
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li::before {
content: “✅”;
margin-right: 5px;
}
.toc-hidden {
display: none;
}
.toc-toggle {
cursor: pointer;
text-decoration: underline;
}
This code will hide the table of contents by default and allow users to toggle it on and off with the “Toggle Table of Contents” button.
Conclusion
With this code, the table of contents will be automatically displayed on all your content pages that contain headings (h1 to h6). It uses the add_filter function to add the TOC to the content of your pages and posts automatically.
For more such interesting article like this, app/softwares, games, Gadget Reviews, comparisons, troubleshooting guides, listicles, and tips & tricks related to Windows, Android, iOS, and macOS, follow us on Google News, Facebook, Instagram, Twitter, YouTube, and Pinterest.
