Creating a WordPress post calendar date icon

Posted January 9th, 2010 in Tutorials, Web Design, WordPress

WordPress date icon tutorial

Blog calendar date icons, which show the publication date next to each entry, provide a simple way to spice up your WordPress design. Using just a single image, a bit of CSS and some WordPress PHP this tutorial will show you how to implement something similar in your own themes. Plus we have some free graphics for you to use…

Firstly let’s start off with making a simple two colour icon which shows the month in short form and the day of the post, the finished icon will look something like this:

Nov
12

Start off with the following HTML and PHP in your WordPress theme:

1
2
3
4
<div class="date">
    <div class="date-month"><?php the_time('M'); ?></div>
    <div class="date-day"><?php the_time('d'); ?></div>
</div>

the_time is a WordPress function however the argument works exactly the same way as PHP’s date function. The M in the first call will output the short text version of the month while the d in the second call will output the day of the post with leading zeros.

Now we’ll use the following image to style the icon:

The following CSS will style the icon:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.date {
	background:#fff url('background.jpg') no-repeat scroll top left;
	width:60px;
	height:57px;
	color:#FFFFFF;
	text-align:center;
}
.date .date-month {
	height:18px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}
.date .date-day {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
}

The first rule sets the image as the background, colours the text white and centres it. The next two rules add a few extra basic styles to both the month and day text.

 

The text style of icon we’ll demonstrate uses only a gradient image to show the day, month and year of a post:

Dec
31
2009

The HTML and PHP for this style is as follows:

1
2
3
4
5
6
7
<div class="date">
    <div class="date-inside">
        <div class="date-month"><?php the_time('M'); ?></div>
        <div class="date-day"><?php the_time('d'); ?></div>
        <div class="date-year"><?php the_time('Y'); ?></div>
    </div>
</div>

We have an extra call to the_time, this time with the argument Y, to show the four-digit version of the year. We also have an extra div wrapping the date in order to create a simple border effect. The following purple gradient will be used for this icon:

Purple gradient

The CSS is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.date {
	background:#330177 url('purple.jpg') repeat-x scroll top left;
	width:60px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border:1px solid #330175;
}
.date-inside {
	border:1px solid #C3A4EF;
	padding:2px;
}
.date .date-day {
	font-size:30px;
}

As before we use the outer div to set the background-image and font styles, increasing the font size on date-day div to make it stand out. The outer div has a dark purple border while the inner div has a much lighter purple border, making an otherwise simple gradient a little more interesting.

 

The final example icon we’ll be constructing uses a simple calendar page icon as background to produce the following:

Nov
12

The HTML is exactly the same as the first date icon example:

1
2
3
4
<div class="date">
    <div class="date-month"><?php the_time('M'); ?></div>
    <div class="date-day"><?php the_time('d'); ?></div>
</div>

The background image used looks like this:

Green calendar date icon

And the CSS follows a similar format as before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.date {
	background:#fff url('fulldate.jpg') repeat-x scroll top left;
	width:60px;
	height:60px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
.date .date-day {
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:35px;
}
.date .date-month {
	font-size:11px;
	font-weight:bold;
}

The background image used for this date icon is also available in a number of other colours which you are free to use without any conditions in your own work or themes:

Red calendar date iconPurple calendar date iconPink calendar date iconBrown calendar date iconBlue calendar date icon

 

 

3 Responses to “Creating a WordPress post calendar date icon”

  1. Quinn says:

    Hi there. Thanks for the code, I was looking for something like this.

    I did install it and it looks great in chrome. But in IE, the background image doesn’t show. Any ideas why? Have you had this problem?

    Thanks!

  2. valentina says:

    thank u so much! it looks great! But i would like to have more space between the date and the text of the post, i guess it’s about margin or padding…

    i choose the third solution

  3. Marcela says:

    Works nicely! Thank you for the tip.

    I have noticed though that the class ‘.date’ colides with some templates. I use ‘.dateblog’, ‘.datedayblog’ and ‘.datemonthblog’ as a workaround.

    It’s awesome. Keep it up!

Leave a Reply