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;
}