Wordpress using echo vs return in shortcode function

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();}

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 produceoutput of any kind. Shortcode functions should return the text that isto be used to replace the shortcode. Producing the output directlywill 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

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)