Wordpress using echo vs return in shortcode function

Question

I noticed both echo and return works fine for displaying content from a shortcode function in wordpress.

function foobar_shortcode($atts) {
    echo "Foo Bar"; //this works fine
}

function foobar_shortcode($atts) {
    return "Foo Bar"; //so does this
}

Is there any difference between using either of these? If yes, what's the recommended approach for wordpress? I normally use echo in this case - is this okay?

Answer 1

Echo may work in your specific case but you definitely shouldn't use it. Shortcodes aren't meant to output anything, they should only return content.

Here's a note from the codex on shortcodes:

Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results.

http://codex.wordpress.org/Function_Reference/add_shortcode#Notes

Output Buffering

Sometimes you're faced with a situation where output becomes difficult or cumbersome to avoid. You may for example need to call a function to generate some markup within your shortcode callback. If that function were to output directly rather than return a value, you can use a technique known as output buffering to handle it.

Output buffering will allow you to capture any output generated by your code and copy it to a string.

Start a buffer with ob_start() and make sure to grab the contents and delete it when you're finished, ob_get_clean(). Any output appearing between the two functions will be written to the internal buffer.

Example:

function foobar_shortcode( $atts ) {
    ob_start();

    // any output after ob_start() will be stored in an internal buffer...
    example_function_that_generates_output();

    // example from original question - use of echo
    echo 'Foo Bar';

    // we can even close / reopen our PHP tags to directly insert HTML.
    ?>
        <p>Hello World</p>
    <?php

    // return the buffer contents and delete
    return ob_get_clean();
}
add_shortcode( 'foobar', 'foobar_shortcode' );

https://www.php.net/manual/en/function.ob-start.php

Answer 2

If you are outputting a lot of contents, then you should use:

add_shortcode('test', 'test_func');

function test_func( $args ) {
  ob_start();
  ?> 
  <!-- your contents/html/(maybe in separate file to include) code etc --> 
  <?php

  return ob_get_clean();
}

Answer 3

If you use "echo" in the shortcode, the information will show up wherever the shortcode is processed, which isn't necessarily where you actually added the shortcode. If you use "return", the information will return exactly where you added the shortcode within the page.

For example, if you have an image, then shortcode, then text:
Echo: will output above the image
Return: will output after the image and before the text (where you actually added the shortcode)

Answer 4

I would use:

function foobar_shortcode($atts) {
    return "Foo Bar"; //so does this
}

It is easier when you're doing things like:

$output = '<div class="container">' . do_shortcode('foobar') . '</div>';
echo $ouput;

Later on..

Answer 5

The difference is that echo sends the text directly to the page without the function needing to end. return both ends the function and sends the text back to the function call.

For echo:

function foobar_shortcode($atts) {
    echo "Foo"; // "Foo" is echoed to the page
    echo "Bar"; // "Bar" is echoed to the page
}
$var = foobar_shortcode() // $var has a value of NULL

For return:

function foobar_shortcode($atts) {
    return "Foo"; // "Foo" is returned, terminating the function
    echo "Bar"; // This line is never reached
}
$var = foobar_shortcode() // $var has a value of "Foo"

Answer 6

Its not that echo and return are the same thing.. it's just that once the echo completes in your first function there is nothing left to do... so it returns..

In the second fx your are explicitly exiting the function and returning the value back to the calling function.