{"id":1403,"date":"2018-10-03T19:31:52","date_gmt":"2018-10-03T17:31:52","guid":{"rendered":"https:\/\/felix-arntz.me\/?p=1403"},"modified":"2025-02-11T08:12:23","modified_gmt":"2025-02-11T16:12:23","slug":"using-amp-timeago-relative-dates-native-amp-site","status":"publish","type":"post","link":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/","title":{"rendered":"Using amp-timeago to display relative dates on your Native-AMP site"},"content":{"rendered":"\n

In my post about how I renewed my website with Gutenberg and native AMP support<\/a> I mentioned that I’d be sharing some implementation details. A couple days ago I posted about how I built a reusable section block with Gutenberg<\/a>. Today we’re going to look at an AMP-specific feature and how I made use of it for my site. While the AMP plugin for WordPress<\/a> does a great job in ensuring your WordPress site becomes AMP-compatible, there are still tons of additional AMP features to explore, some of which are too specific to generally add support in the plugin. An example of this is the amp-timeago<\/code> component<\/a>, which allows displaying relative time periods, pretty much in realtime. In other words, instead of showing a concrete date and time, it will show a string such as “x seconds\/minutes\/hours\/days\/weeks\/months\/… ago”<\/em> – you get the gist. You can see a live-example of this when looking at when this post was published, just above, below the headline. And this is precisely what we’re going to focus on in this post, how I implemented this feature and how you can implement it for your Native-AMP WordPress site.<\/p>\n\n\n\n\n\n\n\n

Why use amp-timeago<\/code>?<\/h2>\n\n\n\n

The amp-timeago<\/code> component of AMP allows to display relative time periods between now and another given date and time. This has become a common practice in a lot of platforms such as Facebook or Twitter, so why not leverage it on your blog as well?<\/p>\n\n\n\n

In WordPress, there is a human_time_diff()<\/code> function<\/a> that allows you to do something similar. However, since that function operates server-side, it is practically unusable for real-world sites, since it only shows accurate time periods if you don’t use any kind of page caching and let WordPress handle every request directly – which I don’t recommend for performance reasons.<\/p>\n\n\n\n

amp-timeago<\/code> is a client-side solution. On the server, you only provide the date and time in a machine-readable format, and also a regular formatted date\/time value that is human-readable. The latter will not be visible on the page because a relative time period will be displayed instead. amp-timeago<\/code> will however display it if you hover over the time period, which is another benefit over the simple human_time_diff()<\/code>. If a user wants to quickly find out the exact date, they still can.<\/p>\n\n\n\n

Displaying relative post dates<\/h2>\n\n\n\n

Themes typically handle output of the post dates through either a function (such as mytheme_posted_on()<\/code>) or a dedicated template (such as template-parts\/entry-date.php<\/code>). I personally prefer using templates for generating markup, so that’s what we’ll look it in this post. The code here is applicable to the function approach as well though.<\/p>\n\n\n\n

Post dates are commonly displayed inside time<\/code> elements – so the most important part here is that we need to use amp-timeago<\/code> elements instead. However, since AMP support is typically enabled through the plugin, we wanna make sure we fall back gracefully, in case the plugin is not activated. This allows using the theme also for sites that do not support native AMP. Let’s have a look at the code I used to render post dates.<\/p>\n\n\n

$post_date_gmt       = get_post_time( 'c'<\/span>, true<\/span>, null<\/span>, false<\/span> );\n$post_date_formatted = get_date_from_gmt( $post_date_gmt, get_option( 'date_format'<\/span> ) );\n\nif<\/span> ( felix_arntz_v6_is_amp() ) {\n\t\/* translators: %s: post time period *\/<\/span>\n\t$posted      = _x( 'Posted %s'<\/span>, 'post date'<\/span>, 'felix-arntz-v6'<\/span> );\n\t$locale      = substr( get_locale(), 0<\/span>, 2<\/span> );\n\t$time_string = '<amp-timeago height=\"24\" layout=\"fixed-height\" datetime=\"%1$s\" locale=\"'<\/span> . esc_attr( $locale ) . '\">%2$s<\/amp-timeago>'<\/span>;\n} else<\/span> {\n\t\/* translators: %s: post date *\/<\/span>\n\t$posted      = _x( 'Posted on %s'<\/span>, 'post date'<\/span>, 'felix-arntz-v6'<\/span> );\n\t$time_string = '<time class=\"entry-date\" datetime=\"%1$s\">%2$s<\/time>'<\/span>;\n}\n\n$time_string = sprintf(\n\t$time_string,\n\tesc_attr( $post_date_gmt ),\n\tesc_html( $post_date_formatted )\n);\n\n?>\n<span<\/span> class<\/span>=\"posted-on\"<\/span>><\/span>\n\t<?php<\/span>\n\tprintf(\n\t\tesc_html( $posted ),\n\t\t'<a href=\"'<\/span> . esc_url( get_permalink() ) . '\" rel=\"bookmark\">'<\/span> . $time_string . '<\/a>'<\/span> \/\/ phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped<\/span>\n\t);\n\t?><\/span><\/span>\n<\/span<\/span>><\/span><\/span>\n<?php<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, there is a function felix_arntz_v6_is_amp()<\/code>. This is a simple wrapper function for checking whether we should serve AMP content for the current request. I recommend you to add a similar function to your theme. Here is its simple code:<\/p>\n\n\n
\/**\n * Checks whether the current context is an AMP endpoint.\n *\n * @since<\/span> 1.0.0\n *\n * @return<\/span> bool True if an AMP endpoint, false otherwise.\n *\/<\/span>\nfunction<\/span> felix_arntz_v6_is_amp<\/span>()<\/span> <\/span>{\n\treturn<\/span> function_exists( 'is_amp_endpoint'<\/span> ) && is_amp_endpoint();\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Depending on whether AMP should be served or not, we then decide on which tag to render, and also which text to use in combination with it. “Posted on August 4th, 2018” sounds correct, but “Posted on 2 months ago” doesn’t, right? Therefore, when rendering a relative time period via amp-timeago<\/code>, we need to adjust the related string to get the proper “Posted 2 months ago” output. The only additional tweaks we need for amp-timeago<\/code> is providing our site’s language to it, which we can detect via get_locale()<\/code>, and provide a height<\/code> attribute to it. I chose 24 because that fits well with the font size and line height on my site.<\/p>\n\n\n\n
Note that the datetime<\/code> attribute of both the time<\/code> and amp-timeago<\/code> tags requires a date in\u00a0ISO 8601 format, with timezone information. To get this in a way that we can a 100% rely on, we need to use the GMT date – as indicated before, for other timezones things can get clunky here for multiple reasons.<\/p>\n\n\n\n
And that is already it – you can now render your post dates as related time periods via the\u00a0amp-timeago<\/code> component.<\/p>\n\n\n\n
Displaying relative comment dates<\/h3>\n\n\n\n
Just as an extra addition, I’ll share the code to accomplish this for comment dates as well. You might have a dedicated template for a single comment in your theme where you could use that. Here is the code responsible for rendering the current comment date with amp-timeago<\/code> support:<\/p>\n\n\n
$comment_date_gmt       = get_comment_time( 'c'<\/span>, true<\/span>, false<\/span> );\n$comment_date_formatted = sprintf(\n\t\/* translators: 1: comment date, 2: comment time *\/<\/span>\n\t__( '%1$s at %2$s'<\/span>, 'felix-arntz-v6'<\/span> ),\n\tget_date_from_gmt( $comment_date_gmt, get_option( 'date_format'<\/span> ) ),\n\tget_date_from_gmt( $comment_date_gmt, get_option( 'time_format'<\/span> ) )\n);\n\nif<\/span> ( felix_arntz_v6_is_amp() ) {\n\t$locale      = substr( get_locale(), 0<\/span>, 2<\/span> );\n\t$time_string = '<amp-timeago height=\"24\" layout=\"fixed-height\" datetime=\"%1$s\" locale=\"'<\/span> . esc_attr( $locale ) . '\">%2$s<\/amp-timeago>'<\/span>;\n} else<\/span> {\n\t$time_string = '<time datetime=\"%1$s\">%2$s<\/time>'<\/span>;\n}\n\n$time_string = sprintf(\n\t$time_string,\n\tesc_attr( $comment_date_gmt ),\n\tesc_html( $comment_date_formatted )\n);\n\n?>\n<div<\/span> class<\/span>=\"comment-date\"<\/span>><\/span>\n\t<a<\/span> href<\/span>=\"<?php echo esc_url( get_comment_link() ); ?>\"<\/span>><\/span>\n\t\t<?php<\/span> echo<\/span> $time_string; \/* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped *\/<\/span> ?><\/span><\/span>\n\t<\/a<\/span>><\/span>\n<\/div<\/span>><\/span><\/span>\n<?php<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Note that the markup is a bit different, but that is just because I personally render comment dates differently than post dates. They also don’t have the “Posted on…” \/ “Posted…” prefix. Otherwise, the code is fairly similar, with the exception that comment templating functions are used instead of the post templating functions.<\/p>\n","protected":false},"excerpt":{"rendered":"
In my post about how I renewed my website with Gutenberg and native AMP support I mentioned that I’d be sharing some implementation details. A couple days ago I posted about how I built a reusable section block with Gutenberg. Today we’re going to look at an AMP-specific feature and how I made use of […]<\/p>\n","protected":false},"author":1,"featured_media":1412,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[71,97],"tags":[],"class_list":["post-1403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wordpress"],"yoast_head":"\nUsing amp-timeago for relative dates in WordPress - felix-arntz.me<\/title>\n<meta name=\"description\" content=\"In this post I will explain how you can use the amp-timeago component to render relative time periods on your Native-AMP WordPress site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using amp-timeago for relative dates in WordPress - felix-arntz.me\" \/>\n<meta property=\"og:description\" content=\"In this post I will explain how you can use the amp-timeago component to render relative time periods on your Native-AMP WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\" \/>\n<meta property=\"og:site_name\" content=\"felix-arntz.me\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-03T17:31:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T16:12:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felix\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@felixarntz\" \/>\n<meta name=\"twitter:site\" content=\"@felixarntz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felix\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\"},\"author\":{\"name\":\"Felix\",\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\"},\"headline\":\"Using amp-timeago to display relative dates on your Native-AMP site\",\"datePublished\":\"2018-10-03T17:31:52+00:00\",\"dateModified\":\"2025-02-11T16:12:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\"},\"wordCount\":955,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\"},\"image\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg\",\"articleSection\":[\"Tutorials\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\",\"url\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\",\"name\":\"Using amp-timeago for relative dates in WordPress - felix-arntz.me\",\"isPartOf\":{\"@id\":\"https:\/\/felix-arntz.me\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg\",\"datePublished\":\"2018-10-03T17:31:52+00:00\",\"dateModified\":\"2025-02-11T16:12:23+00:00\",\"description\":\"In this post I will explain how you can use the amp-timeago component to render relative time periods on your Native-AMP WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage\",\"url\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg\",\"contentUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg\",\"width\":1200,\"height\":675,\"caption\":\"Using amp-timeago for relative dates\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/felix-arntz.me\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\/\/felix-arntz.me\/blog\/category\/tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using amp-timeago to display relative dates on your Native-AMP site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/felix-arntz.me\/#website\",\"url\":\"https:\/\/felix-arntz.me\/\",\"name\":\"felix-arntz.me\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/felix-arntz.me\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55\",\"name\":\"Felix\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png\",\"contentUrl\":\"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png\",\"width\":512,\"height\":512,\"caption\":\"Felix\"},\"logo\":{\"@id\":\"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/\"},\"description\":\"Developer Programs Engineer at Google. WordPress Core Committer. Previously Yoast. Runner, musician, movie geek. Aprendiendo espa\u00f1ol. Fueled by Mountain Dew.\",\"sameAs\":[\"https:\/\/x.com\/felixarntz\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using amp-timeago for relative dates in WordPress - felix-arntz.me","description":"In this post I will explain how you can use the amp-timeago component to render relative time periods on your Native-AMP WordPress site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/","og_locale":"en_US","og_type":"article","og_title":"Using amp-timeago for relative dates in WordPress - felix-arntz.me","og_description":"In this post I will explain how you can use the amp-timeago component to render relative time periods on your Native-AMP WordPress site.","og_url":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/","og_site_name":"felix-arntz.me","article_published_time":"2018-10-03T17:31:52+00:00","article_modified_time":"2025-02-11T16:12:23+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg","type":"image\/jpeg"}],"author":"Felix","twitter_card":"summary_large_image","twitter_creator":"@felixarntz","twitter_site":"@felixarntz","twitter_misc":{"Written by":"Felix","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#article","isPartOf":{"@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/"},"author":{"name":"Felix","@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55"},"headline":"Using amp-timeago to display relative dates on your Native-AMP site","datePublished":"2018-10-03T17:31:52+00:00","dateModified":"2025-02-11T16:12:23+00:00","mainEntityOfPage":{"@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/"},"wordCount":955,"commentCount":0,"publisher":{"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55"},"image":{"@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage"},"thumbnailUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg","articleSection":["Tutorials","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/","url":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/","name":"Using amp-timeago for relative dates in WordPress - felix-arntz.me","isPartOf":{"@id":"https:\/\/felix-arntz.me\/#website"},"primaryImageOfPage":{"@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage"},"image":{"@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage"},"thumbnailUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg","datePublished":"2018-10-03T17:31:52+00:00","dateModified":"2025-02-11T16:12:23+00:00","description":"In this post I will explain how you can use the amp-timeago component to render relative time periods on your Native-AMP WordPress site.","breadcrumb":{"@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#primaryimage","url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg","contentUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg","width":1200,"height":675,"caption":"Using amp-timeago for relative dates"},{"@type":"BreadcrumbList","@id":"https:\/\/felix-arntz.me\/blog\/using-amp-timeago-relative-dates-native-amp-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/felix-arntz.me\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/felix-arntz.me\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Using amp-timeago to display relative dates on your Native-AMP site"}]},{"@type":"WebSite","@id":"https:\/\/felix-arntz.me\/#website","url":"https:\/\/felix-arntz.me\/","name":"felix-arntz.me","description":"","publisher":{"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felix-arntz.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/c7c3c658d2e59bbddf3e8684a6846e55","name":"Felix","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/","url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png","contentUrl":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/09\/felix-arntz-site-icon.png","width":512,"height":512,"caption":"Felix"},"logo":{"@id":"https:\/\/felix-arntz.me\/#\/schema\/person\/image\/"},"description":"Developer Programs Engineer at Google. WordPress Core Committer. Previously Yoast. Runner, musician, movie geek. Aprendiendo espa\u00f1ol. Fueled by Mountain Dew.","sameAs":["https:\/\/x.com\/felixarntz"]}]}},"jetpack_featured_media_url":"https:\/\/felix-arntz.me\/wp-content\/uploads\/2018\/10\/using-amp-timeago-for-relative-dates.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts\/1403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/comments?post=1403"}],"version-history":[{"count":10,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts\/1403\/revisions"}],"predecessor-version":[{"id":1420,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/posts\/1403\/revisions\/1420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/media\/1412"}],"wp:attachment":[{"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/media?parent=1403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/categories?post=1403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felix-arntz.me\/api\/wp\/v2\/tags?post=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
First of all, as you can see, I use the GMT time the post was published at. This doesn’t have to do anything with AMP, I just strongly recommend following this pattern for any moment you are rendering dates. When a site changes their timezone, all dates from old posts will become invalid then – the GMT dates do not though. So relying on GMT will ensure your dates are always accurate, and you can still display them in the local time (which is what get_date_from_gmt()<\/code> is used for). If you are interested in more background on this, please watch the amazing WordCamp session by Rarst about broken time<\/a>.<\/p>\n\n\n\n