[Resolved] How to show published and updated dates

[culpable]

Also Tom unrelated to the above point (but related to this thread)—the filter does not seem to work when using this page hero example from the documentation https://docs.generatepress.com/article/page-hero-examples/#example-2

Disabled it works. Enabled it does not work.

I’m guessing it has something to do with {{post_date}}?

Is there an easy way to fix this? 🙂

[David]

For the post meta time strings you could try something like this:

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

    // Check modified date is newer thant published

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

    // If modified date exists then ouput both time strings with modified date
    
    if ( $updated_time > $published_time ) {
        $time_string = '
        <time class="entry-date published" datetime="%3$s" itemprop="datePublished">%4$s</time>
        <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">%s</span> ',
        $time_string
    );
}, 10, 2 );

You can then create a shortcode to use that same function in the Header Element:

add_shortcode( 'hero_date','db_modified_time_stamp' );

Then add [hero_date] to your element

It will need some CSS to hide the published time tag.

[culpable]

Hey David,

Thank you for helping me with this.

I added your code below as a code snippet (I’ll refer to this as the mod=pub snippet).

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

    // Check modified date is newer than published

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

    // If modified date exists then output both time strings with modified date
    
    if ( $updated_time > $published_time ) {
        $time_string = '
        <time class="entry-date published" datetime="%3$s" itemprop="datePublished">%4$s</time>
        <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">%s</span> ',
        $time_string
    );
}, 10, 2 );

I tried adding add_shortcode( 'hero_date','db_modified_time_stamp' ); underneath the code snippet above.

As well as adding it in its own code snippet (default settings).

In both cases, adding `[hero_date]’ to this heading https://docs.generatepress.com/article/page-hero-examples/#example-2 did not execute the shortcode.

(the output was [hero_date]).

Shortcodes are definitely executing in this header, as [page_hero_gravatar] is working.

I tried setting mod=pub snippet to priority 8, and the hero_date shortcode snippet to priority 9, but to no avail.

Sorry if I have misunderstood your instructions.

Also if this is useful: when I keep the existing header exactly as https://docs.generatepress.com/article/page-hero-examples/#example-2, no changes are made to the schema of the post

(both modified and published exist. And they do not equal each other. I assume this is probably because {{post_date}} is not being affected by the filter created above)

[Elvin]

Hi,

The [hero_date] shortcode won’t work if there’s no db_modified_time_stamp function to run.

That said, you can try adding this along with the add_shortcode( 'hero_date','db_modified_time_stamp' ); so that the add_shortcode() has a db_modified_time_stamp function to run.

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

    // Check modified date is newer thant published

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

    // If modified date exists then ouput both time strings with modified date
    
    if ( $updated_time > $published_time ) {
        $time_string = '
        <time class="entry-date published" datetime="%3$s" itemprop="datePublished">%4$s</time>
        <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">%s</span> ',
        $time_string
    );
}

Alternatively, I believe you can just make the {{post_date}} display the modified date by using Tom’s snippet here:
https://generatepress.com/forums/topic/correct-way-to-show-only-modified-date-on-page-hero/#post-1344687

[culpable]

The [hero_date] shortcode won’t work if there’s no db_modified_time_stamp function to run.

That makes sense!

I initially assumed David had made a typo and tried the function add_shortcode( 'hero_date','generate_post_date_output' ); (as generate_post_date_output was the function he was playing with), but that didn’t work.

So I assumed db_modified_time_stamp was baked into the theme.

Sorry, I should have checked this.

Your db_modified_time_stamp worked when I inserted it into https://docs.generatepress.com/article/page-hero-examples/#example-2, thank you Elvin.

I am still encountering an issue:

1/ As I am now using {{post_date}} in the header, the date information is still appearing within the .inside-article. How would I remove this from the source code (not just the CSS)?

Thank you for your help Elvin, Dave, and Tom 🙏️

[culpable]

Ah, I just realized this can be turned off in Customize > Blog > Blog Content

Everything is now working as intended.

Thank you Elvin and David for providing me with the exact code and steps to execute this correctly.

GP Support is second-to-none 😄️

[Elvin]

Good find. Nice one. 🙂

No problem. Glad to be of any help. 😀

[Maryse]

Hello,

I’m using the CSS provided by David:

/* Display updated date */
.posted-on .updated {
    display: inline-block;
    margin-right: 1em;
}
/*Add date prefixes */
.posted-on .updated:before {
    content: 'Updated: ';
}
.posted-on .entry-date:before {
    content: 'Published: ';
}

It works well, I’m just wondering if there is a way to switch the order so that the published date appears before the update date, like this:

Published on June 22, 2021 | Updated on June 25, 2021

Also, I don’t have a multilingual plugin installed yet, but will I be able to translate those strings (published on, updated on…)?

Thanks so much for your time!

[Ying]

Hi Mary,

The ‘updated’ and “published’ are static content, so for another language, we’ll have to use another set of CSS.

For eg. if your other language is French, then the new CSS would be:

/* Display updated date */
.posted-on .updated {
    display: inline-block;
    margin-right: 1em;
}
/*Add date prefixes */
.posted-on .updated:lang(fr):before {
    content: 'Mise à jour: ';
}
.posted-on .entry-date:lang(fr):before {
    content: 'Publié: ';
}

To switch posted on and updated on:

time.entry-date.published {
    order: -1;
}
span.posted-on {
    display: inline-flex;
}
.posted-on .updated {
    margin-left: 1em;
}

Let me know 🙂

[Maryse]

Hello Ying, it works, thanks so much! 🙂

[Ying]

You are welcome 🙂

[Author]

Posts