Mar 25

Here’s a Quick Way to Add a Custom Date Graphic to your WordPress Blog

You may have noticed the spiffy new calendar icon here at Mesmer Lab. Well I created the graphic purely in Photoshop and have made it available at Graphic River. A future article will explain how I made it, but this article is about how to implement it into your WordPress blog.

The goal is to get rid of the generic-looking display of each article’s date. The visitor to most sites would want to know when the article is written to see how relevant the ideas, data or techniques are. A bold display of the date lets the user quickly scan and find the publish date.

Step One: The Image

For quickness, you can download the png file I’m using here, download the full source file at Graphic River, or build your own. Just make note of the dimensions since we’ll be using it as a background image.

You can use most anything as a date icon. Common metaphors include a calendar like I’m using or the piece of paper that Web Designer Wall uses.

Step Two: The WordPress Code

We have to create a few new elements to house the date code. This will take the place of the stock date implementation so we can put or own spin on the look and feel. The following is how I’ve done it here at Mesmer Lab. I’ve modified the code in the Main Index Template (index.php).

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<div class="post">

<p class="date">
     <?php the_time('M') ?>
     <span><?php the_time('d') ?></span>
</p>

{your post code goes here}

</div>

<?php endwhile ?>

I’ve created a DIV with the ‘post’ class inside the loop. There’s a tiny bit of CSS applied to this div and I’ll explain it in a few minutes.

I’ve used a paragraph element for the main container. The paragraph seemed to work better than a typical DIV, in regards to ease of modification and cross-browser compatibility. This is where I put the month for the article.

The span element works perfectly inside the paragraph tag, simply because I added the ‘display:block’ designation. It seemed to play along better instead of a DIV. The numerical date (with leading zero) resides here.

Step Three: The WordPress CSS

.post {
position:relative;
}

The wrapping DIV is set to position relatively. This allows absolute positioning inside for the paragraph element. If you don’t do this, all the dates on the home page will be on top of each other. Don’t just copy and paste this code into your theme files. If you’re not using my specific image, your results will not look right.

.date {
background:transparent url('your-image.png');
position:absolute;
left:-80px;
top:8px;
color:#fff;
width:56px;
height:61px
padding:14px 0 0 18px;
font:bold 12px Arial;
}

Next you’ll need to link the image to the paragraph and position it absolutely inside the div.post element. The padding and width/height are tied together in the box model. You’ll have to adjust the width and height depending on how much padding you need for the text to show up properly. Typical font styling is present.

.date span {
display:block;
width:100%;
text-align:center;
margin-left:-7px;
margin-top:1px;
line-height:26px;
color:#000;
font: italic bold 24px Georgia,"Times New Roman",Times,serif;
}

To push the numerical date on a second line, I’ve employed ‘display:block’. Span by nature displays its contents inline. The margin code is for simple positioning. The line-height is so IE will display the whole number. And we round it out with typical font styling.

Step Four: Adding to Single Posts

The next step is relatively easy. Open the Single Post (single.php) file and repeat the code you used in Step Two. This goes in the same place, so it should be easy for you to find.

Conclusion

Customization will make your Wordpress site unique. You can add a sense of branding by efficient use of colors, icons or other visual elements. By adding a custom date graphic to your Wordpress site, you are on your way to standing out in the crowd.

I hope you enjoyed this tutorial. Comments, suggestions and how you’ve implemented this on your site are welcome.