@tech

Using CSS it’s easy to spice up your WordPress posts by adding some fun styling to the post date.  I’m certain this translates well into other blog or CMS systems, but I’m just focusing on WordPress with this one.

For this example I’ll show how I created the pseudo old fashioned paper date stamp for this blog.  This post assumes you already know what you’re doing when it comes to editing your WP theme files.  If you don’t any developer (myself included of course) can easily make this modification for you.

First, start in your theme index.php file.  Find the loop where your posts are parsed and displayed.  Somewhere in there you should find something like this which displays the post date:

<?php the_time('M') ?> <?php the_time('d') ?> <?php the_time('Y') ?>

Now, depending oh how this is formatted in relation to the post title, you may need to shift things around a bit.  This date stamp works best if it’s positioned to the left of the post title rather than what is commonly seen as right under the post title.  To do this I created a DIV to hold the post date and title grouped together in this manner of putting the date stamp to the left of the title.  The modified layout looks like this:

<div class="postheader">
	<div id="postdate">
		<div id="pdmonth"><?php the_time('M') ?></div>
		<div id="pdday"><?php the_time('d') ?></div>
		<div id="pdyear"><?php the_time('Y') ?></div>
	</div>
	<div class="posthead">
		<div class="posttitle"><?php the_title(); ?></div>
		<div class="postbyline">by &nbsp;<?php the_author() ?></div>
	</div>
</div>

Note: the post title is usually enclosed by an a href link to the post, which I have removed here for clarity.

As you can see there is the postheader DIV which encases the post date DIV and post title DIV.  All of the formatting work is handled by the CSS as such:

.postheader {
	display: block;
	width: 100%;
	overflow: hidden;
}
.posthead {
	float: left;
	padding-left:10px;
}
#postdate {
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 1px solid black;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: #efefef;
}
#pdmonth {
	background: transparent;
	font-size: 7pt;
	font-weight: normal;
	font-family: Verdana;
	text-transform: uppercase;
	color: #303030;
}
#pdday {
	background: transparent;
	font-size: 12pt;
	font-weight: bold;
	font-family: Georgia,serif;
	line-height: 80%;
	color: #505080;
}
#pdyear {
	margin: -1px 0;
	background: transparent;
	font-size: 7pt;
	font-weight: normal;
	letter-spacing: 0.2em;
	font-family: Georgia,serif;
	color: #505080;
}

I’ve shown only the important CSS elements for posthead and postheader that are required to make this work.  Your theme may require more than what is shown.

As you can see, the size and colors of the date stamp are created in the container postdate.  With a width and height of 40px setting the border radius to half that value, in this case 20px, creates the circle.  The 3 interior DIVs handle the style, size and position of the date elements to create the stamp effect.  Of special not is the -1px margin for the pdyear DIV.  This just nudges the year up 1 pixel to clear the stamp border without impinging on the day.

Of course sizes and position and colors need to be adjusted to suit your theme.  Hopefully this will make your WP theme a bit more fun should you try to play with this.

I have a few more date styles to share in future posts.  If you have a different fun shape or formatting please submit it for inclusion here.