How to get this look (Meta data)

Hi there,

try adding this PHP Snippet:

// set entry header post meta
add_action( 'wp', function() {
    if ( is_single() ) {

        add_filter( 'generate_header_entry_meta_items', function( $items ) {
            return array(
                'author',
                'date',
                'comments-link',
            );
        } );
    }
} );

// add avatar to author
add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <div class="avatar vcard">%4$s</div><span class="byline"><span class="label">by</span><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() ),
            get_avatar( get_the_author_meta( 'ID' ) )
    );
} );

// Set date to latest and no link
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

    $updated_time = get_the_modified_time( 'U' );
    $published_time = get_the_time( 'U' ) + 86400;

    if ( $updated_time > $published_time ) {
        $time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    }

    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );

    return sprintf( '<span class="posted-on"><span class="date-label">Posted on </span>%s</span>',
        $time_string
    );
}, 10, 2 );

// Remove labels from comments number link
add_filter( 'comments_number', 'wporg_com_num', 10, 2 );
function wporg_com_num ( $out, $num ) { // Two parameter as in filter described
    if ( 0 === $num ) { 
        $out = 'Leave Comment'; // If No comments
    } elseif ( 1 === $num ) {
        $out = ' 1 '; // If 1 comment
    } else {
        $out = $num; // More than 1 comment
    }
 
    return $out;
}

And this CSS to style it:

/* Add top bottom border to meta */
.single .entry-header .entry-meta {
    padding: 10px 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #ccc;
}

/* Make all elements flex */
.single .entry-header .entry-meta,
.single .entry-header .entry-meta>span {
    display: flex;
    align-items: flex-end;
}

/* Postition labels over meta */
.single .entry-header .entry-meta>span {
    flex-direction: column;
    align-items: flex-start;
    flex-basis: 20%;

}

/* Add border to posted-on and force comments over */
.single .entry-header .posted-on {
    flex: 1;
    padding-left: 10px;
    border-left: 1px solid #ccc;
}

/* Vertical Align Comments */
.single .entry-header .entry-meta .comments-link {
    align-items: flex-end;
    align-self: center;
}

/* set meta label font size */
.single .entry-header .byline .label,
.single .entry-header .posted-on .date-label {
    font-size: 12px;
}

/* Style Avatar */
.single .entry-header .avatar img {
    border-radius: 100%;
    height: 36px;
    width: 36px;
    margin-right: 10px;
}

/* style comments link */
.single .entry-header .comments-link a {
    font-size: 12px;
    background-color: #ff6666;
    color: #fff !important;
    padding: 5px 13px;
    border-radius: 3px 3px 0 3px;
    position: relative;
}

.single .entry-header .comments-link a:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 100%;
    border: 0 solid transparent;
    border-width: 6px 10px;
    border-left-width: 0;
    border-top-color: #AA0000;
}

Thanks David that code works. Can we can get this style https://prnt.sc/tanpmf

I am liking this one more than the previous one. Date under the author name

And also this type of category style https://prnt.sc/tanzm9

If possible please guide me. Thanks

Hi there,

For that style, you just need this:

.entry-header .entry-meta {
    display: flex;
    flex-direction: column-reverse;
}

To move your categories, you'll want to disable the output in Customize > Layout > Blog.

Then, add this:

add_action( 'generate_before_entry_title', function() {
    $categories_list = get_the_category_list( _x( ' ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );

    if ( $categories_list ) {
        printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
            _x( 'Categories', 'Used before category names.', 'generatepress' ),
            $categories_list
        );
    }

    $tags_list = get_the_tag_list( '', ' ' );

    if ( $tags_list ) {
        printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span> ',
            esc_html_x( 'Tags', 'Used before tag names.', 'generatepress' ),
            $tags_list
        );
    }
} );

It'll need some CSS, but it should get you started.

Tags are not showing up. I have checkmark it from layout blog but still, no tag is showing up in a single post. I have updated our site link

and how to show the date under the author name. With your code date is showing above author

Just updated the function above.

Remove flex-direction: column-reverse; if you want the order reversed.

Tags are showing at the top after adding the PHP. I want the tag to be placed after the content area just like the default and the category above title

In that case, remove the code I just added. You should just be able to keep the "Display post tags" option turned on in Customize > Layout > Blog.

Hello, I have enabled that option still no tags showing up. All other meta options are working only tags are not showing up. Check screenshot: https://prnt.sc/tbm7f1

I have updated site link as well so that you can check

Any other functions active on the site? Something must be turning them off.

Yes, there are some codes we are using;
1) To show updated date
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published on: %2$s</time>';

if ( get_the_date() !== get_the_modified_date() ) {
$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Last Updated on: %4$s</time>';
}

$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);

return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );
function rocket_lazyload_exclude_src( $src ) {
$src[] = 'Logo-RMG-black.png';

return $src;
}

2) To show author image alongside the author name single post

add_filter( 'generate_post_author_output', function() {
return sprintf( ' <span class="byline">%1$s</span>',
sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<span class="author-name" itemprop="name">%3$s</span></span>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
esc_html( get_the_author() ),
get_avatar( get_the_author_meta( 'ID' ) )
)
);
} );

add_filter( 'generate_header_entry_meta_items', function() {
return array(
'author',
'comments-link',
'date',
);
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
return array(
'categories',
);
} );

This function is preventing tags from showing up:

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array(
        'categories',
    );
} );

What was the original intention of the filter? To exclude something?

No to show the author image alongside the name in a single post. Only for this purpose > https://prnt.sc/tca5rw

can you share an alternate PHP code