How to rewrite an echo function to a return value for a Wordpress theme

Question

I am new to PHP and I am glad that I have written the following function (which works as it should) on my own so far:

function get_latest_posts() {
    
    echo '<div class="latest-posts">';
        echo '<div class="brick_list">';

            $args = array(
                post_type => 'post',
                posts_per_page => 3
            );

            $latestposts_query = new WP_Query($args);

            if ( $latestposts_query->have_posts() ) : while ( $latestposts_query->have_posts() ) : $latestposts_query->the_post(); 
                
                echo ' <div ';
                    post_class("brick_item" . $termString );
                echo ' onclick="location.href=\'';
                    the_permalink();
                echo ' \'"> ';

                    echo ' <div class="brick_item-image"> ';
                        if ( has_category( 'sample' ) ) {
                            echo ' <img src="/wp-content/uploads/placeholder_1.png" /> ';                        
                        } elseif ( has_post_thumbnail() ) {
                            the_post_thumbnail(); 
                        } else {
                            echo ' <img src="/wp-content/uploads/placeholder_2.png" /> ';
                        }
                    echo ' </div> ';
                    echo ' <div class="brick_item-header"> ';
                        echo ' <h4><a href=" ';
                            the_permalink();
                        echo ' "> ';
                            the_title();
                        echo ' </a></h4> ';
                    echo ' </div> ';                        
                echo ' </div> ';
        
            endwhile; else :

                get_template_part('template_parts/content','error');

            endif; 
            wp_reset_postdata();

        echo '</div>';
    echo '</div>';
}
add_shortcode( 'get_latest_posts', 'get_latest_posts' );

But now I definitly need your help... As you can see I want to use this function in a shortcode. Currently it displays first on my page, and Google says, this is because I am echoing the content and I would need to give a return value.

How do I do this?? Is it just replacing the word "echo" with the word "return" ? I have no idea...

Answer 1

I have condensed a few statements together for readability but here's what that would look like:

function get_latest_posts() {
    $return = '<div class="latest-posts"><div class="brick_list">';

    $args = array(
        post_type => 'post',
        posts_per_page => 3
    );

    $latestposts_query = new WP_Query($args);

    if ( $latestposts_query->have_posts() ) : while ( $latestposts_query->have_posts() ) : $latestposts_query->the_post();
        $return .= ' <div ' . post_class("brick_item" . $termString ) . ' onclick="location.href=\'' . get_permalink() . '\'"> ';

        $return .= '<div class="brick_item-image">';
        if ( has_category( 'sample' ) ) {
            $return .= '<img src="/wp-content/uploads/placeholder_1.png" />';
        } elseif ( has_post_thumbnail() ) {
            $return .= get_the_post_thumbnail();
        } else {
            $return .= '<img src="/wp-content/uploads/placeholder_2.png" />';
        }
        $return .= '</div> <div class="brick_item-header"> <h4><a href="' . get_permalink() .'">' . the_title('','',false) . '</a></h4></div></div>';

    endwhile; else :

        get_template_part('template_parts/content','error');

    endif;
    wp_reset_postdata();

    $return .= '</div></div>';
    
    return $return;
}
add_shortcode( 'get_latest_posts', 'get_latest_posts' );