Skip to content
June 28, 2005

WP Date Image Hack

I am posting the simple hack I made with using dynamic images to replace the date entries of my blog. Just follow the short tutorial here to implement the same with your WordPress blog:

  • Create your own date image template in Photoshop. Make sure that you layout them so that the month, day and year are all distinct from each other and not overlapping. See my example here :
  • Using the ruler guide in Photoshop, slice the template into three parts.
  • You will need to determine the date format you use in your blog. Mine uses day of week, day and month. Now create individual images using the sliced template and name them accordingly. For day of week, the naming convention is mon.gif, tue.gif, … sun.gif; for the day — 1.gif,… 30.gif; for the month — jan.gif, feb.gif,… dec.gif.


  • (Note: If you use full date names, you will need to name your GIF files similarly (i.e. Friday, February 22, 2005 will use “friday.gif”, “february.gif”, “22.gif” and “2005.gif”).
  • Now, we’re ready to hack the WP date function to replace text dates with images. Go to your WP theme folder and look for the post.php file and open it for editing. Note: depending on the WP theme you use, the file could also be index.php.
  • Look for the date function as such:
    < ?php the_time('D, M j') ?>

    You will need to break that into 3 parts like this:

    < ?php the_time('D') ?>
    < ?php the_time('M') ?>
    < ?php the_time('j') ?>

    Now we edit them so the code echos 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' > “); ?>
  • You will need to check on the date format parameter string if you have a different date format.

I hope that was fairly simple to understand. :D I’m not sure if this hack can be made into a plugin though.

Written by yuga

Abe is the founder and publisher of YugaTech. You Can follow him on Twitter @abeolandres.

Follow me on Twitter or add me up on Facebook.


166 Responses to “WP Date Image Hack”

  1. [...] Sticky” Pages84. How-to turn visitors into returning visitors85. How to Show Category Images86. WP Date Image Hack87. Removing Several Categories from the Loop in WordPress88. The Most Desired WordPress Hacks: 11 [...]

  2. [...] images - 使用Wordpress custom fields实现添加文字到图片上. 28. The Date/Image HackInteresting tutorial 教你如何让日期显示更漂亮。 29. wordpress动态置顶文章dynamically make posts stay [...]

  3. [...] Another Date Image Hack [...]

  4. [...] 35.How To Replace Date Images To Your WordPress Post [...]

  5. [...] Interesting tutorial on how to combine a combination of images, CSS and WordPress hooks in order to graphically display the date of the published post. [...]

  6. [...] Interesting tutorial on how to combine a combination of images, CSS and WordPress hooks in order to graphically display the date of the published post. [...]

  7. [...] Interesting tutorial 教你如何让日期显示更漂亮。 [...]

  8. [...] WordPress后台管理界面的一份表单中。 7)WP Date Image Hack- 使用动态的图像替换你博客日志的日期. 8 ) Category Page Hacks- [...]

  9. [...] Interesting tutorial 教你如何让日期显示更漂亮。 [...]

  10. [...] Interesting tutorial 教你如何让日期显示更漂亮。 [...]

  11. [...] Interesting tutorial 教你如何让日期显示更漂亮。 [...]

  12. [...] 86. WP Date Image Hack [...]

  13. [...] Interesting tutorial 教你如何让日期显示更漂亮。 [...]