How To Create A Calendar Style Date

25.03.09 by Jerome in Tutorials

Make your blog stand out with some nifty looking calendar dates.
This tutorial will show you how to create a simple calendar style date.
First you need to open your index.php page and find this line of code:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Just below this line delete the article date bits and change to:

<small>Posted in <?php the_category(', ') ?> | <?php
comments_popup_link('No Comments', '1 Comment', '% Comments');
?></small>

Then add the following code just above the H2 tag:

<div class="date">
   <?php the_time('M') ?><br />
   <span class="date"><?php the_time('d') ?></span>
</div>

Next add some styling into your css stylesheet:

div.post div.date{
    background:url(yourdomain.com/wp-content/themes/currenttheme/images/date-bgr.gif) no-repeat 0 0;
    float:left;
    height:50px;
    width:50px;
    color:#fff;
    padding:0 20px 15px 0;
    font-weight:bold;
    text-transform:uppercase;
    line-height:20px;
    text-align:center;
}
div.post div.date span{
    font-size:18px;
}

Drop your background image into your images folder (yourdomain.com/wp-content/themes/currenttheme/images/)

That’s it. Of course you could do the same thing on your single pages, or category pages.
Now you can use your imagination and have fun with the WordPress post date. You can also replace inside the PHP time tag any letter in brackets with any of the following:

• l = Full name for day of the week (lower-case L)
• F = Full name for the month
• j = The day of the month
• S = The English suffix for the day of the month (e.g st, nd)
• Y = The year in 4 digits. (lower-case y gives the year’s last 2 digits
• Or any PHP Dates

Related posts:

css, date, Tutorials, wordpress