How to Create a Customized Date Button for WordPress

When making your blog stand out, one thing that bloggers often ignore is the date button. Something as simple as a customized date button can really make a difference in your blog’s design. Therefore in this article we will show you how you can create a customized date button for WordPress.

We will start out from the image shown in the left, and will make it look like the one in the right.

You can use the image that we are using above if you so desire for your use, or create your own one.

First thing you need to do is open your style.css file and add something like below:

.datebg{
background: url(images/datebg.gif) no-repeat;
height: 173px;
width: 173px;
}
.day{
}
.month{
}

Now you may style it however you like, and you can also change the name of the class. Then you would need to open your index.php and single.php. And add the following code where your template fits.

<div class="datebg">
<div class="month"><?php the_time(’M’) ?></div>
<div class="day"><?php the_time(’d’) ?></div>
</div>

Make sure you change the styling to fit your needs. Now you should have a customized date image. You can also refer to WordPress Codex for more information.