shortcode returning at top of page without use of echo

Question

I have a short code which came with a wordpress template, but it always returned data at the top of the page, even though I have typed something above the shortcode. From other questions on the web, I understood this behaviour happens because of the use of the echo statement. Hence, I tried rewriting the function and put everything in $sea_tours_content and then return that variable.

<div>text before</div>
[home_sea_tours_inner showposts="1" category="winter-activities"]
<div>text after</div>

I created the code below, but when I use it, it still puts the short code above the rest of the text. What am I missing?

// Inner Page Sea Tours Shortcode
function travia_home_sea_tours_func_inner( $atts ){
    extract( shortcode_atts( array(
        'category'    =>    '',
        'showposts'   =>    '',
    ),$atts));    
    
    if ( get_query_var('paged') ) { $paged = get_query_var('paged'); }
    elseif ( get_query_var('page') ) { $paged = get_query_var('page'); }
    else { $paged = 1; }
    
    $tours_query = new WP_Query( array(            
        'post_type' => 'tours',
        'posts_per_page' => $showposts,
        'paged' => $paged,
        'order' => 'asc',
        'tax_query' => array( array( 'taxonomy' => 'tours_category', 'terms' => $category, 'field' => 'slug' ))
    ) );
    $n = 0;
    
    
    if( $tours_query->have_posts() ) :
        
        while( $tours_query->have_posts() ) : $tours_query->the_post(); 
        $n++; if( $n%3 == 0 ) $nomargn = ' lastcols'; else $nomargn = '';
        $rating = esc_html( get_post_meta( get_the_ID(), '_tour_rating', true ) );
        $tourprice = get_post_meta( get_the_ID(), 'tourprice', true );
        $days = get_post_meta( get_the_ID(), 'days', true );
        
        if( $rating == 0 ) $rating1 ='<i class="fa fa-star"></i>'; else $rating1 = '';
            if( $rating == 1 ) $rating2 ='<i class="fa fa-star"></i><i class="fa fa-star"></i>'; else $rating2 = '';
            if( $rating == 2 ) $rating3 ='<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>'; else $rating3 = '';
            if( $rating == 3 ) $rating4 ='<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>'; else $rating4 = '';
            if( $rating == 4 ) $rating5 ='<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>'; else $rating5 = '';
        
        if( empty($days) ) $days_info =''; else $days_info ='<i class="fa fa-clock-o" aria-hidden="true"></i>'.$days;
        ?>
        
        <?php
        $sea_tours_content = '';
        $sea_tours_content .= '<div class="tours-list '.$nomargn.'">';
        $sea_tours_content .=       '<div class="tours-thumnailbx">';
        $sea_tours_content .=           the_post_thumbnail();
        $sea_tours_content .=             '<figcaption>';
        $sea_tours_content .=                '<!--<span class="buttonleft"><a class="trigger_popup_fricc">Inquiry</a></span>-->';
        $sea_tours_content .=                 '<span class="buttonright"><a href="'.the_permalink().'" target="_blank">View More</a></span>';
        $sea_tours_content .=                 '<div class="clear"></div>';
                        
        $sea_tours_content .=             '</figcaption>';                                      
        $sea_tours_content .=       '</div>';
        $sea_tours_content .=       '<div class="toursdesbox">';
        $sea_tours_content .=             '<span class="spandate"> '.$days_info.'</span>';
        $sea_tours_content .=             '<span class="spanprice">'.$tourprice.'</span>';
        $sea_tours_content .=             '<div class="clear"></div>';
        $sea_tours_content .=             '<h4><a href="'.the_permalink().'">'.the_title().'</a></h4>';
        $sea_tours_content .=             '<span class="spanrating">';
        $sea_tours_content .=             '</span>';            
        $sea_tours_content .=             content( of_get_option('toursexcerptlength') );
        $sea_tours_content .=       '</div>';
        $sea_tours_content .=   '</div>';
            
        endwhile;                               
        $sea_tours_content .= '<div class="clear"></div>';
        $sea_tours_content .= '<div class="hover_bkgr_fricc">';
        $sea_tours_content .=     '<span class="helper"></span>';
        $sea_tours_content .=     '<div>';
        $sea_tours_content .=         '<div class="popupCloseButton">X</div>';
        $sea_tours_content .=         '<h3>Inquiry Now</h3>';
                
                if( of_get_option('popupform') != '') { $sea_tours_content .= do_shortcode(of_get_option('popupform')); } ;
        $sea_tours_content .=    '</div>';
        $sea_tours_content .= '</div>';

        wp_reset_postdata();        
        else : ;            
        endif; 
    
    return $sea_tours_content;
    
}
add_shortcode( 'home_sea_tours_inner', 'travia_home_sea_tours_func' );

Answer 1

Try ob_start() and ob_get_clean() check the below code.

// Inner Page Sea Tours Shortcode
function travia_home_sea_tours_func_inner( $atts ){

    extract( shortcode_atts( array(
        'category'  => '',
        'showposts' => '',
    ), $atts ) );
    
    if ( get_query_var('paged') ) { 
        $paged = get_query_var('paged'); 
    }elseif ( get_query_var('page') ) { 
        $paged = get_query_var('page'); 
    }else { 
        $paged = 1; 
    }
    
    $tours_query = new WP_Query( array(            
        'post_type'      => 'tours',
        'posts_per_page' => $showposts,
        'paged'          => $paged,
        'order'          => 'asc',
        'tax_query' => array( 
            array( 
                'taxonomy' => 'tours_category', 
                'terms'    => $category, 
                'field'    => 'slug' 
            )
        )
    ) );

    $n = 0;
    
    ob_start();

    if( $tours_query->have_posts() ) {
        
        while( $tours_query->have_posts() ) { $tours_query->the_post(); 

            $n++; 

            if( $n%3 == 0 ) {
                $nomargn = ' lastcols'; 
            }else{
                $nomargn = '';
            }
            
            $rating    = esc_html( get_post_meta( get_the_ID(), '_tour_rating', true ) );
            $tourprice = get_post_meta( get_the_ID(), 'tourprice', true );
            $days      = get_post_meta( get_the_ID(), 'days', true );
        
            if( $rating == 0 ){
                $rating1 = '<i class="fa fa-star"></i>'; 
            }else{ 
                $rating1 = '';
            }
            
            if( $rating == 1 ){
                $rating2 = '<i class="fa fa-star"></i><i class="fa fa-star"></i>'; 
            }else{
                $rating2 = '';
            }
            
            if( $rating == 2 ){ 
                $rating3 = '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>'; 
            }else{
                $rating3 = '';
            }
            
            if( $rating == 3 ){
                $rating4 = '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>'; 
            }else{
                $rating4 = '';
            }
            
            if( $rating == 4 ){
                $rating5 = '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>'; 
            }else{
                $rating5 = '';
            }
        
            if( empty( $days ) ) {
                $days_info = ''; 
            }else{
                $days_info = '<i class="fa fa-clock-o" aria-hidden="true"></i>'.$days; 
            }

            ?>
            <div class="tours-list <?php echo $nomargn; ?>">
                <div class="tours-thumnailbx">
                    <?php echo get_the_post_thumbnail(); ?>
                    <figcaption>
                        <span class="buttonright"><a href="<?php echo get_the_permalink(); ?>" target="_blank">View More</a></span>
                        <div class="clear"></div>            
                    </figcaption>'                        
                </div>
                <div class="toursdesbox">
                    <span class="spandate"><?php echo $days_info; ?></span>
                    <span class="spanprice"><?php echo $tourprice; ?></span>
                    <div class="clear"></div>
                    <h4><a href="<?php echo get_the_permalink(); ?>"><?php echo get_the_title(); ?></a></h4>
                    <span class="spanrating"></span>
                    <?php echo content( of_get_option('toursexcerptlength') ); ?>
                </div>
            </div>

        <?php } wp_reset_postdata(); ?>
        
        <div class="clear"></div>
        <div class="hover_bkgr_fricc">
            <span class="helper"></span>
            <div>
                <div class="popupCloseButton">X</div>
                <h3>Inquiry Now</h3>
                <?php if( of_get_option('popupform') != '' ) {  echo do_shortcode(of_get_option('popupform'));  } ?>
            </div>
        </div>

    <?php }else{ }
    
    $sea_tours_content = ob_get_clean();

    return $sea_tours_content;
    
}
add_shortcode( 'home_sea_tours_inner', 'travia_home_sea_tours_func' );