Create a ‘Calendar style’ WordPress date format

A calendar image for post entries is a nifty looking addition to a blog. This tutorial shows how to format the template tags and the mark up (CSS and XHTML), to whip up a post date calendar, that’s browser resizable.

The Date and Time Template Tags

The post entry date is displayed using the date and time template tags

<?php the_date() ?>

<?php the_time() ?>

To format the post date for a calendar image use <?php the_time() ?>.

The Day of the Month

To display the day of the month, use the value j.

<?php the_time('j'); ?>

The Month

To display the abbreviated month (jan, feb, mar, etc), use the value M. The M value needs to be capitalized, otherwise the month with only display as a number.

<?php the_time('M'); ?>

The Year

For the year, use the value Y. A small y displays the last two digits, and a capitol Y displays all four digits.

<?php the_time('Y'); ?>

The XHTML mark up

Wrap all the tags in a <div> element. Also, wrap the month tag in a <span> element, so it can be uniquely styled. Assign a class name to both elements. To create line breaks add <br /> tags after both the day of the month, and the month tags:

<div class="date">
<?php the_time('j'); ?><br />
<span class="month"><?php the_time('M'); ?></span><br />
<?php the_time('y'); ?>
</div>

If you use HTML the <br /> tags should not be self closing. Use <br> instead.

In the wp-admin, go to Presentation > Themes, and look for the post entry wordpress loop, in the Index.php template. Then, swap the <?php the_date() ?> template tag, with the mark up above.

Save and view your site, and you should have something like this:

The CSS mark up

In Presentation > Themes, open up the syle.css file. add both the class name selectors with the following properties and values:

.date {width:3em;
       padding:0.6em 0 0 0;
       text-align:center;
       border-right:1px solid #bcd0d4;
       border-bottom:1px solid #bcd0d4;
       color:#355b61;
       background-color:#dfe9eb;}

.month {text-transform:uppercase; font-weight:bold; color:#9b241b;}

I’ve used the border properties to give the calendar a dropshadow effect.

The result should look something like this:

Next add a background image. For this tutorial it should be 24 pixels in height, and extra long to compensate for increased font size in browsers.

Here’s my image:

you can copy and save my image and upload it to your theme’s images file for this tutorial.

Add the following properties and values to the .date class selector:

background-image:url(images/calbg.jpg);
background-repeat:no-repeat;
background-position:top center;

The result:

You now have a resizeable calendar for your blog posts.

Decreased font-size (0.7em)

Increased font-size (2em)

And that’s it