[Resolved] Show date on featured image of post

Home Forums Support Show date on featured image of post

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1514394
    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.

    #1514923
    David
    Staff
    Customer Support

    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;
    }
    #1522358
    trung

    It works perfect. Thank you,David.

    #1522656
    David
    Staff
    Customer Support

    Awesome – glad to hear that!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.