Date Boxes

A word about the spanky new date boxes on the left… they are floated left, and created using semantic markup and valid style :-). Insert this into any WordPress blog, and you have the barebones structure of my date box:


<?php
$date = the_date("d:m:y:Y", "", "", FALSE);
if($date) {
  list($day, $month, $year, $yearlong) = split(":", $date);
?>
<div class="date">
<span class="day">
<a href="/log/<?php print $yearlong ?>/<?php print $month ?>/<?php print $day ?>/" title="Click here to view all posts on this day.">
<?php print $day; ?>
</a>
</span>
<span class="month">
<a href="/log/<?php print $yearlong ?>/<?php print $month ?>/" title="Click here to view all posts of this month."><?php print $month ?></a>/<a href="/log/<?php print $yearlong ?>/" title="Click here to view all posts of this year."><?php print $year ?></a>
</span>
</div>
<?php
}
?>

And of course, the style rules:


.date {
display: block;
margin: 5px;
padding: 2px;
float: left;
border: 1px solid #444;
background-color: #111;
color: #eee;
text-align: center;
}

.date span.day {
font-family: trebuchet ms, tahoma, sans-serif;
font-size: 2.2em;
display: block;
}

.date a {
font-weight: normal;
text-decoration: none;
color: #eee;
}

.date a:hover {
text-decoration: none;
}

.date span.month {
font-size: 0.9em;
font-family: verdana, arial, sans-serif;
display: block;
}

Now a few words about its features: it only appears “once per day” so the page won’t be cluttered up with date boxes. Then too, the day, the month and the year are clickable so you can directly navigate to their pages. There are still a few issues remaining regarding the style when a day has too few posts, and it also seems to mess up a few of my pages, so it needs a bit of work. But imho, it spruces up the visual appeal and the usability of the site a good bit 😉

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s