[Support request] Shortcode Date

[Anthony]

is there a shortcode i can use to display the date of when a page was published? something like “submitted 5 hours ago”? i want to display it inside of a table cell with tablepress plugin

[David]

Hi there,

you could try creating a shortcode using this PHP snippet:

function get_time_since_posted() {

	$time_since_posted = human_time_diff( get_the_time( 'U' ), current_time( 'timestamp' ) ) . ' ago';

	return $time_since_posted;

}

add_shortcode( 'posted_time', 'get_time_since_posted' );

Then add [posted_time] to your page.

[Anthony]

thanks, how do i add this snippet to the site? also when i add [posted_time] how does it know its referring to the page linked above it?

[David]

This article explains how to add PHP:

https://docs.generatepress.com/article/adding-php/

If you’re not using a child theme, the mentioned code snippets plugin is the easiest method.

The get_the_time( 'U' ) functions returns the timestamp of the current post.
The human_time_diff() calculates the difference between that and the current time.

[Anthony]

okay i added the code snippet and it works but they all come back saying ‘2 days ago’ even though i added created these pages like 10 minutes ago.

[David]

aah sorry my bad – this will only work on the actual page or post itself. I am not sure how you would easily get the time from the linked page / post – would require some more complex PHP and maybe a custom field. I’ll have a think.

[David]

Question – the links are currently going to Pages – what is the intention there? If they were posts then we could use the Blog to display the article titles and meta and a custom date posted. Let me know

[Anthony]

im not sure, im new to wordpress. if i change them to posts, can i then display the date with the shortcode?

[David]

Thats correct. So Posts have a special function in that they are automatically added to the Blog in Date order and can display the author, date, taxonomies ( categories and tags ) and the author.

I set this up as an example of a standard blog loop to display only the title, byline and category:

https://mic.assemblewp.com/blog/

We can replace the existing date with the shortcode if you want to display the posted time. In addition we can hook in social sharing icons. And we can help style it to suit. Let me know if thats along the lines of what you’re trying to achieve.

[Anthony]

yea i want it to look like that except be styled like what i have in tablepress. is full customization of css possible with this layout? im worried i wont be able to make changes like height, spacing, etc. also, since there will be lots of posts is there infinite scroll or pagination? for reference, im trying to style it like reddit.

[David]

It will take some custom CSS and a couple of Hook Elements to create that style but its definitely doable. Pagination and infinite scroll are built in options.

If you can create a blog and assign it as your posts page in Dashboard > Settings > Reading then you can style the layout:

https://docs.generatepress.com/article/blog-content-layout/

Once you got the basics let me know and i can assist with the other styling and hooking in time and sharing icons.

[Anthony]

okay i did as much as i could. i tried doing the tags (used this link: https://gist.github.com/generatepress/18e41e03783b5c7e86402d429e64efc0) but now theres no space between them.

[David]

In this CSS you have added include the last line i commented below:

.cat-links a, .tags-links a, .comments-link a {
    background-color: #e8e8e8;
    padding: 5px;
    border-radius: 2px;
    font-size: 10px;
    margin-right: 5px; /* Add this line */
}

[Anthony]

thanks it worked 🙂 how do i place it next to the title?

[David]

Cool – will you be adding any other content to the post list?
If no then add this CSS:

.separate-containers:not(.single) .inside-article, .separate-containers:not(.single) footer.entry-meta {
    display: flex;
    flex: 1;
    justify-content: space-between;
}
.separate-containers:not(.single) footer.entry-meta {
    margin-top: 0.5em;
    margin-left: 2em;
}

[Author]

Posts