I don’t know what’s up with the date button, but you seem to really love it. Yea, you! Today, we’re going to learn how to create a date button for WordPress. Here it is in the three simple steps:

First – Type the code

(Do not copy and paste. Type it out.)

<div class=”post-date”>
<div class=”month”><?php the_time(’M') ?></div>
<div class=”day”><?php the_time(’d') ?></div>
</div>

For organization sakes, here’s how it should look like in your source codes:

What the codes actually mean:

<div class=”post-date”> – I’m starting a box or DIV named “post-date.” I could’ve named it “little-potato.”

<div class=”post-month”> – Within the post-date box, I’m starting another box for the month.

<?php the_time(’M’) ?> – Here’s where I use the PHP function the_time(’M’), to call for the abbreviated month name. For example: JUN for June. On my date button example, it’s June instead of JUN because I haven’t coded it to call for the abbreviated version.

</div> – The month box ends here.

<div class=”day”> – The day box starts here.

<?php the_time(’d’) ?> – Using the PHP function the_time(’d’), I’m calling for the day number, which will be a two-digit number. For example: 03.

</div> – The day box ends here.

</div> – There’s nothing else to add to my date button so I’ll end the post-date box or DIV here too because I have to close everything in the order that I open them.

(For more display options for the date, go to php.net.)

Second – Create the background image

You’ll need some kind of design software, like Photoshop, to design your date button background image. Here’s my date button background image:

Third – Style it

This step requires you to know a little bit about CSS and it depends on personal preference because your background image will be different from mine. But, here is the basic:

.post-date{

float: left;

display: inline;

margin: 0 10px 0 0;

background: url(images/date_button_template.gif) no-repeat;

}