Adding the date and time to the WordPress Loop seems like a simple enough task, right?
Well, yes. It can be a case of coding a simple template tag and letting WordPress do the work for you. But sometimes you can run into problems along the way.
In this quick tip, I’ll show you the different functions WordPress gives you for displaying the date and time and tell you which ones to use if you run into snags.
If you need a quick refresher on using PHP for WordPress, check out my free course on the topic.
The Available Template Tags
WordPress gives you four functions to output the date and/or time. These are:
the_date(): By default, it will echo the date of the post in the format
F j, Y, so if the post was published on 20 November 2018, it would echo November 20, 2018.
get_the_date(): This fetches the date and doesn’t echo it out. To echo it, you’d use
echo get_the_date(), which gives you the same result as
the_date(). It’s useful if you’re already using
echoin your code. It can also help you get round the problem of dates not being displayed, as you’ll see shortly.
get_the_time(): These fetch the time by default, but if you specify date formatting, you can also include the date. You could even use this just to output the date if you configured the formatting to do so, but it would more sense to use
Formatting the Date
Each function has a default format, which you can override if you need to. To do this, you’ll need to use standard PHP date and time formatting.
Here are some examples, all for a post published on 20 November 2018.
the_date()would output November 20, 2018 by default.
echo get_the_date( l, S M Y )would output Tuesday, 20th Nov 2018.
the_time( 'g:i a' )would output 2:03 pm.
echo get_the_time( 'G:i' )would output 14:03.
the_time( 'g:i a, D, j F y' )would output 2:03 pm, Tues, 20 November 18.
Troubleshooting Dates in the Loop: Missing Dates in an Archive Page
If you are using
the_date() to output dates on an archive page, and you find that the date isn’t being displayed with some posts, that’s because
the_date() doesn’t repeat the date for subsequent posts published on the same day as a previous one.
Sometimes you might want to keep it like this, if you don’t want to repeat the date for every post published that day.
But if you want to ensure that all posts have their date output with the title and any other content you’re outputting, you’ll need to use another function. You can use any of the other three functions above.
The simplest option is to replace
echo get_the_date(). If you wanted to add the time, either
echo get_the_time() will work.
Note: If you’re puzzled by the fact that
the_date() throws up this problem but
the_time() doesn’t, it’s because posts published on the same date weren’t published at the same time. You’d have to go to a lot of effort, either scheduling posts, editing the publication times, or co-ordinating efforts between two bloggers, for that to happen!
I had this problem in the front page template of a theme I coded for a client. In this template were a number of loops, all leading to different content types on the site and all coded using
WP_Query. The problem wasn’t apparent until the day they added two posts (not something they normally did). They were puzzled as to why the second post’s date didn’t appear on the home page and kept editing it, refreshing it and republishing it until they gave up and asked me.
Here’s the original code:
<ul class="newsletters"> <?php $query = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'newsletters', 'posts_per_page' => 8 ) ); while ($query->have_posts()) : $query->the_post(); ?> <li class="home newsletter"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> - <?php the_date( 'j F, Y' ); ?></a></li> <?php endwhile; ?> </ul>
I edited the function so it read like this:
<ul class="newsletters"> <?php $query = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'newsletters', 'posts_per_page' => 8 ) ); while ($query->have_posts()) : $query->the_post(); ?> <li class="home newsletter"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> - <?php echo get_the_date( 'j F, Y' ); ?></a></li> <?php endwhile; ?> </ul>
In the line beginning
li class="home newsletter", I replaced
the_date( 'j F, Y' ) with
echo get_the_date( 'j F, Y' ). It fixed the problem.
So if you ever find that dates aren’t showing up in your archives, this might be the solution.
Some Tips for Displaying the Date and Time
As mentioned earlier in the article, you can use four different functions to output the publication date for posts on archive pages.
the_date() will output the date but it will only output the date once for multiple posts published on the same day. The function
get_the_date() returns the date for all posts even if they are published on the same date. However, you need to use
echo get_the_date() to output the date.
the_time() will also output the date separately for each post. However, this function will output the time according to the format specified as the value of
time_format option by default. You can use it to output the date by calling it as
the_time('j F, Y'). The
get_the_time() function works in a similar manner but it returns the date instead of outputting it. This means that you will have to use
echo get_the_time('j F, Y') to output the date. You could simply replace all occurrences of
the_date('j F, Y') with
the_time('j F, Y') wherever you want to show the date.
<li class="home newsletter"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> - <?php the_time( 'j F, Y' ); ?></a></li>
Additional Parameters for the
Unlike other functions,
the_date() accepts four parameters. The second and third parameters are used to specify the string that should be shown before and after the date. Similar functionality can be replicated for other functions by using the code below:
<?php // This will wrap the publication date in span tags. the_date( 'j F, Y', '<span class="pub-date">', '</span>' ); // The same thing can be achieved by writing the span tags around the get_the_date() and get_the_time() functions. echo '<span class="pub-date">'.get_the_date( 'j F, Y').'</span>'; echo '<span class="pub-date">'.get_the_time( 'j F, Y').'</span>'; ?>
If you want to learn more about WordPress, check out our other courses and tutorials here on Envato Tuts+!
Displaying the Date and Time in the WordPress Loop