Adding to the_content or a variable from within a shortcode function

Question

I've created a custom shortcode to add pop-up definitions to selected vocabulary terms. The shortcode looks like this:

[glossary term="data breach"]data breaches[/glossary]

The function searches posts in a custom post type called 'glossary-term' for the term's definition, prints it in a div, and turns the enclosed text into a link to that div:

function glossary_shortcode( $atts = array(), $shortcode_content = null ) {
    
    // parameters
    extract(shortcode_atts(array(
        'term' => null
    ), $atts));
    
    $glossary_term_object = get_page_by_title($term, 'OBJECT', 'glossary-term');

   // print definition in popup div
    echo '<div id="glossary-popup-' . $glossary_term_object->post_name . '" class="glossary_popup"><h4>' . $glossary_term_object->post_title . '</h4>' . wpautop( $glossary_term_object->post_content ) . '<div class="ctas"><a href="">Visit Glossary</a><a href="#">Close</a></div></div>';

    // return link to definition popup
    return '<a href="#glossary-popup-' . $glossary_term_object->post_name . '">' . $shortcode_content . '</a>';
    
}

add_shortcode('glossary', 'glossary_shortcode');

Rather than echo the definition pop-up, I'd like to have all the definitions created by this shortcode (which may be used several times on a page) collected into their own div at the end of the main page content.

Any ideas how to accomplish this?

Answer 1

I think, I would simply store all the definitions during the glossary_shortcode() execution in a global variable and serve them at the end of some hook like the_content.

function glossary_shortcode( $atts = array(), $shortcode_content = null ) {
    // Your code can be kept identical, just store the $glossary_term_object somewhere.

    global $glossaries;
    $glossaries = $glossaries ?? [];
    $glossaries[] = glossary_term_object;
}

add_filter( 'the_content', function ( $content ) {
 
    global $glossaries;
    if ( !empty( $glossaries ) ) {
        echo '<ul class="glossary">';

        foreach ( $glossaries as $glossary ) {
                printf( '<li><a href="%s" target="_blank">%s : %s</a></li>',
                        get_the_permalink( $glossary ),
                        $glossary->post_title,
                        $glossary->post_content
                );
        }

        echo '</ul>';
    }
 
    return $content;
}

Answer 2

Here's the solution, h/t to Tim who got me 95% of the way there.

// Shortcode function
function glossary_shortcode( $atts = array(), $shortcode_content = null ) {
    
    // Parameters: determine what post we're looking for
    extract(shortcode_atts(array(
        'term' => null
    ), $atts));
    
    // Get requested post
    $glossary_term_object = get_page_by_title($term, 'OBJECT', 'glossary-term');
   
    // Add post to global variable
    global $glossaries;
    $glossaries = $glossaries ?? [];
    $glossaries[] = $glossary_term_object;
    
    // Link to the list item we'll build below.
    return '<a class="glossary-link toggle" href="#glossary-popup-' . $glossary_term_object->post_name . '">' . $shortcode_content . '</a>';
    
}

// Register shortcode
add_shortcode('glossary', 'glossary_shortcode');


// Build our list of definitions. Set priority at 11+ or global variable will be empty.
add_filter( 'the_content', function ( $content ) {
 
    // Retrieve posts assembled above
    global $glossaries;
    if ( !empty( $glossaries ) ) {
        
        $page_glossary = '';
        
        // Format our posts content as a list of definitions
        foreach ($glossaries as $glossary) {
            
            $page_glossary .= '<li id="glossary-popup-' . $glossary->post_name . '" class="glossary_popup"><h4>' . $glossary->post_title . '</h4>' . wpautop( $glossary->post_content ) . '<div class="ctas"><a href="">Visit Glossary</a><a class="close" href="#glossary-popup-' . $glossary->post_name . '">Close</a></div></li>';
            
        }
        
        // Add the list to the end of the current post's content
        $content .= '<section id="page-glossary"><ul>' . $page_glossary . '</ul></section>';
    }
 
    return $content;
    
}, 11 );