Show updated/published date with WP Shows Posts (Post lists) and on normal posts

Hi there,

You can show the updated date on a similar manner with the CSS provided on this documentation.
https://docs.generatepress.com/article/show-the-updated-post-date/

We simply changed the selectors. :)

Hi @Elvin,

thanks for helping us. I added the css from your link:

.posted-on .updated {
    display: inline-block;
}

.posted-on .updated + .entry-date {
    display: none;
}

.posted-on .updated:before {
    content: "Last Updated ";
}

Now I see on the posts page this: https://drop.tdv.cloud/rHQFzB
Great, but in here we want also the "Published on" date ... What must be done now?

Add this CSS:

.posted-on .published:before {
    content: "Published on ";
}

I added the additional CSS - nothing changed. Only "Last updated: ..." is shown ...

For our overview, here the complete CSS I added:

.wp-show-posts-updated {
    display: block;
}
.wp-show-posts-updated:before {
    content: "Updated on ";
}

.wp-show-posts-entry-date:before {
    content: "Published on ";
}

.posted-on .updated {
    display: inline-block;
}

.posted-on .updated + .entry-date {
    display: none;
}

.posted-on .updated:before {
    content: "Last Updated ";
}

.posted-on .published:before {
    content: "Published on ";
}

Hi there,

Any chance you can link us to the page?

Hi @Tom,

sure ... Have a look in the private information field ;-) ...

Thank you for providing the information.

You have this custom CSS that prevents the published date from displaying:

.posted-on .updated + .entry-date {
    display: none;
}

I believe you can remove this if you want both the dates to show.

Optional: You can add this in if you want the dates to display in one line.

.posted-on time.entry-date.published {
    display: inline-block;
    margin: 0 10px;
}

Hello @Elvin,

worked! I have to learn a bit of CSS ;-) ...

I added the optional CSS to display the dates in one line ... Worked!

But if only a "Published date" exists and no "updated date" it looks like this: https://drop.tdv.cloud/j6Uytf ... Is it possible to get the "Published date" aligned with the body text to the left?

Let's change this:

.posted-on time.entry-date.published {
    display: inline-block;
    margin: 0 10px;
}

To this:

.posted-on time.entry-date.published {
    display: inline-block;
}

And then add this:

span.posted-on > *:first-child {
    margin-right: 10px;
}