Recent Posts Widget With Thumbnails
Adds a "Recent Posts With Thumbnails" widget that lists your latest posts with a small featured image and optional date, for classic sidebars.
Opens WPIDE on
Code
if ( ! class_exists( 'WPIDE_Recent_Posts_Thumbs_Widget' ) ) {
class WPIDE_Recent_Posts_Thumbs_Widget extends WP_Widget {
public function __construct() {
parent::__construct( 'wpide_recent_thumbs', 'Recent Posts With Thumbnails', array(
'description' => 'Your latest posts with their featured images.',
'customize_selective_refresh' => true,
) );
}
public function widget( $args, $instance ) {
$title = isset( $instance['title'] ) && '' !== $instance['title'] ? $instance['title'] : 'Recent Posts';
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
$number = ! empty( $instance['number'] ) ? absint( $instance['number'] ) : 5;
$posts = get_posts( array(
'numberposts' => $number,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'post__not_in' => is_singular() ? array( get_queried_object_id() ) : array(),
) );
if ( ! $posts ) {
return;
}
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput -- markup from the theme.
if ( '' !== (string) $title ) {
echo $args['before_title'] . esc_html( $title ) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput
}
echo '<ul class="wpide-recent-thumbs" style="list-style:none;margin:0;padding:0;">';
foreach ( $posts as $item ) {
echo '<li style="display:flex;gap:.75em;align-items:center;margin:0 0 .75em;">';
if ( has_post_thumbnail( $item ) ) {
echo '<a href="' . esc_url( get_permalink( $item ) ) . '" style="flex:0 0 64px;" tabindex="-1" aria-hidden="true">' . get_the_post_thumbnail( $item, 'thumbnail', array( 'style' => 'display:block;width:64px;height:64px;object-fit:cover;border-radius:4px;', 'alt' => '' ) ) . '</a>';
}
echo '<span><a href="' . esc_url( get_permalink( $item ) ) . '">' . esc_html( get_the_title( $item ) ) . '</a>';
if ( ! empty( $instance['show_date'] ) ) {
echo '<br /><small>' . esc_html( get_the_date( '', $item ) ) . '</small>';
}
echo '</span></li>';
}
echo '</ul>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput
}
public function form( $instance ) {
$title = isset( $instance['title'] ) ? $instance['title'] : '';
$number = ! empty( $instance['number'] ) ? absint( $instance['number'] ) : 5;
$show_date = ! empty( $instance['show_date'] );
echo '<p><label for="' . esc_attr( $this->get_field_id( 'title' ) ) . '">Title:</label><input class="widefat" type="text" id="' . esc_attr( $this->get_field_id( 'title' ) ) . '" name="' . esc_attr( $this->get_field_name( 'title' ) ) . '" value="' . esc_attr( $title ) . '" /></p>';
echo '<p><label for="' . esc_attr( $this->get_field_id( 'number' ) ) . '">Number of posts:</label> <input class="tiny-text" type="number" min="1" max="20" id="' . esc_attr( $this->get_field_id( 'number' ) ) . '" name="' . esc_attr( $this->get_field_name( 'number' ) ) . '" value="' . esc_attr( $number ) . '" /></p>';
echo '<p><input type="checkbox" class="checkbox" id="' . esc_attr( $this->get_field_id( 'show_date' ) ) . '" name="' . esc_attr( $this->get_field_name( 'show_date' ) ) . '"' . checked( $show_date, true, false ) . ' /> <label for="' . esc_attr( $this->get_field_id( 'show_date' ) ) . '">Show post date</label></p>';
return '';
}
public function update( $new_instance, $old_instance ) {
return array(
'title' => isset( $new_instance['title'] ) ? sanitize_text_field( $new_instance['title'] ) : '',
'number' => isset( $new_instance['number'] ) ? max( 1, min( 20, absint( $new_instance['number'] ) ) ) : 5,
'show_date' => ! empty( $new_instance['show_date'] ),
);
}
}
}
add_action( 'widgets_init', function () {
register_widget( 'WPIDE_Recent_Posts_Thumbs_Widget' );
} );
Notes
Add it under Appearance > Widgets (as a Legacy Widget in the block widget editor).
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.