The Entry Archive
Make Your WordPress Post Dates Look Awesome With Images And PHP
It’s no secret that web typography sucks, which is why some of the most aesthetically appealing websites rely on images to replace blocks of text inside of their layouts. Various techniques can be used to replace text with images, from simply including an IMG tag inside of a web page’s HTML to employing more advanced methods like CSS DIV tags and PHP.
Included in most WordPress blog posts is a timestamp which shows the date that an entry was published. If you scroll all the way down to the bottom of this entry, you’ll see a simple block of bold text that says “March 27, 2007″.
While this small date block suits my needs just perfectly for the time being, there may come a time when I decide that I want my post dates to be more attractive than the standard, run of the mill text that most browsers support.
The solution is quite simple, really. All we need to do is use any standard image format (GIF, JPG, PNG, etc.) with a little PHP and a modest level of patience.
The Setup
Setting up the date images is by far the most time consuming part of the entire process. You will need to decide how you want your dates displayed. Will they be uniform throughout? Will they be thematic with respect to the specific season? Your imagination is your greatest tool when setting up the dates. For the purposes of this tutorial, I have decided to go with a uniform font to be used year round.
You will need to create a folder inside of your theme’s folder and give it a name like “dates” or something that is easily recognizable when you need to make changes in the future.
Inside of your “dates” folder you will need to make three separate folders, one for each element of your post date - days, months, and years.
Here is an example of what the Days folder should look like:
Take care to name each file in accordance with its graphic. That is to say, the “01″ graphic should be named “01.gif”.
Here is an example of what the Months folder should look like:
January should be named “01.gif”, February should be named “02.gif”, and so on and so forth.
And finally, here is an example of what the Years folder should look like:
Make sure to name graphic for the year 2000 as “2000.gif”, and so on and so forth.
The Code
Now that we have all the dirty work out of the way, it’s time to put our PHP code into our WordPress template.
This following is more or less the structure of the code that you should be aiming for:
<div id="featured_header"><img src="<?php echo get_option('home'); ?>
/wp-content/themes/bsw/images/ big_dates/month/
<?php the_time('m') ?>.gif" alt="Month" /><img src="<?php echo get_option('home'); ?>
/wp-content/themes/bsw/images/ big_dates/day/
<?php the_time('d') ?>.gif" alt="Day" /><img src="<?php echo get_option('home'); ?>
/wp-content/themes/bsw/images/ big_dates/year/
<?php the_time('Y') ?>.gif" alt="Year" /></div>
The DIV is optional, but I have included it to deal with things like spacing and the total width of my date block. The three key PHP components to pay attention to are the_time(’m'), the_time(’d'), and the_time(’Y'). This is where all of the action happens. If your image format is a format other than GIF, make the necessary changes.
Make sure that you have created a folder that houses all three date folders. I suggest this method because it makes locating your files a lot easier in the long run and future changes won’t be as painful.
Your final image output will look like the following:
This image will stay dynamic as your dates change and your WordPress blog will be the envy of all your friends.
I promise!
Post Date: March 27, 2007
11 Responses to “Make Your WordPress Post Dates Look Awesome With Images And PHP”
Mark:
June 17th, 2007 at 3:27 am
Awesome post mate. I’m definitely going to think about implementing this on my new wordpress template design.
Entry Dates Linked to Archive:
July 10th, 2007 at 12:21 pm
[...] Add some style to make it look better or have it appear in a date block. [...]
milo:
July 31st, 2007 at 9:35 am
You can make it this way too:
src=”/images/…” />
of course without the space after/before the (?).
milo:
July 31st, 2007 at 10:02 am
Hum, ate the php code, let’s try it again:
src=” /images/…
Philip Arthur Moore:
July 31st, 2007 at 11:01 am
This using this, Milo.
David Zemens:
December 18th, 2007 at 8:56 am
What a great post! Very nice explanation about how to implement image dates.
My only suggestion is to use the same PHP code that you used to display the month-day-year and insert it into the ALT tag of the image. If someone has images turned off on their computer they still would be presented with a functional date display.
Thanks again for this post.
michael:
January 7th, 2008 at 4:13 pm
Sorry for what may be elementary, but where does that code go…in what file?
Philip Arthur Moore:
January 7th, 2008 at 4:16 pm
Michael,
This code can go in any of WordPress’ template files, including, but not limited to, pages.php, single.php, home.php, and index.php.
With that said, it must be located within the WordPress Loop.
Cheers,
Philip
Philip Arthur Moore:
January 7th, 2008 at 4:17 pm
David,
Thanks a ton for your suggestion on the ALT portion of the images!
Jordan:
January 31st, 2008 at 1:27 pm
This is a great technique. However, I would make it a little more accessible than just using the ALT property for each image. Just include a basic CSS class that hides text (in this case the Month, Day & Year) in each span containing an image:
Some Code:
<img src="
/wp-content/themes/bsw/images/ big_dates/month/
.gif" alt="Month" />
<img src="
/wp-content/themes/bsw/images/ big_dates/day/
.gif" alt="Day" />
<img src="
/wp-content/themes/bsw/images/ big_dates/year/
.gif" alt="Year" />
Style:
.hidetext {
text-indent: -9999px;
}
awesome:
September 16th, 2008 at 2:37 am
love it
Leave a Reply