0

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.enter image description here

<?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');  ?>

2 Answers 2

0

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>';
3
  • Thanks jacob. Any idea i can make the post parallel instead of vertical?
    – gafm
    Commented Feb 15, 2019 at 14:12
  • Wouldn't have anything to do with the shortcode code. Not really. You'd just need to use CSS to lay the posts out. This isn't really the place for general CSS questions though. stackoverflow.com would be more appropriate, but I'm sure somebody's already asked. If you search the web you'll find hundreds of articles on layout out content horizontally or in columns. Commented Feb 15, 2019 at 14:15
  • Thanks mate. Appreciate your help though:)
    – gafm
    Commented Feb 15, 2019 at 14:16
0

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;
}
9
  • works like a charm! However, post lines up instead of row. Any idea?
    – gafm
    Commented Feb 15, 2019 at 14:10
  • or was it even possible?
    – gafm
    Commented Feb 15, 2019 at 14:27
  • I am not sure about your HTML markup and css class name. You can try like this .your-unique-css-classname li { display: inline-block; float: left; margin-right: 10px; } Commented Feb 15, 2019 at 14:34
  • I'm thinking maybe the layout of the post is just within this part. Not really an expert coder, so i would really appreciate your help here. $string = '<ul>'; while ( $the_query->have_posts() ) { $the_query->the_post(); $string .= '<a href="'. get_permalink() .'">'. get_the_post_thumbnail( get_the_ID(), 'thumbnail' ) .' </a>'; } $string .= '</ul>';
    – gafm
    Commented Feb 15, 2019 at 14:54
  • Ok. I shall update above code soon. So you can test once. Commented Feb 15, 2019 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.