Here I will provide you with the xhtml, wordpress tags, CSS, and images to show your posts’ date in a very fashionable and original way!

Let’s go through the basic concepts, displaying date in text format only (no images). Date can be displayed in numerous ways. Here are some basic codes:

• <?php the_time('F j, Y'); ?> . That code gives you : June 16, 2008
• <?php the_time('l, F j, Y'); ?> . That code gives you : Monday, June 16, 2008
• <?php the_time('D, M j y'); ?> . That code gives you : Fri, Jan 16 08

If you want more options on how to display this, just visit the PHP date formatting options by PHP.net.

Now, you’ve probably seen those cute date clouds or other geometrical shapes, on some websites. Here I’ll show you how to do a basic Month-Day display. At the end of this post you’ll see links to download the icons used for this.¹.

We’re going to format the date so it’ll be aligned to the left of the post title. Let’s start with the HTML you’ll insert. Look for <?php while (have_posts()) : the_post(); ?> or something similar. You should see some king of coding similar to the ones above for displaying the date. Eliminate that coding. Be sure to check that the date is placed before the post title, and this is the code you’ll place there:

 <div class="post-date"><span class="post-month"><?php the_time('M') ?></span> <span class="post-day"><?php the_time('d') ?></span></div> 

Now, for the CSS (I was using one of the thought bubbles when I typed this CSS) :

.post-date {
	width: 60px;
	height: 60px;
	float:left;
        margin-right: 5px;
	background: url(img/FILE.jpg) no-repeat;
        background-position: left;
}
.post-month {
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	display:block;
	line-height: 15px;
        font-weight: bold;
	padding-top: 5px;

}
.post-day {
	font-size: 30px;
	text-transform: uppercase;
	color: #e1e1e1;
	text-align: center;
	display:block;
	line-height: 15px;
	padding-top: 2px;

} 

Note that the CSS properties might vary depending on the icon you select. You may need to adjust the padding and font sizes.

Free Date Icons

[download#38#image]

[download#39#image]

[download#40#image]

1. Yes, they’re made by me! [↩]