How to Create Recent Posts with Thumbnails in WordPress

While there are many plugins available to display recent posts with thumbnails, I prefer using a clean, code-based approach. If you’re comfortable working with your theme files, follow the steps below to display a list of recent posts with featured images directly in your sidebar or any widgetized area.

Step 1: Add This Code to Your Sidebar (or a Widgetized Template Area)

Paste the following code into your theme’s sidebar.php, or use a custom widget area where PHP is allowed:

<h3><?php _e( 'Recent Posts' ); ?></h3>

<?php
$the_query = new WP_Query(array(
    'posts_per_page' => 5,
    'orderby'        => 'post_date',
    'order'          => 'DESC'
));

while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="latest_post">
        <div class="image_holder">
            <?php if ( has_post_thumbnail() ) {
                the_post_thumbnail(array(50, 50), array('class' => 'alignleft'));
            } ?>
        </div>

        <div class="recent_description">
            <h4>
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark">
                    <?php echo get_the_date('m/d/y'); ?> – <?php the_title(); ?>
                </a>
            </h4>
            <?php the_excerpt(); ?>
        </div>
    </div>
<?php endwhile; wp_reset_postdata(); ?>
Code language: HTML, XML (xml)

---

Step 2: Limit the Excerpt Length

To control the number of words displayed in the post excerpt, add the following snippet to your theme’s functions.php file:

function custom_excerpt_length($length) {
    return 20; // Limit excerpt to 20 words
}
add_filter('excerpt_length', 'custom_excerpt_length');
Code language: PHP (php)

---

Step 3: Add Basic CSS Styling

You can style the recent post output with the following CSS. Add this to your theme’s stylesheet (style.css), or use the Customizer > Additional CSS section:

/* Recent Posts Styling */
.latest_post {
    display: flex;
    margin-bottom: 15px;
}

.image_holder {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    overflow: hidden;
}

.image_holder img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.recent_description {
    flex-grow: 1;
}

.recent_description h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
}

.recent_description p {
    margin: 0;
    font-size: 13px;
    color: #555;
}
Code language: CSS (css)

---

With just a few lines of code, you can create a lightweight and customizable recent posts widget—no plugins required. This approach gives you full control over the display and styling, which is ideal for performance-focused or custom theme development.

Below is a shortcode-based version of the recent posts with thumbnails feature, which allows you to easily embed the recent posts section in pages, posts, or widgets using [recent_posts_with_thumbnails].

---

Step 1: Add Shortcode to functions.php

Add the following code to your theme’s functions.php file or in a custom plugin:

function recent_posts_with_thumbnails_shortcode($atts) {
    ob_start();

    $atts = shortcode_atts(array(
        'count' => 5,
        'excerpt_length' => 20,
    ), $atts);

    // Temporarily modify excerpt length
    add_filter('excerpt_length', function() use ($atts) {
        return $atts['excerpt_length'];
    });

    $query = new WP_Query(array(
        'posts_per_page' => intval($atts['count']),
        'orderby'        => 'post_date',
        'order'          => 'DESC',
    ));

    if ($query->have_posts()) :
        echo '<div class="recent-posts-shortcode">';
        while ($query->have_posts()) : $query->the_post(); ?>
            <div class="latest_post">
                <div class="image_holder">
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail(array(50, 50), array('class' => 'alignleft'));
                    } ?>
                </div>
                <div class="recent_description">
                    <h4>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark">
                            <?php echo get_the_date('m/d/y'); ?> – <?php the_title(); ?>
                        </a>
                    </h4>
                    <?php the_excerpt(); ?>
                </div>
            </div>
        <?php endwhile;
        echo '</div>';
        wp_reset_postdata();
    endif;

    // Remove the temporary excerpt length filter
    remove_all_filters('excerpt_length');

    return ob_get_clean();
}
add_shortcode('recent_posts_with_thumbnails', 'recent_posts_with_thumbnails_shortcode');
Code language: JavaScript (javascript)

---

Step 2: Use the Shortcode Anywhere

Now, you can add the following shortcode anywhere in your WordPress content:

[recent_posts_with_thumbnails]
Code language: JSON / JSON with Comments (json)

Optional Parameters:

You can customize the output like this:

[recent_posts_with_thumbnails count="3" excerpt_length="15"]
Code language: JSON / JSON with Comments (json)

• count: Number of posts to show
• excerpt_length: Number of words in the excerpt