Table of content for blogs

Hi,
If your blog posts are created with the Advanced Layout Builder then you can add the Widget Area element to your page and select your widget area, or a custom widget area with the TOC widget.
If you are using the default editor for your posts then you can add this script to your child theme functions.php:

function custom_toc_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    htmlTableOfContents();
} );                        

function htmlTableOfContents( documentRef ) {
    var documentRef = documentRef || document;
    var toc = documentRef.getElementById("toc");
	var content = document.querySelector(".single-post .entry-content"); 
	var headings = content ? [].slice.call(content.querySelectorAll( "h1, h2, h3, h4, h5, h6")) : []
    headings.forEach(function (heading, index) {
        var ref = "toc" + index;
        if ( heading.hasAttribute( "id" ) ) 
            ref = heading.getAttribute( "id" );
        else
            heading.setAttribute( "id", ref );

        var link = documentRef.createElement( "a" );
        link.setAttribute( "href", "#"+ ref );
        link.textContent = heading.textContent;

        var div = documentRef.createElement( "div" );
        div.setAttribute( "class", heading.tagName.toLowerCase() );
        div.appendChild( link );
        toc.appendChild( div );
    });
}

try {
    module.exports = htmlTableOfContents;
} catch (e) {
    // module.exports is not defined
}
	  </script>
  <?php
}
add_action('wp_footer', 'custom_toc_script');

Then you need to add the TOC div to your post with this: <div id="toc"></div>
If you are using the RankMath plugin and the Block Editor it will also add a TOC, otherwise there are many plugins that will offer more TOC options.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike