Use CSS and PHP to replace text dates in Wordpress with Calendar Images

I know what you’re thinking to yourself: “Why would I want my Wordpress posts date to be completely replaced by images.”

Just kidding. I don’t know why you would think that to yourself. Let’s face it, with the advent of CSS, we’ve all resorted to replacing what would be normal text markup (words on the page) with images because as designers and creatures of aesthetics, we like things to look unique…and there’s only so much uniqu-ity you can show with standard HTML.

So I’ve taken the already available features of PHP in Wordpress and used it in conjunction with CSS to make totally replaced (and web-standards compliant) dates.


Seem like a lot? See the note at the bottom or click here!
Here is an example if you haven’t already noticed it on the current post.


Okay, here we go…Dive in with me. The water is warm. Download this folder first. It contains 3 important files:

1. The PSD File with the calendar “pages” on it
2. The PHP
3. The CSS

You’ll also need to get the font “Downcome” if you want to keep the font of the Months & Dates the same.

1. First things first, you need to make the calendar. I’ve included a support folder with a PSD file called “datecolumns.psd”. You’re welcome to make any adjustments to it that you’d like, use it as is or completely wipe it clean and make your own, just remember that later on you’ll have to figure out your own background-positions.
2. Second, we need to create an unordered list in the index.php of your site. We’re going to do something like this:

   
   <ul class="smallentrydate">
   <li class="class="date<?php the_time('M'); ?>">
   
   <a>
   
   <?php the_time('M'); ?>
   
   <?php the_time('d'); ?>,
   
   <?php the_time('Y'); ?>
   
   </a>
   
   </li>
   <li class="date<?php the_time('d'); ?>"></li>
   </ul>
   
   

3. That’s it as far as PHP & HTML go. Here’s what we’ve done so far:
   1. Created a class called “smallentrydate”. This is a wrapper for our total calendar page.
   2. Created a class called “date-fill-in-the-blank”. The big M takes whatever month it is and gives an output of “sep” for September, giving you the class, “dateSep” or for August”DateAug”. Using the shorthand for the month with the big M is going to be vital for when we start on the CSS.
   3. We’ve also created a class called “date-fill-in-the-number-date”…So if the post was written on the 5th, it outputs a class=”date05″.
   4. In the <a> tag, you’ll see that we also requested the output of a date in the form of ‘M’ ‘d’, ‘Y’, which would give us “Jan 09, 2009″ in text form. If you turn off CSS, you’ll see this shows up in the place of the calendar image. This is important for accessibility reasons and search engines…so don’t leave it out.
4. Simple so far, right? Let’s move on to the CSS
5. We’re going to start out with defining some things about the smallentrydate class in our style.css:

   
   .smallentrydate {
   	float: right; /* floats it to the right */
   	height: 55px; /* Total Height of Calendar Image */
   	margin: 0 0 10px 0; /* Keeps a good space from text below */
   	padding: 0;
   	width: 60px; /* Total Width of Calendar Image */
   }
   .smallentrydate li {
   	background: url(images/datecolumns.png) no-repeat;
   	list-style: none;
   	margin: 0;
   	padding: 0;
   	top: 0;
   }
   .smallentrydate li, .smallentrydate a {
   	display: block;
   	margin: 0;
   	overflow: hidden;
   	padding: 0;
   	text-indent: -1000em; /* Pushes Text off the page, to keep it from showing up with a stylesheet */
   	width: 55px;
   }
   .smallentrydate .dateJan { background-position: -6px -303px; height: 15px; width: 55px; }
   
   .smallentrydate .date01 { background-position: -6px -318px; height: 45px; width: 55px; }
   
   
   

6. So to break it all down, this is what we’re looking at:
   
   1. We defined the characteristics of our smallentrydate.
   2. Defined the characteristics of our smallentrydate li, most importantly the background-image, and no list-style and the width, which is 55px for every replacing image.
   3. We pushed the text off of the page that would appear on top of the smallentrydate without a text-indent. It gives us the aesthetics of image replacement with the accessibility of text.
7. You’ll also see that I defined .dateJan & .date01 for you. All I did was find the left and top most boundary on Photoshop of January and put background-position: the left (-6px) & the top (-303px) position where I want it to start. (Make sure to use negatives in front of the values), I also defined the height & width.

You’re going to have to set this background-position system up for all 12 months & 31 days, but 43 is a lot nicer than having to do 365 background-positions. You can also use the CSS included in the support folder, which will save you time typing .smallentrydate .date”whatever” everytime.

Hopefully this helps somebody out there. It’s been a great project for me to take on and complete.

Tags
calendar, css image replacement, dates, images, photoshop, PHP, tutorial, wordpress

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.