Wordpress Shortcode loads at the top

Question

I tried all solutions of the topics here but I haven't been able to find a solution. I made a Plugin for a Shortcode. My problem is that the plugin code get always loaded above the content. I already found out that it comes from the use of echo. Instead I should use return. But as soon I replace the echo the plugin stops working! ;(

It would be great if someone could help me.

Thank you!

function sublime_video_playlist() {
wp_enqueue_script('sublime_video', '' .plugins_url( '/js/sublime_playlist.js' , __FILE__ ). '');

global $post;

$attachments = get_children( array(
                'post_parent'    => $pageChild->ID,
                'post_type'      => 'attachment',
                'numberposts'    => 1, // show all -1
                'post_status'    => 'inherit',
                'post_mime_type' => 'video',
                'order'          => 'ASC',
                'orderby'        => 'menu_order ASC'
                ) );


if ( $attachments ) {

  echo '<div class="sp shadow"><img src="/content/themes/maxx-wp/images/large-seperator.png"></div>';
  echo '<h3>Videos</h3>';

  echo '<div id="playlist1" class="sv_playlist">';

  $args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'video',
    'numberposts' => null,
    'post_status' => null,
    'orderby' => 'title',
    'post_parent'    => $post->ID
);

$attachments = get_posts($args);

if ($attachments) {
    foreach ($attachments as $attachment) {
        echo '<div class="video_wrap">';
        echo '<video width="568" height="320" id="video';
        echo $attachment->ID;
        echo '" data-settings="autoresize:fit" poster="';
        echo '" preload="true">';
        echo '<source src="';
        echo wp_get_attachment_url ($attachment->ID);
        echo '" /></video>';
        echo '</div>';

    }

    echo '<ul class="thumbs">';

$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'video',
    'numberposts' => null,
    'post_status' => null,
     'orderby' => 'title',
    'post_parent' => $post->ID
); 
$attachments = get_posts($args);

if ($attachments) {
    foreach ($attachments as $attachment) {
        echo '<li style="padding:0px;" id="thumbnail_video';
        echo $attachment->ID;
        echo '">  <a href=" "> <img style="height:100%" alt="" src="';
        echo wp_get_attachment_url( get_post_thumbnail_id($post->ID));
        echo '" width="144" height="71" /> <span class="play" /> </a> </li>';

}
} 

    echo '</ul></div>   

 <div style="margin-bottom: -19px; float:right">'; 
            if(function_exists('render_tnwsc_button')) {
                echo render_tnwsc_button();
            }
    echo '</div>';

}
}
}
add_shortcode('video_playlist', 'sublime_video_playlist');  ?>

Answer 1

First, declare your variable:

$return = '';

Then, throughout the code, concatenate items:

$return .=  '<div class="sp shadow"><img src="..."></div>';
$return .=  '<h3>Videos</h3>';

And finally, return the result:

return $return;

Answer 2

In your case it would be better to leave the echo and use output buffering.

Add ob_start(); to the first line of the function.

at the end of the function add

$output = ob_get_clean();
return $output;

Also you can't enqueue a script from a shortcode. It runs to late and will never get loaded. Just create a function that gets added to the wp_enqueue_scripts hook. If you don't want the script to load on each page add a conditional that checks for shortcode found.

function c3m_find_short_code( $shortcode ) {
    if ( ! is_singular() )
        return false;

    $post_to_check = get_post( get_the_ID() );
    if ( stripos( $post_to_check->post_content, '[' . $shortcode ) !== false )
        return true;

    return false;
}


function my_shortcode_enqueue() {
    if ( c3m_find_short_code( 'shortcode_name_here' );
        wp_enqueue_script( 'blah', '/path_to_blah.js' );
}

add_action( 'wp_enqueue_scripts', 'my_shortcode_enqueue' );