[Resolved] Customizing Post Author and Data Metadata

[Cameron]

Hello,

First support request here since getting Generatepress. I was curious if you could help me figure out how to emulate the meta data styling shown here minus the Gravatar: https://copyblogger.com/stepping-down/

I also want to have the date show when the article was last updated instead of the publish date when applicable if possible. I saw another support query that addressed this issue but I wasn’t sure how to proceed since some comments mentioned that “future updates” will provide google crawlers with the last published info. So I didn’t know if the process was different to implement that feature since that post was ~2 years old.

As for the social buttons, I have Lightweight social icons installed from migrating from the template library if that helps (although I may delete it or replace it with my social warfare plugin).

I apologise if this has been already addressed. But I couldn’t seem to find anything that was up to date.

Thank you!

[Elvin]

Hi there,

We will need to filter a few things with PHP.

Try adding this PHP snippet:

// Generate author image and link in separate containers
add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <div class="author vcard">%4$s</div><div class="author-wrap"><span class="label">Written by</span><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></div>',
            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' ) )
    );
} );

// Filter meta items to display date and author
add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'author',
        'date',
        'social-icons',
    );
} );

// Filter post date to display latest date
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<span class="label">Last updated: </span><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 = '<span class="label">Last updated</span><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( '<div class="posted-on">%s</div> ',
        $time_string
    );
}, 10, 2 );

You can then add this CSS:

.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
    display: flex;
}

.entry-meta {
    align-items: center;
    justify-content: center;
}

.entry-meta .posted-on,
.entry-meta .author-wrap {
    flex-direction: column;
    font-size: 16px;
    padding: 0 25px;
    flex: 1;
}

.entry-meta .posted-on {
    text-align: right;
}

.entry-meta .label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 0.25em;
}

.author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
}

As for the social media icons:

You can hook it in to the post meta area using the generate_post_meta_items hook.

But in your case, if you wish to keep Lightweight social icon, it gets a bit tricky because it can only be used as a widget on Appearance > Widgets.

If you wish to use it, we can either:

Turn the widget into a shortcode so we can use it within generate_post_meta_items hook.

Use a plugin like this: https://wordpress.org/plugins/widget-shortcode/

It allows you to add the widget to an arbitrary widget area, and then you can call that widget using a shortcode elsewhere in your website.

We then do something like this PHP snippet to hook it in:

add_action( 'generate_post_meta_items', function( $item ) {
    if ( 'social-icons' === $item ) {
        do_shortcode('[your shortcode here]');
    }
}, 50, 1 );

Note: We can use this same PHP snippet to hook in other shortcodes from other social icon plugins if you don’t want to use Lightweight Social Icons.

Another way to do this is to add a Widget area on the post meta area.

Here’s a PHP snippet to register a widget area:

function post_meta_widget_area() {
 
    register_sidebar( array(
        'name'          => 'Post Meta Widget Area',
        'id'            => 'post-meta-widget',
        'before_widget' => '<div class="post-meta-widget-area">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="post-meta-widget-area">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'post_meta_widget_area' );

And here’s a PHP snippet to actually add the registered widget area to the post meta area.

add_action( 'generate_post_meta_items', function( $item ) {
    if ( 'social-icons' === $item ) {
        dynamic_sidebar( 'post-meta-widget' );
    }
}, 50, 1 );

And here’s the PHP snippet to actually enable the post widget area. (you don’t need to add this if you’re using the first code in this reply. I’ve actually added this there. )

// Filter meta items to display date and author
add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'author',
        'date',
        'social-icons',
    );
} );

You then add this CSS to replicate the reference site you’ve linked.

.post-meta-widget-area {
    display: inline-flex;
    position: relative;
    margin-left: 5px;
    padding-left: 15px;
    top: 0;
}

.post-meta-widget-area:before {
    background-color: #CFD8DC;
    content: '';
    display: block;
    height: 35px;
    left: 0;
    position: absolute;
    transform: rotate(10deg) translateY(-50%);
    top:50%;
    width: 1px;
}

.entry-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.post-meta-widget-area .lsi-social-icons li {
    margin-bottom: 0 !important;
}

Note: Since this is a registered widget area, you can place more widgets within this area on Appearance > Widgets. You’ll see something like this: https://share.getcloudapp.com/4gu2JvPb

[Cameron]

Wow! Thanks! You’re a legend. I used the first php and css code you provided. I figured I would try to implement the social icons later.

Looking good so far aside from one issue:

I had a global header for all posts. The modifications only worked when I disabled this header. But when I disable the header, the metadata and title sit below the featured image rather than above it. Perhaps I missed something?

I kept the global header settings disabled so you can navigate to my provided link again to see exactly what it looks like at the moment.

Thank you for tolerating my lack of knowledge in this realm 🙂

[Elvin]

I had a global header for all posts. The modifications only worked when I disabled this header. But when I disable the header, the metadata and title sit below the featured image rather than above it. Perhaps I missed something?

For “global header” did you mean a Header Element? If yes, did you use template tags like {{post_date}}?

Template tags disable its equivalent meta item on the default position.

Say, for example, if you used {{post_author}}, the author link gets disabled on the default place where it is shown.

[Cameron]

Right, I noticed that when I toggled the Header Element (with template tags) on it replaced the styling code you provided. I had previously used this to place the H1 and meta above the featured image.

But I still need to figure out how to place the post title and customized meta above the featured image without using the template tags. Any ideas?

[Elvin]

But I still need to figure out how to place the post title and customized meta above the featured image without using the template tags. Any ideas?

We can just move the featured image below it. There’s an option for that on the customizer settings.

The settings is on Appearance > Customize > Layout > Blog. Scroll a bit down and tap “Posts” tab.

Here’s a demo on how to do it. https://share.getcloudapp.com/nOuoD4y1

[Cameron]

That did the trick. I’m almost there! I used your php to add the widget section and just simply added my social warfare plugin shortcode to the widget section.This works well on desktop view but not mobile.

There are two final issues I need to fix:
1. Centering all the metadata. As you will see in the link, the author meta data is left justified leaving a big gap between the author and the date.The resource I originally mentioned has all this metadata info/social icons centered.

2. The mobile responsiveness rough around the edges. The author image is warped and the text is too large resulting in many breaks to another line. So perhaps we can just disable the author image and resize the text on mobile view? Or if it’s easily done, of course a properly scaled author image would be cool alternatively.

You can see what it looks like as of now with the link provided.

Thank you for all of your help!

Edit:I’m removing the widget so you can ignore that component. Adding the social warfare shortcode created weird incompatibilities with floating social share buttons on the screen.

[Ying]

Hi Cameron,

For issue 1, try this CSS:

.single-post .entry-header {
    display: flex;
    justify-content: center;
}
.entry-meta:not(footer) {
    width: 425px;
}

For issue 2, try this CSS:

@media (max-width: 768px) {
    .entry-header .author.vcard {
        display: none;
    }
    .entry-header .author-wrap, .entry-header .posted-on {
        padding: 0 !important;
    }
}

Let me know 🙂

[Cameron]

That worked perfectly, thank you! I thought those were the last things to clean up but I also can’t figure out how to modify the font size of the “written by” and “published on” text that precedes the metadata. It is too large on the mobile view. I can easily control the font size of the actual author name and date however.

Normally I could figure it out but since it’s added via the php as seen in the first support response above, I don’t know how to modify it. Once this is sorted out, then everything should be all set 🙂

[Elvin]

That worked perfectly, thank you! I thought those were the last things to clean up but I also can’t figure out how to modify the font size of the “written by” and “published on” text that precedes the metadata. It is too large on the mobile view. I can easily control the font size of the actual author name and date however.

try this CSS:

@media(max-width:768px){
.entry-meta .label{
    font-size: 10px;
}
}

[Cameron]

That did it, thank you! Best support I’ve received in a long time!

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts