Wordpress Shortcode function display outside of widget

Question

I have the following function for a shortcode below. I have the shortcode in a footer widget. For some reason the output is appearing outside of the container elements of the widget. I thought returning the values was the way to go so I'm kind of stuck here.

if (!function_exists('footer_get_latest_post')) {
    function footer_get_latest_post() {
        $footerPost = '';
        $args = array('posts_per_page' => 1 );
        $recent_posts = new WP_Query($args);
        while( $recent_posts->have_posts() ) {
            $recent_posts->the_post();
            $footerPost = '<div class="footer-post-thumb">' . the_post_thumbnail('thumbnail') . '</div>';
            $footerPost .= '<div class="footer-post-content"><h3>' . the_title() . '</h3>';
            $footerPost .= the_content() . '</div>';
        }
        wp_reset_query();
        return $footerPost;
    }
}
add_shortcode('FooterLatestPost', 'footer_get_latest_post');

So the final html output looks something like:

<img>
<p>Post Title</p>
<p>Post Content</p>
<div class="footer-widget">
empty
</div>

Answer 1

I think the problem lies with functions like the_title() vs get_the_title()

This seem to work:

if (!function_exists('footer_get_latest_post')) {
    function footer_get_latest_post() {
        $footerPost = '';
        $args = array('posts_per_page' => 1 );
        $recent_posts = new WP_Query($args);
        while( $recent_posts->have_posts() ) {
            $recent_posts->the_post();
            $footerPost = '<div class="footer-post-thumb">' . get_the_post_thumbnail('thumbnail') . '</div>';
            $footerPost .= '<div class="footer-post-content"><h3>' . get_the_title() . '</h3>';
            $footerPost .= get_the_content() . '</div>';
        }
        wp_reset_query();
        return $footerPost;
    }
}
add_shortcode('FooterLatestPost', 'footer_get_latest_post');

Without the get part, the functions echo their results "in situ."

Answer 2

Solved this utilizing ob_start() and ob_end_clean via this post: Custom shortcode in widget forced to top of widget

if (!function_exists('footer_get_latest_post')) {
    function footer_get_latest_post() {
        ob_start();
        $footerPost = '';
        $args = array('posts_per_page' => 1 );
        $recent_posts = new WP_Query($args);
        while( $recent_posts->have_posts() ) {
            $recent_posts->the_post();
            $footerPost = '<div class="footer-post-thumb">' . the_post_thumbnail('thumbnail') . '</div>';
            $footerPost .= '<div class="footer-post-content"><h3>' . the_title() . '</h3>';
            $footerPost .= the_content() . '</div>';
        }
        wp_reset_query();
        //return $footerPost;
        $output = ob_get_contents();
        ob_end_clean();

        return $output;
    }
}
add_shortcode('FooterLatestPost', 'footer_get_latest_post');