Customized Wordpress Date Button

When I created a custom date button on Zain’s Blog people really liked it. It was a well planned out design. Then I thought it would make a great post if I show you guys how to make a Customized Wordpress Date Button.

Why should you get a customized date button? Simple. It looks cool. It goes with some themes and doesn’t go with others. I think it just spice up some themes if used correctly. For this tutorial: I am assuming you can make your own graphics, if you are not using mine. You have little knowledge of html and css (I mean you know how the div tags and padding works). The final outcome of this tutorial should look like the image on your right.

This is a 3 step tutorial. First we will add the day of the month, then we will add the month, and then finally it will be the year.

We will be using the following image as our background:

First thing you want to do is make a class in your css file that is called .datebg and set your background image.

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

Than insert it in the appropriate wordpress file. Hint: index.php, single.php…

So right now your codes should be looking like this:

<div class="datebg">

</div>

Now you need to add another class and call it .day and set the appropriate margin and CSS. Choose your color and font-size. Insert that class inside your datebg class.

Within your .day class insert the following codes: <?php the_time(’d') ?>

This will allow you to display the date, so like today is the 22nd so thats what it will show you.

Now you need to go ahead and add another class in your css file and name it .month and add the appropriate margin and padding to it. Insert it right after your .day class in the template files.

Within this class you need to add: <?php the_time(’M') ?>

This will display the month of the year like in the picture shown below:

Then you will need to make another class and name it .year. Set the appropriate padding and margins. Insert it right after your month class.

Then within this class add the following codes: <?php the_time(’Y') ?>

This will display the year.

So in the end your template files should look like this:

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

Now you have your own customized wordpress date button. Feel free to use my image in this post. I made it 150 x 150px so people can make it smaller and not lose quality. If you are just wondering how the heck do I enter plain simple date like Balkhis have.

Then just plain enter <?php the_time(’M j, Y’) ?>

This will give you an outcome like Aug 22, 2008.

Enjoy.

Note: Do not copy and paste codes. Type it down by looking at these.