fbpx

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.

Yugatech 728x90 Reno7 Series

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 976 other subscribers
Avatar for 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.

30 Responses

  1. Avatar for Big Willy Big Willy says:

    Finally found some good infomation on the subject.

  2. Avatar for Abe Olandres 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. Avatar for John 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

Leave a Reply
JOIN OUR TELEGRAM DISCUSSION

Your email address will not be published. Required fields are marked *