Display Random Posts with thumbnail instead of just a title of the post

Question

This code works really well. It displays the title of the post randomly with permalink but my objective is to display the thumbnail and/or featured image instead.

Any help would be appreciated.

<?php function wpb_rand_posts() { 
    $args = array(
    'post_type' => 'post',
    'orderby'   => 'rand',
    'posts_per_page' => 5, 


    );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
    $string = '<ul>';
        while ( $the_query->have_posts() ) {
        $the_query->the_post();

        $string .= '<li><a href="'. get_permalink() .'">'. get_the_title() .' </a></li>';

        }
        $string .= '</ul>';

    /* Restore original Post Data */
    wp_reset_postdata();
    } else {
    $string .= 'no posts found';
    }
    return $string; 
} 
add_shortcode('random-posts','wpb_rand_posts');
add_filter('widget_text', 'do_shortcode');  ?>

Answer 1

You can get the post thumbnail HTML using the function get_the_post_thumbnail(), so you just need to replace get_the_title() with that function:

$string .= '<li><a href="'. get_permalink() .'">'. get_the_post_thumbnail() .' </a></li>';

By default the image will be the size defined by your theme, but you use any of the other available sizes by passing the size name as the 2nd argument of the function:

$string .= '<li><a href="'. get_permalink() .'">'. get_the_post_thumbnail( null, 'large' ) .' </a></li>';

Answer 2

Replace this line

$string .= '<li><a href="'. get_permalink() .'">'. get_the_title() .' </a></li>';

WITH

$string .= '<li><a href="'. get_permalink() .'">'. get_the_post_thumbnail( get_the_ID(), 'thumbnail' ) .' </a></li>';

get_the_post_thumbnail function is showing the featured image at front end.

Here is the full code:

<?php 

function wpb_rand_posts() { 
    $args = array(
        'post_type' => 'post',
        'orderby'   => 'rand',
        'posts_per_page' => 5
    );

    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        $string = '<ul class="wpb-rand-posts">';
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            $string .= '<li><a href="'. get_permalink() .'">'. get_the_post_thumbnail( get_the_ID(), 'thumbnail' ) .' </a></li>';
        }

        $string .= '</ul>';

        /* Restore original Post Data */
        wp_reset_postdata();
    } else {
        $string .= 'no posts found';
    }

    return $string; 
} 
add_shortcode('random-posts','wpb_rand_posts');
add_filter('widget_text', 'do_shortcode');  

?>

I added the CSS class name into the UL tag.

You will add this CSS into your style.css file

ul.wpb-rand-posts {
    list-style-type: none;
    margin: 20px 0;
    padding: 0;
}

.wpb-rand-posts li {
    display: inline-block;
    float: left;
    margin-left: 10px;
    width: calc( ( 100% - 40px ) / 5 );
}

.wpb-rand-posts li:first-child {
    margin-left: 0;
}