How to Display Recent Posts With Date in WordPress

Created with:

Visibility:

public

October 14, 2023

Organizing and displaying your recent posts in WordPress is crucial for keeping your readers engaged. It not only keeps them updated, but also encourages them to dive deeper into your site’s content. But, what if you want to display the publication dates along with these recent posts? WordPress doesn’t do that by default. In this guide, we will show you how to add dates next to your recent posts, providing an easy way for users to see your most current content.

					function wpturbo_recent_posts_with_date() { 
    
    $args = array(
        'numberposts' => 10,
        'post_status' => 'publish'
    ); 

    $recent_posts = wp_get_recent_posts( $args );

    foreach( $recent_posts as $post ){
        $post_date = get_the_date( 'F j, Y', $post['ID'] );
        echo '<li><a href="' . get_permalink( $post['ID'] ) . '">' .   $post['post_title']. '</a> <span class="post-date">' . $post_date . '</span></li> ';
    }
    
    wp_reset_query();

}
add_shortcode('recent-posts-date', 'wpturbo_recent_posts_with_date');

Firstly, we define a function called wpturbo_recent_posts_with_date(), which uses WordPress built-in function wp_get_recent_posts() to retrieve the most recent posts.

Before retrieving the posts, we need to specify the required conditions. For that purpose we establish the $args array:

$args = array(
    'numberposts' => 10,
    'post_status' => 'publish'
);

In this array, numberposts gives the number of posts to return, which is 10 in this case. The post_status set to ‘publish’ ensures that only published posts will be returned.

Then we use the wp_get_recent_posts() function with the specified $args array to retrieve the recent posts:

$recent_posts = wp_get_recent_posts( $args );

In the following we loop through the array of $recent_posts. In each iteration, we obtain the post’s date with get_the_date() function, taking ‘F j, Y’ as the format, and the ID of the post as arguments, and storing it in $post_date:

$post_date = get_the_date( 'F j, Y', $post['ID'] );

Here ‘F’ fully spells out the month, ‘j’ shows the day of the month without leading zeros and ‘Y’ gives the 4 digit representation of the year.

In the next step, we echo an li element with:

An a tag inside it, having the link to the post in the href attribute, that’s retrieved using get_permalink( $post['ID'] ) function.
The title of the post, gotten with $post['post_title'].
A span tag, with a class name of ‘post-date’, that contains the post’s date.

echo '<li><a href="' . get_permalink( $post['ID'] ) . '">' .   $post['post_title']. '</a> <span class="post-date">' . $post_date . '</span></li> ';

After the loop ends, we use the wp_reset_query() function to restore the global $post variable which may be altered from the loop of $recent_posts:

wp_reset_query();

Finally, we make this function available as a shortcode, called ‘recent-posts-date’, using add_shortcode(). This shortcode can be added to post or page content and it will show a list of 10 recent posts with their dates:

add_shortcode('recent-posts-date', 'wpturbo_recent_posts_with_date');

How to Display Recent Posts With Date in WordPress

Add Snippet To Project