Article Meta in Page Hero

[Scott]

I am using the following function from the forum to style my article meta as a snippet:

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<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( __( 'Learn more about %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',
		'tags',
    );
} );

with the following CSS (also from the forum):

/*postmeta*/
.posted-on .updated {
    display: inline-block;
}
.posted-on .updated + .entry-date {
    display: none;
}
.posted-on .updated:before {
    content: "Last Updated: ";
}
.byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}
.comments-link,
.posted-on {
	padding-left: 10px;
	margin-left: 10px;
}
.tags-links {
	padding-left: 10px;
	margin-left: 10px;
}

I moved my article title and meta into a page hero (using the template tags) so that I could have that section full-width. Now, I have lost the formatting. I tried adding .page-hero to the CSS and that didn’t work. Is there a modification to the snippet I need to make to re-establish that format?

Thanks!
Scott

[Tom]

The Page Hero meta has different filters/CSS. What exactly are you wanting to do? I should be able to help with the code.

Let me know 🙂

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

[Scott]

Thanks Tom! You guys always go above and beyond!

What I have there is pretty close to what I had before, just two changes:
1. My photo to the left of my name (from WordPress user profile)
2. Date changed to “Updated on: XXXX XX, XXXX” with the modified date instead of the posted date (no archive links).

THANKS!!

[Tom]

Check out example #2 here to add your gravatar: https://docs.generatepress.com/article/page-hero-examples/#example-2

As for the date, try this:

add_filter( 'generate_page_hero_post_date', function() {
    $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

    if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
        $time_string = 'Updated on: <time class="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 $time_string;
} );

Let me know 🙂

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

[Scott]

Hey Tom –

Added the code and the “Updated on:” is there but there is no date showing at all after it.

THANKS!

[Tom]

Can you try the updated function?: https://generatepress.com/forums/topic/article-meta-in-page-hero/#post-1173941

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

[Scott]

That did it! Thanks so much!

[Tom]

No problem! 🙂

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

[Author]

Posts