How to Write a Custom "Updated" Timestamp for Your Blog Posts

We’ve all seen blog posts with a "published" timestamp to let readers know when the post was officially published.

But what about an "updated" timestamp?

While our blog posts are ideally considered complete upon publishing, there are plenty of times when updates need to be made.

Maybe you realized that you misrepresented a section, or noticed a typo, or perhaps you’ve changed your mind (hey, it happens). Whatever your reason, you can include a note on when the post was updated so your readers can know that you’re on top of your content. Not only does it show that you care, it shows your site is up to date with what’s going on in your industry and responsive to changes.

Currently in HubSpot's blog markup there is a default filter for when the post was updated, but it is strictly in UTC time as opposed to the "published" filter which is localized by default.

In order to get the timestamp to display correctly, you'll need to write a custom offset into the blog template. If that sounds frightening, don’t worry, it needn’t be. In fact, in this post I’ll walk you through how you can add a custom timestamp to your blog, so that you can display your posts' updated times in your own localized time zone.

And here's how that code might look in your blog post HTML:

So what does this mean? Let’s go through it line by line.

Simple enough, right? Here you are setting your own custom variable 'update_time' to be equal to the default HubL token 'content.updated'. The blog tool will automatically set the 'content.updated' token to be the time that the post was last updated. However, that value will be in UTC time, so you’ll want to manipulate this with your custom offset in the next step to make it more readable.

Here is where the fun begins. Now you are setting your custom offset from UTC time, which means you'll need to put the offset in milliseconds. For example, Boston, Massachusetts is UTC -4:00, so the offset would be 4hrs x 3,600,000 milliseconds = 14,400,000. How can you find your offset if you don’t want to jump through the calculations? Typing in "convert hours to milliseconds" to Google pulls up a handy calculator that you can utilize.

You now add (or subtract) your offset from your custom variable 'update_time', and make it equal to a new variable 'new_time' that you can call and use as needed. This will display the time from the default HubL token while taking your offset into account so that the time displayed from your custom token is accurate to your own time zone.

Now you have a new HubL token, 1674085053375, which you can use in your blog post HTML to display the time that the post was updated. There's one more step you'll need to follow before this is ready to go: formatting the new token so that it uses your preferred datetime layout. You can do this by using the 'datetimeformat' HubL filter.

My preferred datetime layout is for the date to be in "MM/DD/YY" format, and then have the time in "hh:mm AM/PM." To make sure my 1674085053375 token followed that format, I used the following code in my post HTML:

01/18/23 11:37 PM

Note: that's a lower-case "L" where the hour goes.

For the last step, you'll want to make sure that the "updated on" value only appears when the updated date is later than the published date. You'll also need to add the text that goes around your updated date.

Here's an example of how I set it up for my blog:

You can see on line 13 that I've added some text around the 1674085053375 token. Specifically, I added ", updated on...EST [my time zone]." Lines 12 and 14 are the ones that make sure that the token only appears when the update occurred after the initial publishing time. Here's the full code of lines 12-14 (line 12 wraps around to form two lines here):

There you have it. With a little bit of math and a bit of coding know-how, you’ll have a custom offset to display a localized and accurate updated time for your blog posts. Now your readers can see that you’re on top of your game, and see these updates at a time that makes sense as opposed to a default time in UTC. For more information on HubL and its many uses, check out our documentation on our Designers site!