Readable Date Format

#Problem Problem

The first question raises in your mind is, what do you mean by WordPress readable date? Let me explain.

While writing articles for my blog https://maheshwaghmare.com/, I notice that the date format of the published and draft posts are not readable. With default date format I was few questions:

• How much time ago I have published the post.
• And, How when my scheduled post will publish?

Check the below screenshot of my testing localhost website for reference.

Here,

• First scheduled post Hello world is scheduled on date 2019/12/18
• The second post with title Another is published on date 2019/11/08

Let’s assume that you have 100+ posts. Some of them are published and some are scheduled.

Then, It is very hard to filter which posts are already published and which are scheduled for how much time.

So, I thought I’m not alone who faces such a problem. And create a filter that solves this problem.

Top ↑

#Expectation Expectation

Below the date format is more readable than the above one.

• First scheduled post Hello world is scheduled on date 2 weeks in advance
• The second post with title Another is published on date 4 weeks ago

Check the below screenshot for reference.

Here,

The published and scheduled date is more readable than default one.

Top ↑

#Solution Solution

WordPress provides the filter post_date_column_time which allows us to modify the markup of date from the date column.

#Add Filter Add Filter

Add filter post_date_column_time with callback function prefix_highlight_post_date_with_readable_format.

if( ! function_exists( 'prefix_highlight_post_date_with_readable_format' ) ) :
     function prefix_highlight_post_date_with_readable_format( $t_time = '', $post = object, $date = '', $mode = '' ) {
         // Code Goes Here..
     }
     add_filter( 'post_date_column_time', 'prefix_highlight_post_date_with_readable_format', 10, 4 );
 endif;

Top ↑

#Apply for only Posts Apply for only Posts

For now, I just want to modify the date for the post type post. Not for any other post formats (page, custom post type, etc).

So, Let’s allow only for post with the below code.

 // If current list post type is not a `post`?
 // Then return default date format.
 if( 'post' !== $post->post_type ) {
   return $t_time;
 } 

Top ↑

#Convert Date Format Convert Date Format

This is the main step where we convert the date format into a readable format.

 $readable_date = human_time_diff( strtotime( $post->post_date ) ); 

Here, We have the $post object which stores the post date in object format. Let’s consider our post publish date is stored as 2019-11-05 02:11:16.

So,

• $post->post_date store the in format 2019-11-05 02:11:16
• strtotime( $post->post_date ) convert above format with 1572919876
• And finally human_time_diff( strtotime( $post->post_date ) ) convert above format with 1 month

With WordPress function human_time_diff() we can convert the date in a human-readable format which is exactly what we want in our case.

With the above code, our date 2019/12/18 is changed with 2 weeks and 2019/11/08 with 4 weeks.

Top ↑

#Suffix Strings Suffix Strings

Now, Its time to add suffix _____ in advance and _____ ago. The logic for this is very simple.

 // If post status is `draft` then assign `red` color.
 if( 'future' === $post->post_status ) {
   $readable_date = $readable_date . ' in advance'; // E.g. 2 weeks in advance
 }

 // If post status is `publish` then assign `blue` color.
 if( 'publish' === $post->post_status ) {
   $readable_date = $readable_date . ' ago';  // E.g. 1 month ago
 } 

Here, We have a post status stored in $post->post_status. So we have concate/join our human readable date.

• For future status, we have concate/join the string in advance.
• For publish status, we have concate/join the string ago.

(Note: future status post means scheduled post.)

For that our human-readable date changes as:

• 2019/12/18 > 2 weeks > 2 weeks in advance
• 2019/11/08 > 4 weeks > 4 weeks ago

Top ↑

#Return Filtered Values Return Filtered Values

 return '<span>' . $readable_date . '</span>'; 

Finally, return the filtered readable date.

Top ↑

#Complete Code Snippet Complete Code Snippet

Copy and paste the below code snippet and try it yourself.

Again let’s see the final result with the below screenshot.

Oh! If you see that the red color for the scheduled post and blue color for the published date? You can easily see it in the above code snippet.