infinix flip
Home » WP Date Image Hack

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.

Abe Olandres
Abe Olandres
Abe is the founder and Editor-in-Chief of YugaTech with over 20 years of experience in the technology industry. He is one of the pioneers of blogging in the country and considered by many as the Father of Tech Blogging in the Philippines. He is also a technology consultant, a tech columnist with several national publications, resource speaker and mentor/advisor to several start-up companies.
  1. Big Willy says:

    Finally found some good infomation on the subject.

  2. Abe Olandres says:

    Hi John,

    Did you try and just break the date function ito 3 parts, without the image substitution first? That way, we can see if the function really works just fine with your template.

    If you can leave a link to your blog as well too.

  3. John says:

    Hi,

    Its a great hack you have made. I have spent more than half a day with it and for some reason I can only make the current date display.

    Im using WP 1.51.2 and on the template is uses:

    ‘,”); ?>

    the date from this is correct.

    ‘; ?>
    ‘; ?>
    ‘; ?>

    ‘; ?>
    ‘; ?>
    ‘; ?>

    Do you have any idea what i need to change to make the post date show and not the current date.

    Many Thanks

  4. Tomjack says:

    hello, nice blog

  5. Abe Olandres says:

    Hi Sarah!

    Sorry di ko mashado ma remember eh. bago na rin site mo kaya di ko ma familiarize. Good thing ako hindi mo nakalimutan! ;)

    Glad to be able to help you as well. :)

  6. sarah says:

    hey yuga naalala mo pa kaya ako.. dati pa ako nakapunta dito kaso strawberryshake.net yung domain ko that time.. ayhoo.. ikaw lang pala makakasagot sa hinahanap kong image date hack hahah!! wala naman kasi sa support ng WP.. buti nalang ginoogle kita! hahahah!!! heheheh!!!!

  7. Abe Olandres says:

    @ Jose

    Welcome! And nice implementation fo the hack on your blog!

    @ markku

    The copycat claimed he got it from File Me Away, but he failed to notice Josh’s hack was for MT. I actually posted a comment on Josh’s blog about our hacks similarities.

    @ mr. nice ash

    Yes, as I posted in my entry, Josh of File Me Away made the same tute for MovableType almost the same day I did mine. Though due to time zone differences, he actually did his a day later.

  8. mr nice ash says:

    master, i found a site wherein same hack is posted the same date that you posted this one. June 28, Tuesday. But i think the other one was a moveable type. Yeah.

  9. markku says:

    Yuga, just a clarification. Similar hacks like this was used before in greymatter, that was years ago. I think Derek Powazek even used it in Fray, if my memory is not failing me. ;)

    But for WP, I think you’re the first who shared something about this. To hell with those who take and claim it as their own. ;)

    I suggest you stick a CC or any specific license for anything you share, so they think twice about stealing. ;)

  10. Jose says:

    YAY!!!!! Thnks you SO MUCH!!!!

  11. Abe Olandres says:

    @ Paul

    Hi! As fleeb mentioned, that used to be the case here, text over image bg. I got a little bored and wanted to customize the theme a bit different so I made the hack.

    @ Jose

    Please check on the codes. The one I posted above has lots of spaces in between tags esp. between the “

  12. Jose says:

    I need a little bit of help!!! I was looking for a hack like this so long and I finally founded. I try to use it but seems it’s not even been read. What can be wrong???? I use a different date format but I have checked the strings and they are all right. Please Help me. This hack is awesome!!

  13. Fleeb says:

    @Paul

    Well maybe…

    For one, he may be using a font he really like to use but many don’t have (although this can be compensated with the use of the GD image library, and well, by the use of font-family). Another is the anti-aliased text making it look smoother. And finally, before switching to the use of this images, the “text over background image” was employed before (as it is by default).

  14. Paul Armstrong says:

    Why don’t you just output the text in different spans over a single background image? It really isn’t *standard* anymore to use images for anything that could be displayed with text (like the “Too Cool for IE” badge)

  15. mr nice ash says:

    and the wordpress hacks… sikat na talaga master ko.

  16. Abe Olandres says:

    Kates, taga diin ka? Ilongga ka man?

    Thanks markku, darksparrow… will look into it. ;)

  17. darksparrow says:

    i agree with markku

  18. Kates says:

    Damo gali sagad sa guam bah. Labay lang ko ah.

  19. markku says:

    Yuga, you can actually do it without hacking the date functions. You just make do with:

    .gif’ >

    and the others in similar ways. That way, upgrading WP won’t kill your nice hack. :)

  20. Abe Olandres says:

    @mr. nice ash

    tehehe… madali lang yan actually. Konting kalikot lang. ;)

    @AnP

    Thanks! Hindi po, late na ako dun tsaka di ko ata kaya yun!

    @Fleeb

    Will look into it, but this one is pretty simple. Yung magiging problem mo dito cguro yung management ng Options as WP-Admin.

  21. Fleeb says:

    Yup it can be made into a plug-in, I think that add_action function in WP…

  22. AnP says:

    cool plug-in!!! did you join Alex King’s contest? :)

    Will install it this week! Great one, Yuga!!! You really deserve all the accolades you have been getting.

  23. mr nice ash says:

    wow. just as i thought. yeah. im a newbie but i almost exactly figured out what you have done to came up with your wp-image-date Plugins. You really are a PHP guru. Why not submit your plugin?? and share your package to others… ;)

    master i know how to make some tweaks on wordpress but i dont know php itself. :(

Leave a Reply

cherry aqua series x yugatech
honor x yugatech
vivo x yugatech

Latest Review

Invalid shortcode

Latest Guide

Invalid shortcode

YugaAuto

Invalid shortcode

YugaMoto

Invalid shortcode

YugaGaming

Invalid shortcode

AskYuga

Invalid shortcode
WP Date Image Hack » YugaTech | Philippines Tech News & Reviews

Yearly Device Database

Smartphone pricelist Philippines 2024

Smartphone pricelist Philippines 2023

Smartphone pricelist Philippines 2022

Smartphone pricelist Philippines 2021

Smartphone pricelist Philippines 2020

Popular Topics

What We Do

YugaTech | Philippines Tech News & Reviews
© 2024. All Rights Reserved.