[Resolved] Show date on featured image of post

[trung]

Hi GP.

I want to show date of post on its featured image, and add a line after its title as this picture.

Can you show me how to make it? Thank you.

[David]

Hi there,

try adding this PHP Snippet:

add_filter( 'generate_inside_featured_image_output' , 'db_post_date_badge', 10 );
function db_post_date_badge( $html ) {
    $badge = sprintf(
    '<div class="date-badge"><div class="date-badge-day">%1$s</div><div class="date-badge-month">%2$s</div></div>',
    esc_html( get_the_date( 'd') ),
    esc_html( get_the_date( 'M') )
);  
    $html .= $badge;
    return $html;
}

and then add this CSS:

.post-image {
    position: relative;
}

.date-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #f00;
    color: #fff;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.date-badge-day {
    font-size: 20px;
}

[trung]

It works perfect. Thank you,David.

[David]

Awesome – glad to hear that!

[Author]

Posts