How to Create a Dynamic Table of Contents (TOC) for ACF Flexible Content in WordPress

I'm working on a WordPress site where I'm using Advanced Custom Fields (ACF) to create a complex layout for my posts. Specifically, I'm using the ACF Flexible Content field to structure my posts with various layouts, including headings. Here's what I've done so far and where I'm running into difficulties: What I've Done: ACF Setup: I'm using a Flexible Content field in ACF called "Contenu flexible" with the field name contenu_flexible_custom. One of the layouts within this Flexible Content field is titre_h2, which contains the headings I want to include in the Table of Contents (TOC). TOC Attempt: I tried using the block_editor_settings_all filter to generate anchors for the headings automatically in the Gutenberg editor: add_filter( 'block_editor_settings_all', static function( $settings ) { $settings['generateAnchors'] = true; return $settings; } ); However, this didn't seem to work with my ACF Flexible Content setup, as the TOC wasn't generated correctly. Custom PHP Code: I wrote a custom PHP function to loop through the ACF Flexible Content field and manually create a TOC: function generate_acf_flexible_toc() { $toc = '<div class="custom-toc"><h2>Table of Contents</h2><ul>'; $content_found = false; // Check if the flexible content field has rows of data if( have_rows('contenu_flexible_custom') ) { // Loop through the rows of data while ( have_rows('contenu_flexible_custom') ) : the_row(); // Check for the 'titre_h2' layout which contains the headings if( get_row_layout() == 'titre_h2' ) { $heading = get_sub_field('titre_h2'); // Field containing the heading text if ($heading) { // Create a unique ID for each heading $id = sanitize_title($heading); $toc .= '<li><a href="#' . esc_attr($id) . '">' . esc_html($heading) . '</a></li>'; // Output the heading with an ID in the content echo '<h2 id="' . esc_attr($id) . '">' . esc_html($heading) . '</h2>'; $content_found = true; } } endwhile; } $toc .= '</ul></div>'; // Return the TOC only if content is found if ($content_found) { return $toc; } return ''; } function add_acf_flexible_toc_to_content( $content ) { // Only prepend the TOC if it's a standard post if ( is_singular('post') ) { return generate_acf_flexible_toc() . $content; } return $content; } add_filter( 'the_content', 'add_acf_flexible_toc_to_content' ); This function is meant to generate a TOC from the headings in the titre_h2 layout and prepend it to the post content. The Issue: The TOC doesn't seem to generate correctly using the native method or TOC plugins since the headings are part of the ACF Flexible Content and not in the standard post content. I need a solution to dynamically generate a TOC for posts using ACF Flexible Content fields, specifically targeting the titre_h2 layout. What I'm Looking For: Is there a better way to generate a TOC dynamically for ACF Flexible Content fields? How can I ensure the TOC includes headings from specific layouts in my Flexible Content field? Any suggestions or best practices for integrating a TOC with ACF, especially when using custom layouts? Thanks in advance for any help or guidance you can provide!

Comment (0)

You’ll be in good company