Download .PNG Files

Download .PSD (Photoshop) Files

How To Incorporate Into WordPress

To incorporate this into your current wordpress theme you are going to have to do a slight bit of image editing and css as well as xhtml… but don’t worry, we’ve done most of it for you!

Editing In Photoshop (if needed)

First download and unzip the archive. Then pick out your favorite color and open it in photoshop. You will now “save as…” the file into a .gif to be titled “dateicon.gif”…. why are we doing this? Because your visitors using the unholy Internet Explorer 5 or 6 cannot view semi-transparent .png’s.

When you save the gif a dialog will appear. Select the dropdown box next to “Palette” and select “Local (Selective)”. Make sure the check box next to “Transparency” is ticked (checked). Now select the “Matte” drop box and select “White.” and click OK. Now you have a IE friendly transparent .gif. Upload it into your wp-themes/YOURTHEMEHERE/images directory.

Adding the CSS/XHTML To WordPress

Log into your WordPress Admin Panel and go to “Presentation.” Now click on “Theme Editor” and select “style.css” on the right side (this is usually brought up automatically).

Add this code:

.the_date {
display:block;
text-align: center;
float:left;
font-family: Arial, Helvetica, sans-serif;
background: url(/images/dateicons/dateicon.) no-repeat;
width:60px;
}

.date_m {
display:block;
font-size: .9em;
margin:0;
padding:0;
font-weight: bold;
text-align:center;
}

.date_d {
display:block;
font-size:1.4em;
margin:0;
padding:0.7em 0 1.3em 0;
text-align: center;
}

(thanks david!).

Also note your images directory might be named something other then “images” and your path will differ so keep that in mind.

After you’ve added the code above, click on “Main Index Template” in your theme editor and find a line containing the following partial code:

<a href=”<?php the_permalink() ?>

You are going to add this above or before that line:

<div class=”the_date”>
<div class=”date_m”><?php the_time(‘F’) ?></div>
<div class=”date_d”><?php the_time(‘jS’) ?></div>
</div>

Now view your page and configure any changes you see fit.

And thats as far as i can take you! Enjoy. Some resources below if you are stuck…

Create a ‘Calendar style’ WordPress date format
WP Date Image Hack