HTML5 and WordPress - The <time> Element

I’ve been working on the HTML 5 WordPress theme for La Vie En Ville today. The website is very beta at this time (read: it will only work properly in modern browsers as Safari 4 and Firefox 3.5). In this short tutorial I’m going to show you how to implement the <time> element for blog posts and comments.

Blog Posts

Displaying the time of the current post in WordPress is done with the template tag the_time(). Formatting the time string can be done with the standard PHP format charachters. The articles below will give you a more detailed explanation of how this works.

• Formatting Date and Time (WordPress Codex)
• PHP: date (PHP Manual)

The datetime attribute requires an ISO 8601 date. The format character you need for this is c. The second call to the_time() will render the date as July 7th, 2009.

<time datetime="&lt;?php the_time('c'); ?&gt;">
    &lt;?php the_time('F jS, Y'); ?&gt;
</time>

Comments

The same technique can be used for displaying comment dates. Only you will have to use comment_date() in stead of the_time().

<time datetime="&lt;?php comment_date('c'); ?&gt;">
    &lt;?php comment_date('F jS, Y'); ?&gt;
</time>