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

[amarinos]

Hi @Tom and support team,

we want to show the updated/published date on wpsp posts lists and on all posts pages. We achieved to show the dates on a posts lists page (see screenshot: https://drop.tdv.cloud/WXQCHb) with this css code:

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

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

But on the posts page itself (see screenshot: https://drop.tdv.cloud/jUhF2h) updated/published dates are not shown. We need your help here 🙂 … What code snippet or CSS is needed?

[Elvin]

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. 🙂

[amarinos]

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?

[Elvin]

Add this CSS:

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

[amarinos]

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

[Tom]

Hi there,

Any chance you can link us to the page?

[amarinos]

Hi @Tom,

sure … Have a look in the private information field 😉 …

[Elvin]

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

[amarinos]

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?

[Elvin]

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

[Author]

Posts