Sexy WordPress Date Button

In this short tutorial we will demonstrate how you can jazz up your post’s date with a calendar icon, some CSS and a tiny bit of PHP!

To start with we are going to find a suitable icon. We could make this ourselves but IconFinder has a great timesaving selection. This is the icon I ended up going with:

It was created by Marcelo Marfil and was my first choice because of the ripped page effect and shadowing.

Download Icon

The Code

Next up is the coding part, we will start with the PHP. You need to add the following lines of code into the loop of the template files you would like the date button to appear on. I would recommend adding it to; single.php, index.php and search.php

<div class="postdate">
  <div class="postmonth"><?php the_time('M') ?></div>
  <div class="postday"><?php the_time('d') ?></div>
</div>

Styling

Now for the styling, firstly we will style the containing element (.postdate):

.postdate {
  float: left;
  display: inline;
  margin: 5px 10px 0 0;
  padding: 2px 0 0 0;
  background: url(img/date_img.png) no-repeat;
  width: 59px;
  height: 60px;
  text-align: center;
}

The above CSS will create the overall look of our date button. However, we still need to style the Month and Day div classes.

.postmonth{
  color: #FFF;
  font-size: 11px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  padding: 2px 0px;
}

.postday{
  color: #333;
  font-size: 25px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  padding: 3px 0px;
}

End Result

The end result should look the same as below:

This entry was posted on Wednesday, March 2nd, 2011 at 11:52 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.