25% off ProSNIPC25OFF

Recent Posts With Thumbnails Widget

Renders a compact list of recent posts with featured image thumbnails, title, date, and optional excerpt — use [scseed_recent_posts count="5" category="" excerpt="0"].

Module2 parts · by SnipCraft

PHPLogic

php
<?php
// Shortcode: [scseed_recent_posts count="5" category="" excerpt="0" title="Recent Posts"]
add_shortcode( 'scseed_recent_posts', 'scseed_recent_posts_shortcode' );
function scseed_recent_posts_shortcode( $atts ) {
    $a = shortcode_atts( array(
        'count'    => 5,
        'category' => '',
        'excerpt'  => '0',
        'title'    => __( 'Recent Posts', 'scseed' ),
    ), $atts );

    $args = array(
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'posts_per_page' => absint( $a['count'] ),
        'post__not_in'   => array( get_the_ID() ),
    );
    if ( ! empty( $a['category'] ) ) {
        $cat = get_category_by_slug( sanitize_text_field( $a['category'] ) );
        if ( $cat ) { $args['cat'] = $cat->term_id; }
    }
    $posts = get_posts( $args );
    if ( empty( $posts ) ) { return ''; }

    $show_exc = ( '1' === $a['excerpt'] );
    $out = '<div class="scseed-rp-wrap">';
    if ( $a['title'] ) {
        $out .= '<h3 class="scseed-rp-heading">' . esc_html( $a['title'] ) . '</h3>';
    }
    $out .= '<ul class="scseed-rp-list">';
    foreach ( $posts as $rp ) {
        $permalink = esc_url( get_permalink( $rp->ID ) );
        $thumb     = has_post_thumbnail( $rp->ID )
            ? get_the_post_thumbnail( $rp->ID, array( 64, 64 ), array( 'class' => 'scseed-rp-img' ) )
            : '<span class="scseed-rp-img-placeholder" aria-hidden="true"></span>';
        $date = esc_html( get_the_date( get_option( 'date_format' ), $rp->ID ) );
        $exc  = $show_exc ? '<p class="scseed-rp-exc">' . esc_html( wp_trim_words( $rp->post_content, 15 ) ) . '</p>' : '';
        $out .= '<li class="scseed-rp-item">'
            . '<a href="' . $permalink . '" class="scseed-rp-thumb-link" tabindex="-1" aria-hidden="true">' . $thumb . '</a>'
            . '<div class="scseed-rp-body">'
            . '<a class="scseed-rp-title" href="' . $permalink . '">' . esc_html( get_the_title( $rp->ID ) ) . '</a>'
            . '<time class="scseed-rp-date" datetime="' . esc_attr( get_the_date( 'c', $rp->ID ) ) . '">' . $date . '</time>'
            . $exc
            . '</div></li>';
    }
    $out .= '</ul></div>';
    return $out;
}

CSSStyles

css
.scseed-rp-wrap { margin: 1.25rem 0; }
.scseed-rp-heading {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.scseed-rp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.scseed-rp-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.scseed-rp-item:last-child { border-bottom: none; }
.scseed-rp-thumb-link { flex-shrink: 0; }
.scseed-rp-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 6px;
    display: block;
}
.scseed-rp-img-placeholder {
    width: 64px;
    height: 64px;
    background: #eee;
    border-radius: 6px;
    display: block;
}
.scseed-rp-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.scseed-rp-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scseed-rp-title:hover { color: #7c5cff; }
.scseed-rp-date { font-size: 0.75rem; color: #999; }
.scseed-rp-exc { font-size: 0.8rem; color: #666; margin: 0; line-height: 1.45; }
#content#shortcode#thumbnails#sidebar#recent-posts