A Classic WordPress Date Image Hack

Here’s a simple and classic hack for WordPress’ date entries. It’s from Abe of Yugatech and it involves the use of dynamic images. To try it out on your site, just follow the instructions that Abe provided below.

  • Before anything else, you need to create your own date image template using an image editor (i.e. Photoshop). Make sure that you lay them out so that the month, day, and year are all distinct from each other and not overlapping.
  • Using Photoshop’s ruler guide, slice the template into 3 parts.
  • You’ll need to determine the date format you use in your blog. Mine uses the day of the week, day, and month.
  • Now create individual images using the sliced template and name them accordingly. For day of the week, the naming convention is mon.gif, tue.gif, and so on; for the day, it’s 1.gif, 2.gif, 3.gif… 31.gif; and for the month it’s jan.gif, feb.gif, etc.

ScreenHunter 88 Aug. 28 13.16 A Classic WordPress Date Image Hack

NOTE: If you intend to spell out the full names of the months and days of the week, be sure to name your GIFs accordingly (e.g. Friday, February, 2005 will use “Friday.gif”, “february.gif”, “22.gif”, and “2005.gif”).

  • Once you’re done with your images, you can then work on the hacking of WordPress’ date function and replace the text dates with your images.
  • Look for the post.php file in your WP theme folder (or it can be the index.php depending on the theme you’re using) and then open it for editing.
  • Look for < ?php the_time(‘D, M j’) ?>
  • Break it down in to 3 parts like so:
< ?php the_time('D') ?>
< ?php the_time('M') ?>
< ?php the_time('j') ?>

  • Now edit them so the code echoes the image equivalent:
< ?php $d = strtolower(get_the_time('D')); echo ("< img src= 'wp-images/{$d}.gif' > "); ?>
< ?php $m = strtolower(get_the_time('M')); echo ("< img src= 'wp-images/{$m}.gif' > "); ?>
< ?php $j = strtolower(get_the_time('j')); echo ("< img src = 'wp-images/{$j}.gif' > "); ?>

Check the date format parameter string if you have a different date format.

If there’s anything you’d like to ask Abe about this hack, feel free to ask him about it here.

 

Incoming search terms for the article:

Related Posts

CSS-Made iOS Icons

Quickly Convert Hash Into URL Query

Creating Instagram Filters with Photoshop

Add Breadcrumbs Without A Plugin In WordPress