How to Display Relative Date as Time Ago in WordPress Posts

Learn how converting WordPress post dates to a "time ago" format can enhance your site's user engagement and readability. Discover specific plugins and custom code snippets as solutions to easily implement this feature.

Chance M

In today’s fast-paced digital world, displaying post dates as “time ago” or using relative dates on your WordPress site can significantly enhance user engagement. For instance, instead of showing the exact date of a post like “March 15, 2021,” your site could display “6 months ago,” making it immediately clear how recent the information is without the reader having to do the math.

Example of WordPress posts showing dates in 'Time Ago' format for better readability.

Imagine a reader landing on your WordPress blog and seeing “Posted 3 minutes ago” on a breaking news article or “Updated 2 days ago” on a tutorial; it instantly conveys freshness and relevance, encouraging deeper engagement with your content. This approach not only makes content feel more current and relatable but also subtly signals to readers that they’re getting the latest information or insights, prompting them to dive deeper into your posts.

Illustration of the default WordPress date and time settings in the dashboard.

In this article, we’ll guide you through the simple yet effective methods to switch your WordPress post dates to a “time ago” format, enhancing readability and providing a better user experience. Whether you’re new to WordPress or looking to refine your site, follow along for easy-to-implement solutions.

Why Use “Time Ago” Format for Post Dates?

Incorporating “time ago” format for displaying post dates on your WordPress site offers several advantages that can enhance the overall user experience and engagement. Understanding these benefits will help you appreciate why this small change can have a significant impact on how visitors interact with your content. Here are the key reasons to consider this approach:

  1. Immediacy and Relevance:
    The “time ago” format conveys the freshness of content more effectively than traditional date stamps. It helps users quickly assess how recent the information is, making your posts feel more immediate and relevant.
  2. Enhanced User Experience:
    Relative dates simplify the mental processing required to understand when content was published, offering a smoother, more intuitive browsing experience. This user-friendly approach can keep visitors on your site longer.
  3. Global Appeal:
    Unlike specific date formats that vary by region (e.g., MM/DD/YYYY vs. DD/MM/YYYY), “time ago” is universally understood, making your site more accessible to a global audience.
  4. Dynamic Content Perception:
    By displaying when content was last updated in a relative manner, your site appears more dynamic. This perception of actively updated content can encourage repeat visits.
  5. Reduced Time Sensitivity:
    For evergreen content, the “time ago” format can prevent posts from seeming outdated, even if they’re still relevant and valuable to readers.

Option 1: Using Plugins to Display Relative Dates

For WordPress users seeking a hassle-free way to display relative dates or “time ago” format for their post dates, plugins are the perfect solution. This approach requires no coding knowledge and can be implemented quickly.

Many WordPress plugins can convert date formats to a relative “time ago” style. Three highly recommended options are:

1. WP-RelativeDate

Demonstration of WP-RelativeDate plugin features for automatically converting WordPress dates to 'time ago' expressions.

WP-RelativeDate enhances your WordPress site by automatically converting post and comment dates to more understandable relative terms, such as “Today,” “Yesterday,” or “2 Weeks Ago.” This plugin simplifies the time references across your site, making it easier for users to gauge the recency of discussions and articles. Beyond just adjusting date displays, WP-RelativeDate offers shortcodes, allowing for flexible date and time presentations within your content. It’s an invaluable tool for creating an engaging, user-centric website where time-sensitive content is easily navigated. WP-RelativeDate

2. Meks Time Ago

Screenshot of Meks Time Ago plugin settings for converting WordPress dates to relative 'time ago' format.

Meks Time Ago is a dynamic WordPress plugin designed to transform your website’s timestamps into relative “time ago” formats, such as “5 minutes ago” or “2 days ago.” This plugin is perfect for bloggers and news-oriented sites looking to present content as fresh and timely. By automatically updating timestamps, Meks Time Ago eliminates the need for manual adjustments, ensuring that your audience always receives the most current context at a glance. Its seamless integration into WordPress themes makes it a favorite among site administrators aiming for an enhanced user experience without the complexity. Meks Time Ago

3. WP Date and Time Shortcode

Interface preview of WP Date and Time Shortcode plugin for customizing WordPress date and time displays.

WP Date and Time Shortcode offers unparalleled flexibility in displaying dates and times on your WordPress site. With a rich set of shortcodes, this plugin caters to a wide variety of date and time display needs, from showing current dates in posts to customizing date formats for past and future events. Whether you’re setting up an event calendar, blogging about historical events, or updating content in real-time, this plugin provides the tools to do so with precision and ease. Its extensive customization options make it a must-have for websites that demand detailed time and date management. WP Date and Time Shortcode

Why Use Plugins?

  • Ease of Use: Plugins offer a straightforward, no-code solution for modifying your site’s date display format.
  • Quick Implementation: You can change your site’s date format within minutes, enhancing user engagement without delving into code.
  • Flexibility: Many plugins come with additional settings to fine-tune how and where the relative dates are shown, providing you with control over the user experience.

Using plugins to display relative dates on your WordPress site is an effective way to make your content feel more timely and connected to the present moment. By following these simple steps, you can improve the readability and user engagement of your site with minimal effort.

Option 2: Custom Code Snippets for Advanced Users

Advanced users seeking optimal performance and customization may prefer to implement “time ago” or relative dates using custom code snippets. This approach allows for a more tailored experience and avoids the potential bloat of additional plugins. Here’s a detailed guide to safely implementing these changes:

Before adding any custom code to your WordPress site, ensure you’re set up for a safe and reversible process:

  1. Backup Your Site: Always start with a complete backup of your WordPress site to safeguard against any potential issues.
  2. Use a Child Theme: To prevent updates to your theme from overwriting your customizations, use a child theme. If you don’t have one, consider creating a child theme for your active theme. This is crucial for maintaining changes long-term.

For implementing custom code, you have several secure methods to add custom code to your WordPress site:

A. Using a Child Theme’s functions.php File

  1. Access functions.php of your WordPress website.
  2. Navigate to Appearance > Theme Editor in the WordPress dashboard.
  3. Select your child theme and locate the functions.php file.
  4. Paste the following code snippet at the end of the file:
function digitap_custom_time_ago_function() {
    return human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago';
}
add_filter('get_the_time', 'digitap_custom_time_ago_function'); // Modifies post time to "time ago" format
add_filter('get_the_date', 'digitap_custom_time_ago_function'); // Modifies post date to "time ago" format
add_filter('get_comment_date', 'digitap_custom_time_ago_function'); // Optional: Modifies comment date to "time ago" format

Save and Update the file. This code will now convert all date and time outputs on your site to a “time ago” format.

B. Using a Site-Specific Plugin

If you prefer not to edit theme files directly, create a Site-Specific WordPress Plugin:

  1. Start by opening a plain text editor like Notepad (Windows), TextEdit (Mac), or a code editor like Visual Studio Code.
  2. Create a new file and name it something unique, for example, digitap-custom-time-ago.php. The name should be unique to avoid conflicts with existing plugins.
  3. Add the following PHP code to your new file and customize the Plugin Name, Plugin URI, Author, and Author URI with your details.
  4. Using an FTP client, upload the file to the /wp-content/plugins/ directory of your WordPress site.
  5. Log into your WordPress dashboard, navigate to Plugins > Installed Plugins, find “Digitap Custom Time Ago”, and click Activate.
  6. Check your site to ensure that post and comment dates are now displayed in the “time ago” format.
<?php
/**
 * Plugin Name: Digitap Custom Time Ago
 * Plugin URI: https://digitap.net/
 * Description: Converts all post dates and times on the Digitap site into a "time ago" format to enhance readability and user engagement.
 * Version: 1.0
 * Author: Digitap
 * Author URI: https://digitap.net/
 */

// Function to convert post dates and times to a "time ago" format
function digitap_custom_time_ago_function() {
    return human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago';
}

// Apply the custom "time ago" function to post dates
add_filter('get_the_time', 'digitap_custom_time_ago_function'); // Modifies post time
add_filter('get_the_date', 'digitap_custom_time_ago_function'); // Modifies post date

// Optionally, apply the custom "time ago" function to comment dates
add_filter('get_comment_date', 'digitap_custom_time_ago_function'); // Modifies comment date
?>

C. Using a Custom Code Plugin

For those who want an easier route without editing files:

  1. Install a Custom Code Plugin: Plugins like “Code Snippets”, “My Custom Functions”, “Snippet”, and “Advanced Custom Code” allow you to add custom PHP without editing your theme files directly.
  2. Add New Snippet: Once installed, use the plugin to add a new snippet with the custom “time ago” code provided above and activate it.
  3. Check Your Site: Browse through your site to ensure the “time ago” format is correctly applied to post dates.
  4. Troubleshoot if Necessary: If you encounter any issues, revisit your code for typos or errors. Consider deactivating other plugins to rule out conflicts.
function digitap_custom_time_ago_function() {
    return human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago';
}
add_filter('get_the_time', 'digitap_custom_time_ago_function'); // Modifies post time to "time ago" format
add_filter('get_the_date', 'digitap_custom_time_ago_function'); // Modifies post date to "time ago" format
add_filter('get_comment_date', 'digitap_custom_time_ago_function'); // Optional: Modifies comment date to "time ago" format

Advantages of Custom Code

  • Performance: Keeping your site lean by minimizing plugin use can enhance speed and performance.
  • Customization: Directly editing code or using a site-specific plugin offers unmatched flexibility.
  • Education: Hands-on experience with WordPress’s inner workings can be incredibly valuable for personal growth and site management skills.

Using custom code snippets for displaying “time ago” or relative dates in WordPress is a powerful option for those seeking efficiency and customization. By following these detailed steps and choosing the method that best suits your comfort level, you can achieve a personalized and engaging site experience without reliance on external plugins.

Option 3: Directly Modifying Theme Files (For Theme Developers)

For theme developers or those comfortable with deeper customization of their WordPress theme, directly modifying theme files offers the most control over how “time ago” or relative dates are displayed. This method allows for precise placement and styling within your theme’s structure. Here’s how to integrate the “time ago” format directly into your WordPress theme:

Step 1: Set Up a Safe Development Environment

  1. Use a Child Theme: Always work with a child theme to ensure that your modifications are preserved during theme updates. If you haven’t already, create a child theme for your current theme.
  2. Backup Your Site: Before making any changes, back up your entire WordPress site. This precaution ensures you can restore your site if needed.

Step 2: Identify Where to Add the Code

Locate the Template Files for your WordPress website. Determine which template files (e.g., single.php, archive.php, index.php) display the dates you want to modify. This will vary depending on your theme’s structure and where you want the “time ago” dates to appear.

Step 3: Modify Your Theme’s Template Files

  1. Open the Template File: Access your theme’s template file by navigating to Appearance > Theme Editor from the WordPress dashboard and selecting the appropriate file from the right-hand list. Alternatively, use an FTP client to access your files directly.
  2. Find the Date Code: Look for the PHP code that outputs the post date. It usually looks something like the_date(); or get_the_date();.
  3. Replace with Custom Code: Substitute the existing date code with the following snippet, which converts the date to a “time ago” format:
echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago';

This line uses WordPress’s human_time_diff() function to calculate the time difference between the post date and the current time, presenting it in an easily understandable “time ago” format.

Step 4: Save and Test Your Changes

  1. Update the File: After adding your changes, save the file. If you’re using an FTP client, re-upload the modified file to your server.
  2. Review Your Site: Navigate through your site to ensure that the dates are displayed in the “time ago” format correctly. Check different pages and post types if applicable.

Advantages of Direct Theme Modification

  • Precision: Directly editing theme files gives you precise control over where and how “time ago” dates appear in your theme.
  • Integration: This method allows for seamless integration with your theme’s design and structure, enabling custom styling and formatting.
  • Efficiency: By incorporating the functionality directly into the theme, you reduce reliance on external plugins, potentially improving site performance.

Important Considerations

  • Theme Updates: Remember, if you are not using a child theme, your changes will be lost when the theme is updated. Always use a child theme for modifications.
  • Complexity: This approach requires a good understanding of PHP and WordPress theme structure. It’s best suited for those with theme development experience.

Directly modifying theme files is a powerful method for theme developers or advanced users who seek granular control over their site’s presentation of dates. By following the steps outlined above, you can enhance your theme with the dynamic “time ago” format, making your content feel more immediate and engaging to visitors.

Boosting Site Engagement with Relative Date Formatting in WordPress

Implementing the “time ago” format for your WordPress posts is a straightforward process that significantly enhances the user experience by making your content feel more current and engaging. Whether you opt for a plugin for ease of use or dive into custom code for more control, both methods offer a seamless way to keep your site’s content feeling fresh and accessible. Remember, the goal is to make your site as user-friendly as possible, and updating how post dates are displayed is a small but powerful step in that direction. With the steps outlined above, you’re well-equipped to make this update with confidence.

Additional Resources:

  • WP Time Ago: Easily convert your WordPress site dates to a relative “time ago” format with this user-friendly plugin. WP Time Ago
  • Code Snippets: A straightforward plugin for safely adding custom PHP, CSS, or JavaScript snippets to your WordPress site without editing theme files. Code Snippets
  • My Custom Functions: This plugin provides an easy and safe way to add custom functions to your WordPress website. My Custom Functions
  • Snippet: Manage and execute PHP code snippets on your site from the WordPress dashboard with this comprehensive tool. Snippet
  • Advanced Custom Code: Add custom CSS, JavaScript, and HTML code to your site easily with this plugin. Advanced Custom Code
  • WordPress Codex on Child Themes: Learn how to create a child theme to customize your WordPress site without losing your changes on theme updates. WordPress Child Themes
  • FileZilla: A free FTP solution for both client and server, FileZilla offers secure file transfer capabilities. Filezilla Project
  • Cyberduck: An easy-to-use FTP, SFTP, WebDAV, Amazon S3, and OpenStack Swift browser for file transfers. Cyberduck