How to get this look (Meta data)

[Rohan Verma]

We want to have exact same look for the metadata (we also want author image with the name)
: https://prnt.sc/t8zl7w.

I have attached the website link as well

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohan Verma]

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

[Rohan Verma]

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

If possible please guide me. Thanks

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rohan Verma]

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

[Rohan Verma]

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

[Tom]

Just updated the function above.

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rohan Verma]

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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rohan Verma]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rohan Verma]

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&#8221; 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’,
);
} );

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rohan Verma]

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

[Author]

Posts