WordPress Date Button

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:

WordPress Date Button

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>

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

date button 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:

float: left;
display: inline;
margin: 0 10px 0 0;
background: url(images/date_button_template.gif) no-repeat;

date_button_template.gif should be the name of your image. images/ is the location of the image folder. If you store your images in a different folder, change images/ to match the location of your image folder.

The Pride theme, which includes the use of a date button, will be released soon.

You May Also Like

Avatar of Jazib Zaman

About the Author: Jazib Zaman

Leave a Reply

Your email address will not be published. Required fields are marked *