Shortcode output shown at the top of the page

Question

I know this question is similar to other questions that have been posted. I have followed exactly what was suggested in answers to those questions but still can't figure out why the output is shown at the the top of the page.

function foo_shortcode($atts, $content = null) { 

    $datashortcode = '<div>'.(function_exists('rtb_kk') ? rtb_kk() : '').'</div>';

    return $datashortcode; 

}
add_shortcode('showfoo', 'foo_shortcode');

Any idea?

Answer 1

Without knowing how the rtb_kk() function works, I can only assume it uses echo to display content rather than using return. This is what causes the output of that function to appear at the top of the page.

To work around this issue, you can capture the output of the function with ob_start() and ob_get_clean():

function foo_shortcode($atts, $content = null) { 
    if (function_exists('rtb_kk')) {
        // Start output buffering
        ob_start();
        // Run the function
        rtb_kk();
        // Capture buffer as a string
        $output = ob_get_clean();
    } else {
        // Function doesn't exist so we return an empty string
        $output = ''; 
    }

    return '<div>' . $output . '</div>'; 
}
add_shortcode('showfoo', 'foo_shortcode');

Alternative method

If you're able to use the bcn_display() instead of the rtb_kk() method you're using, then there is no need to rely on ob_get_clean().

function foo_shortcode($atts, $content = null) { 
    if (function_exists('bcn_display')) {
        // Return the output as a string so we can control when it's displayed
        $output = bcn_display( true );
    } else {
        // Function doesn't exist so we return an empty string
        $output = ''; 
    }

    return '<div>' . $output . '</div>'; 
}
add_shortcode('showfoo', 'foo_shortcode');