Monday, January 18, 2021

Displaying the Date and Time in the WordPress Loop

Displaying the Date and Time in the WordPress Loop

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 echo in your code. It can also help you get round the problem of dates not being displayed, as you'll see shortly.
  • the_time() and 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 the_date() or echo get_the_date().

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 the_date() with echo get_the_date(). If you wanted to add the time, either the_time() or 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.

Using the the_date() and get_the_date() Functions

Using 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.

Using the the_time() and get_the_time() Functions

The function 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 the_date() Function

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+!

This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries.


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)