Using “Time Ago” Dates in WordPress

The byline underneath every WordPress post title by default contains information about when it was published. For a blog, this information takes on special importance because the posts are generally published chronologically. Having a date and time stamp attached to every entry allows your users to get some idea of the context of your post. By default however, this is an absolute value and doesn’t easily reflect how long ago it was published without the user having to do a bit of mental gymnastics. Some bloggers therefore prefer to have the timestamp display a relative date telling visitors how long ago it was written.

It’s not always easy though to figure out exactly how to go about this in WordPress. Of course, you could always delve into the theme files and make modifications to the loop directly. But this is ineffective. You either have to make a child theme or be faced with the prospect of losing your changes every time the theme updates. Moreover, it’s easy to lose track of modifications made directly to theme files without a version control system – something no blogger I know has ever used.

So let’s take a look at a simple and scalable way to change the absolute value of a WordPress timestamp and convert it to a relative one.

Creating “Time Ago” Entries

Here’s a screenshot of how the date time appears below the title of the default WordPress theme TwentyFourteen.

What we need to do is hook into the filter which generates this date value and return the time difference in an internationalized format. So open up your functions.php file or any other place where you insert custom PHP code and paste in the following:

function time_ago_date(  $the_date) {

	return human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ' .__( 'ago' );
}
add_filter( 'get_the_date', 'time_ago_date', 10, 1 );

Make sure you choose a location for the code that doesn’t get erased automatically on every theme update. One great option is to create your own custom plug-in. This hooks into the filter called “get_the_date” and redirects it to our custom function where we simply return “human_time_diff” to get the difference between the current date and time and when the post was published.

After you paste and save the above code, reload your page and see whether or not the date has been replaced by a relative time interval as shown below:

That’s how it works for regular WordPress themes.

Using Theme FrameWorks

However, if you’re using a team framework like Genesis, you need to isolate the appropriate filters and make changes to them. The above code won’t work with Genesis and we need to plug into the “genesis_before_post_content” hook. An easier way however is to make use of the “Genesis Simple Hooks” plug-in.

I’ve written about this add-on before and how it makes it easy to incorporate custom changes into Genesis regardless of the specific child theme as well as theme updates. To create a relative time interval like we did for TwentyFourteen, simply open up the settings of the plug-in and search for the “genesis_before_post_content” hook as shown below:

Tick the check boxes “Unhook genesis_post_info() function from this hook” as well as the “Execute PHP on this hook?”, and paste the following into the text box:

<?php
echo '<div class="post-info"> ' . human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ' .__( 'ago' ) . '</div>';
?>

This simply outputs the date interval and assigns it the “post-info” class for formatting purposes. You can see a reference of Genesis shortcodes if you’re a member to learn how to easily output the author name, links to the comments etc.

Displaying a time interval instead of an absolute value may not be for everyone. But if you want to go ahead with the idea, don’t resort to fiddling around with theme files. Rather, use the techniques above to create scalable solutions that won’t break with future updates and changes.